Lectura obligatorie
AJAX Tutorial
jQuery – AJAX Introduction
jQuery AJAX Methods
Cerințe de implementare
Cerința nr. 1
Pentru aplicația web dezvoltată până în prezent în cadrul orelor de laborator, implementați următoarea funcționalitate folosind pe frontend exclusiv JavaScript (fără utilizarea librăriilor externe, de exemplu jQuery, și fără utilizarea selectorilor specifici jQuery, precum $, chiar dacă aceștia sunt acceptați de sintaxa JavaScript):
Realizați afișarea paginată a unui număr de n înregistrări din baza de date, prezentate câte k pe pagină, sub forma unui tabel cu k linii.
Tabelul va include două butoane:
- Next k
- Previous k
Aceste butane vor deveni disabled:
- butonul Next k, atunci când sunt afișate ultimele k înregistrări;
- butonul Previous k, atunci când sunt afișate primele k înregistrări.
Înregistrările vor fi preluate de pe backend printr-un apel AJAX care va returna datele în format JSON.
Cerința nr. 2
Implementați aceeași funcționalitate descrisă la Cerința nr. 1, cu diferența că apelul AJAX care returnează cele k înregistrări va transmite datele în format XML.
Cerința nr. 3
Implementați afișarea paginată conform Cerinței nr. 1 (afișare de câte k înregistrări), însă folosind apeluri AJAX realizate prin intermediul jQuery. De asemenea, afișarea și popularea elementelor din frontend vor fi realizate tot folosind jQuery.
Cerința nr. 4
Implementați o variantă de afișare paginată a câte k înregistrări realizată exclusiv pe backend, fără utilizarea:
- JavaScript
- jQuery
- altor librării de frontend
Navigarea între pagini se va realiza exclusiv prin mecanisme server-side.
Cerința nr. 5
Pentru anumite entități din baza de date, implementați o modalitate de editare folosind vanilla AJAX (plain JavaScript).
Presupunem existența unei tabele în backend, ale cărei înregistrări sunt identificate printr-un atribut cheie (de exemplu: id).
Se cere realizarea unui formular care să conțină:
- o listă (
select) cu valorile atributului cheie; - câmpurile corespunzătoare celorlalte atribute ale entității selectate.
Funcționalitatea trebuie să respecte următoarele cerințe:
- La schimbarea elementului selectat din listă, valorile celorlalte câmpuri din formular vor fi actualizate printr-un apel AJAX către backend.
- La modificarea valorilor atributelor din formular, butonul Save, inițial dezactivat (
disabled), va deveni activ. - Apăsarea butonului Save va salva modificările pe server.
- Dacă utilizatorul modifică datele din formular și încearcă să selecteze un alt element din listă fără a salva modificările, acesta va fi avertizat că există modificări nesalvate și va fi întrebat dacă dorește salvarea acestora înainte de continuare.
Implementarea se va realiza exclusiv folosind vanilla AJAX (plain JavaScript).
Cerința nr. 6
Implementați Cerința nr. 5 folosind jQuery.
Observații suplimentare
- În cazul apariției unor erori la apelurile AJAX efectuate pentru implementarea cerințelor de mai sus, acestea trebuie semnalizate și afișate utilizatorului într-o manieră cât mai user-friendly (exemplu: ce se întâmplă dacă calculatorul utilizatorului este deconectat de la Internet chiar în timpul efectuării unui apel AJAX?);
- În cadrul orelor de laborator pot fi formulate și cerințe suplimentare față de cele prezentate în acest enunț. Pentru fiecare întrebare adresată de cadrul didactic referitoare la codul sursă al rezolvării, la care studentul nu poate oferi un răspuns justificat, se vor scădea 2 puncte din nota laboratorului.