Ajax pentru incepatori

Ce este un apel asincron?

Dacă nu vom folosi Ajax, fiecare schimb de date între server și client va avea loc pe modelul tradițional, adică, actualizarea pagini web sau descărcați unul nou.

De exemplu, dacă ne umplem o anumită formă de intrare și apăsați trimitere, datele introduse sunt trimise la server, iar după tratament este returnat, ceea ce atrage după sine o pagină de reîmprospătare completă, adică această pagină este încărcat ca un nou document care îl înlocuiește pe cel anterior.

Datorită Ajax în schimb, serverul și clientul poate comunica „în fundal“ la intervale de timp sau atunci când un anumit eveniment are loc.

Dacă încă nu bibliotecă JQuery. descărcați-l de pe site-ul oficial.

Creați o ajax.html pagină web care va conține un formular de intrare simplu, în cazul în care doriți să introduceți un prenume și nume.

După cum se poate vedea după ce forma a fost adăugat bloc DIV cu ID-ul rezultat se va mai târziu de ieșire rezultatele de forme de prelucrare.

Acum, creați o pagină, result.php care va fi trimis la datele din formularul nostru. Și a pus în ea următoarea.

Acest cod afișează pur și simplu un mesaj cu datele transmise substituite de la o metodă formă POST.

Includerea JQuery și a funcțiilor de formare

Ne întoarcem acum la fișierul ajax.html conectați-l la biblioteca JQuery și prescrie funcțiile necesare.

Acum, creați un cod jQuery dorit, care va fi descris în detaliu mai jos.

Și așa am spus în prima linie:

Elementul cu ID-ul „input_form“, atunci când „submit“ eveniment are loc, pentru a îndeplini această funcție.

În a doua și a treia linii:

var lastname = $ ( "# lastname") attr ( 'valoare') .;

Definim un nume de variabilă, îndepărtarea elementului atributul „valoare“ cu id-ul „nume“ și „numele de familie“.

Vom continua să pună în aplicare un apel Ajax. JQuery are trei metode de control pentru apeluri asincrone este de $ .post, $ .get, și $ .ajax. În acest prim exemplu vom folosi $ .post, care trimite date către server prin POST.

- avem nevoie pentru a face un răspuns care va fi trimis la serverul nostru, configurarea «date».

În cazul nostru, trimitem o result.php anchetă, furnizând date ca numele parametrului și numele variabilei (conținutul extins anterior nume de câmp de introducere pe un formular), și parametrul variabil și numele de familie.

În cazul în care, dacă utilizați metoda de $ .ajax, vom obține același rezultat, dar trebuie doar să rescrie funcția.

Această metodă este un pic mai sintaxă complicată, dar este, de asemenea, mai personalizabil decât metoda de $ .post și $ .get. O listă completă de parametri pot fi găsite în documentația.

Cum de a gestiona cererea ajax folosind JSON.

În acest exemplu, vom, atunci când apăsați un buton care va primi ora și data curente de pe server. Să începem cu o pagină PHP (result2.php).

Ia indicatorul de timp, ora și data, iar apoi se afișează în format JSON

Ne întoarcem acum la Ajax-json.html pagina

Aici forma constă dintr-un singur buton, unitatea este de asemenea prezent div id = „rezultat“, care va fi înlocuit cu valoarea rezultatului interogării.

Acum zaberom acest cod mai detaliat.

În elementul #input_form atunci când are loc un eveniment să prezinte efectua această funcție. Apoi, face o pagina de solicitare result2.php Ajax.

Acum ne-am stabilit valorile parametrilor dataType prin JSON. Acest lucru spune jQuery ce răspunsul ar trebui să fie în acest format, prin urmare, răspunsul de la server va fi inserat în «datele» obiect. Din acest motiv, de exemplu, valoarea pe care l-am trimis cu numele zilei ( „zi“: „$ zi“), obținem o data.day.

Astfel, putem face trei valori (aici, este interesant faptul că în raport cu exemplul anterior, în care rezultatul a fost o unitate separată, putem gestiona acum date individual) într-o poziție bazată pe valorile ID-ul specificat.

Trebuie să acorde o atenție suficientă pentru a lucra cu Ajax, luând în considerare diferiți factori care afectează schimbul de date cu serverul. Să presupunem că cererea este complexă sau serverul este ocupat, poate dura ceva timp. Într-o cerere obișnuită la server în fereastra de browser, putem vedea mesajul „În așteptare pentru deschiderea WWW“ „Transferul de date de la rețea. „Etc., dar în cazul în care solicitarea este făcută în Ajax, care nu se întâmplă. În consecință faptul că utilizatorul ar putea crede că nu se întâmplă nimic, că este o greșeală uzabilitate.

Prin urmare, este necesar să se înlocuiască întreaga lungime a interogării orice semn animat, ceea ce a făcut clar că să se întâmple anumite acțiuni.

Să luăm ultimul exemplu (ajax-json.html) și ceva în el schimbat:

Inserați imaginea de lângă butonul