Meniul
AcasăBrowsere

Exemple de utilizare a ajax. Primirea datelor de la server. Gestionarea cererilor de succes

Cele mai multe site-uri web moderne folosesc o tehnologie numită AJAX pentru a fi rapid și eficient interacțiune eficientă cu un vizitator. AJAX a devenit o metodă foarte populară pentru preluarea datelor de pe un server în fundalȘi actualizare dinamică pagini.

Dezvoltarea codului JavaScript pentru a implementa AJAX de la zero este un proces foarte consumator de timp și plictisitor. Cu toate acestea, mulți Biblioteci JavaScript, inclusiv jQuery, au o implementare excelentă la nivel înalt a AJAX sub forma unui set de metode și funcții care fac construirea site-urilor web mai ușoară și mai rapidă.

În această serie de tutoriale, ne vom uita la elementele de bază ale construirii cererilor AJAX folosind jQuery. Vor fi abordate următoarele subiecte:

  • Ce este tehnologia AJAX? Cum functioneazã? Care sunt avantajele sale?
  • Cum să o facă Tipuri variate Solicitări AJAX folosind jQuery?
  • Trimiterea datelor către server folosind cereri AJAX.
  • Prelucrarea și extragerea datelor din răspunsurile AJAX de pe server.
  • Cum să personalizezi procesarea AJAX în jQuery și să schimbi setările implicite?

Notă: tutorialele se concentrează pe partea client a JavaScript. Dar dezvoltarea părții server este, de asemenea, destul de simplă. Pentru informații mai complete, ar trebui să studiați materiale despre limbaje de programare pe server, cum ar fi PHP.

Ce este AJAX și cum este util?

AJAX este o tehnică de dezvoltare a aplicațiilor web în care codul JavaScript care rulează în browserul vizitatorului comunică cu serverul web în mod asincron, adică în fundal. Diferențele față de aplicațiile web obișnuite sunt următoarele:

  • O pagină web tipică conține link-uri sau formulare care, atunci când se fac clic sau sunt trimise, creează o solicitare către o nouă adresă URL pe serverul web. Serverul trimite complet pagina noua HTML, pe care browserul îl scoate apoi, înlocuindu-l pagina originală. Această abordare necesită mult timp și este dăunătoare pentru vizitator, deoarece trebuie să aștepte ca noua pagină să se încarce.
  • Când utilizați tehnologia AJAX, codul JavaScript face o solicitare către o adresă URL de pe server. Codul poate trimite și date împreună cu cererea. Codul JavaScript procesează apoi răspunsul serverului și acționează în consecință. De exemplu, se pot face calcule cu datele returnate, se poate adăuga sau actualiza un widget pe pagină sau se poate trimite vizitatorului un mesaj despre actualizarea bazei de date pe server.

Deoarece cererea AJAX rulează în fundal, codul JavaScript (și vizitatorul) pot continua să interacționeze cu pagina în timp ce cererea este procesată. Procesul este ascuns vizitatorului, care nu trebuie să părăsească pagina pe care o vede acest moment timp. Această abordare face ca paginile AJAX să fie foarte plăcute de lucrat.

Punctul fundamental al AJAX este obiectul JavaScript XMLHttpRequest. Oferă o serie de metode precum open() , send() și onreadystatechange() care pot fi folosite atunci când se trimit cereri AJAX către server și se procesează răspunsurile în fundal.

Dezvoltarea codului JavaScript AJAX pe mai multe browsere poate fi un proces destul de obositor. Din fericire, jQuery vă oferă mai multe metode AJAX ușor de utilizat, care vă permit să abstrageți o mulțime de operațiuni de nivel scăzut.

Pentru cei mai curioși, cuvântul AJAX este o abreviere a primelor litere ale expresiei în Limba engleză„A synchronous J avaScript A nd X ML” (JavaScript și XML asincron). Cu toate acestea, termenul poate induce în eroare - cererea nu trebuie să fie asincronă și nu trebuie să folosească XML pentru a trimite datele.

Efectuarea unei cereri GET folosind $.get()

Metoda jQuery $.get() oferă un simplu și mod convenabil faceți o cerere simplă AJAX. Ea face cererea folosind metoda HTTP GET (folosită pentru a prelua adrese URL, cum ar fi pagini și imagini), în loc de metoda POST (care este folosită în mod tradițional pentru a trimite datele din formular).

În forma sa cea mai simplă, puteți apela o metodă ca aceasta:

Unde este adresa URL adresa URL resursă de la care se așteaptă un răspuns. De obicei, acesta este un script pe partea de server care efectuează unele acțiuni și poate returna unele date:

$.get("http://example.com/getForecast.php");

Deși puteți solicita și un document static:

$.get("http://example.com/mypage.html");

Când solicitați o adresă URL, puteți trimite date împreună cu solicitarea. Puteți transmite date în șirul de interogare, la fel ca în cazul unei cereri GET obișnuite:

$.get("http://example.com/getForecast.php?city=rome&date=20120318");

Modul corect de a face același lucru este să treceți obiectul de date ca al doilea parametru la metoda $.get(). Obiectul de date trebuie să conțină informații sub formă de perechi nume de proprietate/valoare de proprietate. De exemplu:

Var data = (oraș: "roma", data: "20120318" ); $.get("http://example.com/getForecast.php", date);

Alternativ, puteți trece datele metodei $.get() ca șir:

Var date = "city=rome&date=20120318"; $.get("http://example.com/getForecast.php", date);

Primirea datelor de la server

Până acum, ne-am uitat la exemple de utilizare a $.get() doar pentru a trimite cereri către server, ignorând orice răspuns pe care l-ar putea genera scriptul de pe partea serverului. Dar, în cele mai multe cazuri, codul JavaScript va aștepta un răspuns de la un script de pe partea serverului și va procesa datele primite.

O solicitare AJAX este asincronă, ceea ce înseamnă că rulează în fundal, în timp ce restul codului JavaScript continuă să ruleze. Cum, atunci, să primiți un răspuns de la server când solicitarea este finalizată?

Trebuie să scrieți o funcție de apel invers care va fi executată automat când solicitarea AJAX se finalizează și serverul trimite un răspuns. Cel puțin, funcția dvs. ar trebui să accepte datele returnate de server ca prim argument:

Funcția myCallback(returnedData) ( // Prelucrăm datele returnateData )

Odată ce funcția de apel invers este creată, o puteți trece ca al treilea argument la metoda $.get():

Var data = (oraș: "roma", data: "20120318" ); $.get("http://example.com/getForecast.php", date, myCallback);

Determinarea tipului de date de răspuns

De obicei, partea de server trimite date într-unul dintre mai multe formate comune, inclusiv XML, JSON, JavaScript sau HTML. În mod implicit, jQuery încearcă să determine cel mai potrivit format și să analizeze datele în consecință. Dar este mai bine să definiți în mod explicit formatul.

Pentru a specifica formatul, trebuie să treceți al patrulea argument la metoda $.get(). Acest argument poate fi un șir din următoarea listă:

  • "xml"
  • "json"
  • "scriptie"
  • "html"

De exemplu, dacă știți că scriptul serverului returnează date în format JSON, atunci apelați metoda $.get() astfel:

$.get("http://example.com/getForecast.php", date, myCallback, "json");

Exemplu de utilizare a metodei $.get().

Iată un exemplu de creare a unei cereri AJAX folosind metoda $.get() și prelucrare simplă Răspuns. Pentru ca exemplul să funcționeze, trebuie să creați un fișier text simplu pe server numit getForecast.txt care conține textul următor:

( „oraș”: „Vasyuki”, „data”: „18 martie 2012”, „prognoză”: „frig și nămol”, „maxTemp”: +1)

Acest fișier va simula un răspuns în format JSON care ar putea fi generat de un script de prognoză meteo pe server.

Apoi creăm pagina showForecast.html în același folder ca getForecast.txt:

Prognoza meteo $(function() ( $("#getForecast").click(function() ( var data = ( oraș: "Vasyuki", data: "20120318" ); $.get("getForecast.txt", date , succes, "json"); )); funcția succes(forecastData) ( var forecast = forecastData.city + " previziune pentru " + forecastData.date; forecast += ": " + forecastData.forecast + ". Temperatura maxima: " + forecastData.maxTemp + "C"; alert(prognoză); ) )); Obțineți prognoza meteo

Deschideți showForecast.html în browser și faceți clic pe butonul „Obțineți prognoza meteo”. În fereastra de mesaj vom primi prognoza meteo de la serverul nostru.

Iată cum funcționează codul:

  • showForecast.html conține element buton„Obțineți prognoza meteo” cu ID getForecast .
  • JavaScript din partea de sus a paginii este executat de îndată ce pagina este încărcată și DOM-ul este într-o stare gata.
  • Codul JavaScript leagă mai întâi un handler de evenimente clic la butonul #getForecast. Acest manipulator efectuează o solicitare AJAX GET către getForecast.txt, trecând numele orașului și data pentru prognoză. De asemenea, este definită o funcție de apel invers succes(), care va fi executată la finalizarea cererii. Formatul datelor returnate de server este definit ca JSON.
  • Fișierul getForecast.txt returnează în browser datele de prognoză în format JSON.
  • Funcția succes() este apelată. jQuery analizează datele JSON primite de la getForecast.txt, le convertește într-un obiect JavaScript și le transmite funcției.
  • Funcția returnează un obiect de date forecastData și afișează un mesaj care conține mai multe proprietăți ale obiectului, inclusiv numele orașului, prognoza și temperatura.

    • Un exemplu simplu, cu câteva linii, demonstrează cum funcționează o solicitare AJAX folosind metoda $.get().

    AJAX este un acronim care înseamnă Javascript asincron și XML. De fapt, AJAX nu este tehnologie nouă deoarece atât Javascript, cât și XML există de ceva timp perioadă lungă de timp, iar AJAX este o sinteză a tehnologiilor indicate. AJAX este cel mai adesea asociat cu termenul Web 2.0 și este prezentată ca cea mai recentă aplicație Web.

    La folosind AJAX nu este nevoie să reîmprospătați întreaga pagină de fiecare dată, deoarece doar o anumită parte a acesteia este actualizată. Acest lucru este mult mai convenabil, deoarece nu trebuie să așteptați mult și mai economic, deoarece nu toată lumea are internet nelimitat. Adevărat, în acest caz, dezvoltatorul trebuie să se asigure că utilizatorul este conștient de ceea ce se întâmplă pe pagină. Acest lucru poate fi implementat folosind indicatori de încărcare, mesaje text acele date sunt schimbate cu serverul. De asemenea, trebuie să înțelegeți că nu toate browserele acceptă AJAX (versiuni mai vechi de browsere și browsere de text). Plus Javascript poate fi dezactivat de către utilizator. Prin urmare, nu ar trebui să abuzeze de utilizarea tehnologiei și să recurgă la metode alternative prezentarea informatiilor pe site.

    Să rezumăm avantajele AJAX:

    • Abilitatea de a crea o interfață web convenabilă
    • Interacțiune activă cu utilizatorul
    • Ușurință în utilizare
    AJAX folosește două metode de lucru cu o pagină web: schimbarea paginii web fără a o reîncărca și contactarea dinamică a serverului. Al doilea poate fi realizat în mai multe moduri, în special, XMLHttpRequest, despre care vom vorbi și folosind tehnica cadru ascuns.

    Pentru a face schimb de date, pe pagină trebuie creat un obiect XMLHttpRequest, care este un fel de intermediar între Browserul utilizatorului și server (Fig. 1). Folosind XMLHttpRequest, puteți trimite o cerere către server și, de asemenea, puteți primi un răspuns sub formă de diferite tipuri de date.

    Există două moduri de a face schimb de date cu serverul. Prima metodă este o cerere GET. În această solicitare, accesați un document pe server, trecându-i argumente prin adresa URL în sine. În acest caz, pe partea clientului ar fi logic să folosiți funcția de evadare Javascript, astfel încât unele date să nu întrerupă cererea.

    Partea client, scrisă în Javascript, trebuie să ofere funcționalitatea necesară pentru schimbul securizat cu serverul și să ofere metode de schimb de date în oricare dintre modurile de mai sus. Partea server trebuie să prelucreze datele de intrare și, pe baza acestora, să genereze informații noi (de exemplu, lucrând cu o bază de date) și să le trimită înapoi clientului. De exemplu, pentru a solicita informații de la server, puteți utiliza o solicitare GET obișnuită care trece mai mulți parametri mici și pentru a actualiza informații sau adăuga informație nouă Va trebui să utilizați o solicitare POST, deoarece vă permite să transferați cantități mari de date.

    După cum sa menționat deja, AJAX utilizează transferul de date asincron. Aceasta înseamnă că în timp ce datele sunt transferate, utilizatorul poate efectua alte acțiuni necesare. În acest moment, utilizatorul ar trebui să fie anunțat că are loc un fel de schimb de date, altfel utilizatorul va crede că s-a întâmplat ceva greșit și poate părăsi site-ul sau va reapela funcția pe care o consideră „înghețată”. Indicație în timpul schimbului de date aplicatie web 2.0 joacă un rol foarte important: este posibil ca vizitatorii să nu fie încă obișnuiți cu acest mod de actualizare a paginii.

    Răspunsul de la server poate fi nu numai XML, așa cum sugerează numele tehnologiei. Pe lângă XML, puteți primi răspunsul în text simplu sau JSON ( Obiect Javascript Notaţie). Dacă s-a primit un răspuns în text simplu, apoi poate fi afișat imediat într-un container pe pagină. Când se primește un răspuns sub formă de XML, răspunsul primit este de obicei procesat document XML pe partea clientului și conversia datelor în (X)HTML. Când primește un răspuns în format JSON, clientul trebuie doar să execute codul primit (funcția de evaluare a Javascript) pentru a obține un obiect Javascript cu drepturi depline. Dar aici trebuie să fiți atenți și să țineți cont de faptul că codul rău intenționat poate fi transmis folosind această tehnologie, așa că înainte de a executa codul primit de la server, ar trebui să îl verificați și să îl procesați cu atenție. Există o astfel de practică ca o solicitare „inactivă”, în care nu se primește niciun răspuns de la server, doar datele de pe partea serverului sunt modificate.

    ÎN browsere diferite acest obiect are proprietăți diferite, dar în general este același.

    Metode obiect XMLHttpRequest

    Rețineți că numele metodelor sunt scrise în același stil Camel ca și alte funcții Javascript. Aveți grijă când le folosiți.

    anula()- anularea cererii curente către server.

    getAllResponseHeaders()- obțineți toate anteturile de răspuns de la server.

    getResponseHeader ("nume_header")- obțineți antetul specificat.

    deschide ("request_type", "URL", "asynchronous", "username", "parola")- inițializarea unei cereri către server, cu specificarea metodei de solicitare. Tipul cererii și adresa URL sunt parametri obligatorii. Al treilea argument este o valoare booleană. De obicei, adevărat este întotdeauna specificat sau nu este specificat deloc (prestabilit este adevărat). Al patrulea și al cincilea argument sunt folosite pentru autentificare (este foarte nesigur să stocați datele de autentificare într-un script, deoarece scriptul poate fi vizualizat de orice utilizator).

    trimite ("conținut")- trimite Solicitare HTTP la server și primiți un răspuns.

    setRequestHeader ("nume_header", "valoare")- setați valorile antetului cererii.

    Proprietățile obiectului XMLHttpRequest

    onreadystatechange- una dintre cele mai importante proprietăți ale obiectului XMLHttpRequest. Folosind această proprietate, este specificat un handler care este apelat ori de câte ori starea unui obiect se modifică.

    readyState- un număr care indică starea obiectului.

    text de răspuns- reprezentarea răspunsului serverului ca text simplu (șir).

    răspunsXML- un obiect document compatibil DOM primit de la server.

    stare- starea răspunsului de la server.

    statusText- reprezentare text a stării răspunsului de la server.

    Ar trebui să aruncați o privire mai atentă asupra proprietății readyState:

    • 0 - Obiectul nu este inițializat.
    • 1 - Obiectul încarcă date.
    • 2 - Obiectul și-a încărcat datele.
    • 3 - Obiectul nu este încărcat complet, dar poate fi interacționat de către utilizator.
    • 4 - Obiectul este inițializat complet; a fost primit un răspuns de la server.
    Se bazează pe starea de pregătire a obiectului pe care îl puteți oferi vizitatorului informații despre stadiul în care se află procesul de schimb de date cu serverul și, eventual, îl puteți notifica vizual despre acest lucru.Crearea unui obiect XMLHttpRequest.

    După cum am menționat mai sus, crearea acestui obiect pentru fiecare tip de browser este un proces unic.

    De exemplu, pentru a crea un obiect în browsere compatibile cu Gecko, Konqueror și Safari, trebuie să utilizați următoarea expresie:

    Var Request = new XMLHttpRequest();

    Și pentru Internet Explorer se utilizează următoarele:

    Var Request = nou ActiveXObject("Microsoft.XMLHTTP");

    Var Request = nou ActiveXObject("Msxml2.XMLHTTP");

    Acum, pentru a obține compatibilitatea între browsere, trebuie să combinați toate funcțiile într-una singură:

    Funcția CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( // Browsere compatibile cu Gecko, Safari, Konqueror Request = nou XMLHttpRequest(); ) else if (window.ActiveXObject) ( // Internet Explorerîncercați ( Request = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Nu se poate crea XMLHttpRequest"); ) Cerere de returnare; )

    După toate acestea, puteți crea acest obiect și nu vă faceți griji cu privire la performanță browsere populare. Dar puteți crea un obiect în locuri diferite. Dacă îl creați global, atunci o singură cerere către server va fi posibilă la un anumit moment în timp. Puteți crea un obiect de fiecare dată când se face o solicitare către server (acest lucru va rezolva aproape complet problema).

    Solicitare către server

    Algoritmul de solicitare a serverului arată astfel:

    • Verificarea existenței XMLHttpRequest.
    • Inițializarea unei conexiuni la server.
    • Trimiterea unei cereri către server.
    • Prelucrarea datelor primite.
    Pentru a crea o cerere către server, vom crea o mică funcție care va combina în funcționalitate funcțiile pentru cererile GET și POST.

    /* Funcție pentru trimiterea unei cereri către un fișier de pe server r_method - tipul cererii: GET sau POST r_path - calea către fișierul r_args - argumente ca a=1&b=2&c=3... r_handler - funcție care gestionează răspunsul de la server */ function SendRequest(r_method , r_path, r_args, r_handler) ( //Creați o cerere var Request = CreateRequest(); //Verificați existența cererii din nou dacă (!Request) ( return; ) //Atribuiți o cerere personalizată handler Request.onreadystatechange = function() ( // Dacă schimbul de date este finalizat dacă (Request.readyState == 4) ( //Treceți controlul utilizatorului handler r_handler(Request); ) ) //Verificați dacă trebuie să faceți o cerere GET dacă (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Inițializați conexiunea Request.open(r_method, r_path, true); dacă (r_method .toLowerCase() == "post") ( //Dacă aceasta este cerere POST //Setați antetul Request.setRequestHeader ("Content-Type","application/x-www-form-urlencoded; charset=utf-8) "); //Trimite cererea Request.send(r_args); ) else ( //Dacă aceasta este o cerere GET //Trimite o cerere nulă Request.send(null); ) )

    Crearea unei cereri a devenit mult mai ușoară. De exemplu, să scriem o funcție care va primi conținutul unui fișier pe server și să-l scoată într-un container.

    Funcția ReadFile(nume fișier, container) ( //Creează o funcție de gestionare var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Trimite cererea SendRequest("GET",filename," ", Handler); )

    Așa are loc interacțiunea cu serverul.

    Procesarea răspunsului

    În exemplul anterior, am făcut o funcție de solicitare către server. Dar este în esență nesigur, deoarece nu procesăm starea obiectului și starea răspunsului de la server.

    Să adăugăm la codul nostru, astfel încât să poată afișa o notificare vizuală despre procesul de încărcare.

    Request.onreadystatechange = function() ( //Dacă schimbul de date este finalizat dacă (Request.readyState == 4) ( //Trimite controlul către handler-ul utilizatorului r_handler(Request); ) else ( //Notifică utilizatorul despre descărcare )) ...

    După cum știți deja, obiectul XMLHttpRequest vă permite să cunoașteți starea răspunsului de la server. Să profităm de această oportunitate.

    Request.onreadystatechange = function() ( //Dacă schimbul de date este finalizat dacă (Request.readyState == 4) ( dacă (Request.status == 200) ( //Trimite controlul către gestionarea utilizatorului r_handler(Request); ) altfel ( // Notificăm utilizatorul despre eroarea care a apărut) ) else ( //Anuntăm utilizatorul despre descărcare ) ) ...

    Opțiuni de răspuns ale serverului

    Puteți primi mai multe tipuri de date de la server:

    • Text simplu
    Dacă primiți text simplu, atunci îl puteți trimite imediat la container, adică la ieșire. Când primiți date ca XML, trebuie să procesați datele folosind funcțiile DOM și să prezentați rezultatul folosind HTML.

    JSON este notația obiect Javascript. Cu ajutorul lui, puteți reprezenta un obiect ca șir (aici puteți da o analogie cu funcția de serializare). Când primiți date JSON, trebuie să le executați pentru a obține un obiect Javascript complet și pentru a efectua operațiunile necesare asupra acestuia. Vă rugăm să rețineți că astfel de transmisii și execuții de date nu sunt sigure. Trebuie să urmăriți ceea ce urmează să fie executat.

    Exemplu de cod JSON:
    ( „date”: ( „diverse”: [ ( „nume” : „element JSON unu”, „tip” : „Subtitlu 1” ), ( „nume” : „Element JSON doi”, „tip” : „ Subtitlu 2 " ) ] ) )

    Când primiți un astfel de cod, efectuați următoarea acțiune:

    Var responsedata = eval ("(" + Request.responseText + ")")

    După executarea acestui cod, obiectul va fi disponibil pentru dvs date de răspuns.

    Lucrul cu limbaje de programare pe partea de server

    Acest tip de muncă nu este diferit de munca obișnuită. De exemplu, voi lua PHP ca limbaj pe partea serverului. Nimic nu s-a schimbat în partea clientului, dar partea serverului este acum reprezentată de un fișier PHP.

    Prin tradiție, să începem cu salutări către lumea noastră minunată:

    Echo „Bună, lume!”;

    La accesarea acestui fișier, șirul Hello, World va fi returnat clientului. După cum vă puteți imagina, aceasta reprezintă cele mai largi oportunități pentru aplicații de construcție. Transmițând argumente atunci când apelați serverul folosind XMLHttpRequest, puteți parametriza rezultatul, oferind astfel o funcționalitate extinsă aplicației Web.

    În plus față de PHP, puteți utiliza orice alt limbaj de programare pe partea de server.

    Face o cerere către server fără a reîncărca pagina. Aceasta este o metodă de nivel scăzut care are o cantitate mare setări. Acesta stă la baza funcționării tuturor celorlalte metode ajax. Are două opțiuni de utilizare:

    url — adresa de solicitare.
    setări - în acest parametru puteți specifica setările pentru a acestei cereri. Specificat folosind un obiect în format (nume:valoare, nume:valoare...) . Niciuna dintre setări nu este necesară. Puteți seta setările implicite folosind metoda $.ajaxSetup().

    Lista setărilor

    ↓ nume :tip (valoare implicită)

    Când se face o solicitare, antetele indică tipurile de conținut permise așteptate de la server. Valorile acestor tipuri vor fi preluate din parametrul accepts.

    În mod implicit, toate solicitările fără o reîncărcare a paginii apar asincron (adică după trimiterea unei cereri către server, pagina nu încetează să funcționeze în timp ce se așteaptă un răspuns). Dacă trebuie să executați cererea sincron, setați parametrul la false . Solicitările între domenii și „jsonp” nu pot fi executate în modul sincron.

    Rețineți că executarea solicitărilor în modul sincron poate duce la blocarea paginii până la finalizarea completă a cererii.

    Acest câmp conține o funcție care va fi apelată imediat înainte de a trimite o solicitare ajax către server. O astfel de funcție poate fi utilă pentru modificarea unui obiect jqXHR (în versiuni anterioare biblioteci (până la 1,5), XMLHttpRequest este folosit în loc de jqXHR). De exemplu, puteți modifica/specifica anteturile necesare etc. Obiectul jqXHR va fi transmis funcției ca prim argument. Al doilea argument este setările cererii.

    În acest câmp puteți specifica antete de solicitare suplimentare. Aceste modificări vor fi introduse înainte de apelarea Send, unde pot fi făcute editările finale ale antetului.

    Când această setare este setată la true , cererea va fi executată cu starea „reușită” numai dacă răspunsul de la server diferă de răspunsul anterior. jQuery verifică acest fapt uitându-se la antetul Last-Modified. Deoarece jQuery-1.4, pe lângă Last-Modified, se bifează și „etag” (ambele sunt furnizate de server și sunt necesare pentru a anunța browserul că datele solicitate de la server nu au fost modificate față de solicitarea anterioară) .

    Vă permite să setați starea sursă a unei pagini la local (ca și cum ar fi peste protocolul fișierului), chiar dacă jQuery a recunoscut-o altfel. Biblioteca decide că pagina rulează local în cazul următoarelor protocoale: fișier, *-extensie și widget.

    Se recomandă setarea valorii parametrului esteLocal global - folosind funcția $.ajaxSetup(), și nu în setările cererilor individuale ajax.

    Definește numele parametrului care este adăugat la adresa URL în timpul unei solicitări jsonp (în mod implicit, se folosește „callback” - „http://siteName.ru?callback=...”).

    Începând cu jQuery-1.5, setarea acestui parametru la false va împiedica adăugarea lui la adresa URL parametru suplimentar. În acest caz, trebuie să setați în mod explicit valoarea proprietății jsonpCallback. De exemplu: (jsonp:false, jsonpCallback:"callbackName") .

    Definește numele funcției care va fi apelată atunci când serverul răspunde la o solicitare jsonp. În mod implicit, jQuery generează un nume personalizat pentru această funcție, care este mai mult varianta preferata, simplificând munca bibliotecii. Unul dintre motivele pentru a specifica propria funcție de procesare a cererilor jsonp este îmbunătățirea stocării în cache a cererilor GET.

    Începând cu jQuery-1.5, puteți specifica o funcție în acest parametru pentru a gestiona singur răspunsul serverului. În acest caz, funcția specificată trebuie să returneze datele primite de la server (în functie specificata vor fi disponibile în primul parametru).

    În mod implicit, toate datele transmise către server sunt pre-convertite într-un șir (format URL: fName1=value1&fName2=value2&...) corespunzător „application/x-www-form-urlencoded”. Dacă trebuie să trimiteți date care nu pot fi supuse unei astfel de prelucrări (de exemplu, un document DOM), atunci ar trebui să dezactivați opțiunea processData.

    Acest parametru este utilizat pentru cererile ajax pe mai multe domenii de tip GET, dataType poate fi fie „jsonp”, fie „script”. Definește codarea în care va fi executată cererea pe mai multe domenii. Acest lucru este necesar dacă un server de pe un domeniu străin folosește o codificare care este diferită de codificarea de pe serverul domeniului său nativ.

    (Această setare a fost introdusă în jQuery-1.5) un set de perechi în care codurile de execuție a cererii sunt asociate cu funcții care vor fi apelate. De exemplu, pentru codul 404 (paginile nu există), puteți afișa un mesaj pe ecran:

    $.ajax (( statusCode: ( 404: function () ( alert ( "Pagina nu a fost gasita" ) ; ) ) ) );

    Funcțiile care răspund la codurile de succes ale cererii vor primi aceleași argumente ca și funcțiile de gestionare a cererilor de succes (specificate în parametrul de succes), iar funcțiile care răspund la codurile de eroare vor fi aceleași cu cele ale funcțiilor de eroare.

    O funcție care va fi apelată dacă cererea către server se finalizează cu succes. I se vor trece trei parametri: date trimise de server și deja preprocesate (ceea ce este diferit pentru diferite tipuri de date). Al doilea parametru este un șir cu starea de execuție. Al treilea parametru conține obiectul jqXHR (în versiunile anterioare ale bibliotecii (până la 1.5), XMLHttpRequest este folosit în loc de jqXHR). Începând cu jQuery-1.5, în loc de o singură funcție, acest parametru poate accepta o serie de funcții.

    Timp de așteptare pentru un răspuns de la server. Setați în milisecunde. Dacă acest timp este depășit, cererea va fi finalizată cu o eroare și va apărea un eveniment de eroare (vezi descrierea de mai sus), care va avea starea „timeout”.

    Timpul este numărat din momentul apelării funcției $.ajax. Se poate întâmpla ca mai multe alte solicitări să ruleze în acest moment și browserul să întârzie executarea solicitării curente. În acest caz pauză poate finaliza, deși, de fapt, cererea nici măcar nu a fost începută încă.

    În jQuery-1.4 și versiuni anterioare, când obiectul XMLHttpRequest expiră, acesta va intra într-o stare de eroare și accesarea câmpurilor sale poate provoca o excepție. În Firefox 3.0+, solicitările de script și JSONP nu vor fi anulate dacă expiră. Acestea vor fi finalizate chiar și după expirarea acestui timp.

    O funcție care va furniza un obiect XMLHttpRequest. În mod implicit, pentru browserele IE acest obiect este ActiveXObject, iar în alte cazuri este XMLHttpRequest. Cu această opțiune puteți implementa propria versiune acest obiect.

    (Această setare a fost introdusă în jQuery-1.5.1) Un set de perechi (nume:valoare) pentru modificarea/adăugarea valorilor câmpurilor corespunzătoare ale obiectului XMLHttpRequest. De exemplu, puteți seta proprietatea withCredentials la true atunci când executați o solicitare pe mai multe domenii:

    $.ajax (( url: a_cross_domain_url, xhrFields: ( cuCredentials: true ) ) ) ;

    În jQuery-1.5, proprietatea withCredentials nu este acceptată de XMLHttpRequest nativ și va fi ignorată într-o solicitare între domenii. In toate versiunile următoare biblioteci, acest lucru a fost rezolvat.

    Manipulatori de evenimente

    Setările beforeSend, error, dataFilter, succes și complete (descrierea lor este în secțiunea anterioară) vă permit să setați handlere de evenimente care apar în anumite momente în execuția fiecărei solicitări ajax.

    înainte de a trimite are loc imediat înainte ca cererea să fie trimisă la server. eroare apare atunci când cererea eșuează. dataFilter apare atunci când datele sosesc de la server. Vă permite să procesați datele „brute” trimise de server. succes apare atunci când cererea este finalizată cu succes. complet apare ori de câte ori o cerere este finalizată.

    Exemplu ușor de folosit. Vom afișa un mesaj când solicitarea este finalizată cu succes:

    $.ajax (( url: "ajax/test.html" , succes: function () ( alert ("Încărcarea a fost efectuată." ) ; ) ) );

    Începând cu jQuery-1.5, metoda $.ajax() returnează un obiect jqXHR care, printre altele, implementează interfața amânată, care vă permite să specificați handlere de execuție suplimentare. În plus față de standardul metodelor .done(), .fail() și .then() pentru obiectul amânat, cu care puteți instala handlere, jqXHR implementează .success(), .error() și .complete() . Acest lucru se face pentru a respecta denumirile obișnuite ale metodelor prin care sunt instalați handlere pentru executarea cererilor ajax. Cu toate acestea, începând cu jQuery-1.8, aceste trei metode vor deveni depreciate.

    Unele tipuri de solicitări, cum ar fi cererile jsonp sau GET între domenii, nu acceptă utilizarea obiectelor XMLHttpRequest. În acest caz, XMLHttpRequest și textStatus transmise manevrelor vor conține valoarea undefined .

    În interiorul handlerelor, această variabilă va conține valoarea parametrului context. În cazul în care nu a fost setat, acesta va conține obiectul setări.

    parametru dataType

    Funcția $.ajax() învață despre tipul de date trimise de server de la serverul însuși (prin MIME). În plus, există posibilitatea de a indica (clarifica) personal modul în care aceste date trebuie interpretate. Acest lucru se face folosind parametrul dataType. Valori posibile pentru acest parametru:

    "xml"— documentul xml rezultat va fi disponibil sub formă de text. Poți lucra cu el mijloace standard jQuery (la fel ca și în cazul unui document html). "html"— HTML-ul rezultat va fi disponibil sub formă de text. Dacă conține scripturi în etichete, atunci acestea vor fi executate automat doar atunci când textul html este plasat în DOM. "scriptie"— datele primite vor fi executate ca javascript. Variabilele care conțin de obicei răspunsul de la server vor conține un obiect jqXHR. „json”, „jsonp”— datele primite vor fi pre-convertite într-un obiect javascript. Dacă analizarea eșuează (ceea ce se poate întâmpla dacă json conține erori), atunci va fi aruncată o excepție de eroare de analizare a fișierului. Dacă serverul pe care îl accesați se află pe un alt domeniu, atunci ar trebui folosit jsonp în loc de json. Puteți afla despre json și jsonp pe Wikipedia. "text"— datele primite vor fi disponibile în text simplu, fără prelucrare prealabilă.

    Nota 1: Când o solicitare este trimisă către un domeniu terță parte (ceea ce este posibil numai cu dataType egal cu jsonp sau script), gestionatorii de erori și evenimentele globale nu se vor declanșa.

    Nota 2: Tipul de date specificat în dataType nu trebuie să intre în conflict cu informațiile MIME furnizate de server. De exemplu, datele xml trebuie să fie reprezentate de server ca text/xml sau application/xml . Dacă acest lucru eșuează, jquery va încerca să convertească datele primite la tipul specificat (mai multe despre asta în secțiunea Convertitori).

    Trimiterea datelor către server

    În mod implicit, o solicitare către server este făcută folosind metoda HTTP GET. Dacă trebuie să faceți o solicitare folosind metoda POST, trebuie să specificați valoarea corespunzătoare în setarea tip. Datele trimise prin metoda POST vor fi convertite în UTF-8 dacă sunt într-o codificare diferită, așa cum este cerut de standardul W3C XMLHTTPRequest.

    Parametrul de date poate fi specificat fie ca șir în formatul cheie1=valoare1&cheie2=valoare2 (formatul de transfer de date în url), fie ca obiect cu un set de perechi (nume:valoare) - (cheie1: „valoare1”, cheie2: „valoare2”). În acest din urmă caz, înainte de a trimite datele, jQuery face conversie obiect dat la un șir folosind $.param() . Cu toate acestea, această conversie poate fi inversată setând setarea processData la false . Conversia într-un șir este nedorită, de exemplu, în cazul trimiterii unui obiect xml către server. În acest caz, este recomandabil să schimbați setarea contentType de la application/x-www-form-urlencoded la un tip mimic mai potrivit.

    Cometariu: Majoritatea browserelor nu permit solicitări Ajax pentru resurse cu alte domenii, subdomenii și protocoale decât cel actual. Cu toate acestea, această limitare nu se aplică solicitărilor jsonp și script-urilor.

    Primirea datelor de la server

    Datele primite de la server pot fi furnizate ca șir sau obiect, în funcție de valoarea parametrului dataType (vezi dataType mai sus). Aceste date sunt întotdeauna disponibile în primul parametru al handler-ului de execuție a cererii ajax:

    $.ajax (( url: "some.php" , succes: function (data) ( alert ( "Profit data: " + data ) ; ) ) ) ;

    Pentru tipurile text și xml, datele trimise de server vor fi disponibile și în jqXHR, și anume în câmpurile sale responseText sau, respectiv, responseXML.

    Setari avansate

    Folosind parametrul global, puteți dezactiva execuția handlerelor de evenimente (.ajaxSend(), .ajaxError(), etc.) pentru cereri individuale. Acest lucru poate fi util, de exemplu, dacă încărcarea animației este pornită/oprită în aceste handlere. Apoi, dacă unele solicitări sunt executate foarte des și rapid, atunci le va fi util să dezactiveze execuția handlerelor. Pentru cererile de scripturi și jsonp pe mai multe domenii, parametrul global este dezactivat automat.

    Dacă datele de autentificare (login/parolă) sunt necesare pentru a face o solicitare către server, atunci le puteți specifica în setările de nume de utilizator și parolă ale cererii ajax.

    Este alocat o anumită perioadă de timp pentru a finaliza o solicitare către server. Dacă serverul nu trimite un răspuns în acest timp, cererea se încheie cu o eroare (starea „timeout”). Timpul de așteptare pentru un răspuns de la server poate fi modificat prin setarea valorii necesare (în milisecunde) în setarea timeout.

    Se poate întâmpla ca codificarea gazdei să fie diferită de codificarea cerută în cererea ajax fișier javascript. În astfel de cazuri, este necesar să specificați codificarea acestuia din urmă în setarea scriptCharset.

    În cele mai multe cazuri, cererea Ajax are loc asincron, dar în unele cazuri poate fi necesară executarea secvenţială a cererii (când execuţia ulterioară a scriptului este imposibilă fără a primi un răspuns de la server). Puteți face cererea sincronă dacă dezactivați setarea asincronă. Cu toate acestea, merită să ne amintim că în acest caz pagina se va îngheța în așteptarea unui răspuns de la server.

    Exemple de utilizare

    Cel mai varianta simpla use va apela $.ajax() fără a specifica parametrii:

    $.ajax(); // o cerere GET va fi trimisă către server la adresa URL a paginii curente fără a specifica niciun parametru.

    Dacă trebuie să încărcați și să executați un fișier js, o puteți face astfel:

    $.ajax (( tip: "GET" , url: "test.js" , dataType: "script" ) ) );

    Să facem o cerere POST către server, specificând doi parametri și notificând utilizatorul despre cererea finalizată cu succes:

    $.ajax (( tip: „POST” , url: „some.php” , date: „name=John&location=Boston” , succes: funcție (msg) ( alertă ( „Date sosite: „ + msg ) ; ) ) ) ;

    Să actualizăm conținutul paginii html dorite:

    $.ajax (( url: "test.html" , cache: false , succes: function (html) ( $("#results" ) .append (html) ; ) ) );

    Să facem o cerere sincronă către server. În timp ce solicitarea este executată, pagina nu va răspunde la acțiunile utilizatorului:

    // scrie datele trimise de pe server la variabila html var html = $.ajax (( url: "some.php" , async: false ) ) .responseText ;

    Ca parametru, vom trimite un obiect xml la server. Pentru a o transmite corect, trebuie să anulați conversia preliminară a parametrilor (processData:false). În calitate de handler pentru finalizarea cu succes a unei cereri, vom specifica funcție personalizată handleRăspuns:

    var xmlDocument = [creează document xml] ; $.ajax (( url: "page.php" , processData: false , date: xmlDocument, succes: handleResponse ) );

    Abordare avansată

    Începând cu jQuery-1.5, există trei direcții noi care vă permit să utilizați $.ajax() și mai profund. Primul dintre ele (Prefiltre) vă permite să efectuați manipulări suplimentare imediat înainte de a trimite cererea. Cu a doua abordare (Convertitoare), puteți spune jQuery cum să convertească datele primite de la server dacă nu se potrivesc cu formatul așteptat. A treia abordare (Transporturi) este cel mai de jos nivel; vă permite să organizați independent o solicitare către server.

    Prefiltre

    Această abordare constă în configurarea unui handler care este apelat înainte ca fiecare solicitare ajax să fie făcută. Acest handler precede execuția oricăror altor handler ajax. Este instalat folosind funcția $.ajaxPrefilter():

    $.ajaxPrefilter (funcție (opțiuni, originalOptions, jqXHR) ( ) ) ;

    Unde
    Opțiuni— setările cererii curente,
    originalOptions- setări implicite,
    jqXHR— jqXHR obiect al acestei cereri.

    Este convenabil să procesați în Prefiltre setari personalizate(adică setări noi necunoscute bibliotecii specificate în cerere). De exemplu, puteți intra configurație proprie abortOnRetry , când este activată, solicitările nefinalizate vor fi resetate dacă următoarea solicitare este primită la aceeași adresă URL:

    var currentRequests = ( ); $.ajaxPrefilter (funcție (opțiuni, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ; ) ) ) ;

    Este convenabil să procesezi și setările existente. De exemplu, acesta este modul în care puteți schimba o solicitare între domenii cu una redirecționată prin serverul dvs. de domeniu:

    $.ajaxPrefilter (funcție (opțiuni) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; ) ) ;

    În plus, puteți specifica valorile DataType pe care va funcționa prefiltrul. Deci, de exemplu, puteți specifica tipurile de json și script:

    $.ajaxPrefilter ( „scriptul json” , funcția (opțiuni, originalOptions, jqXHR) ( // Schimbați opțiunile, verificați setări de bază(originalOptions) și obiect jqXHR) );

    În cele din urmă, puteți modifica valoarea dataType pentru a returna valoarea dorită:

    $.ajaxPrefilter (funcție (opțiuni) ( // schimbă dataType în script dacă url-ul îndeplinește anumite condiții dacă (isActuallyScript(options.url) ) ( return „script” ; ) ) ;

    Această abordare garantează nu numai că cererea își va schimba tipul în script, ci și că vor fi executați și alți handlere de prefiltre care specifică acest tip în primul parametru.

    Convertoare

    Acest principiu constă în instalarea unui handler care va funcționa dacă dataType specificat în setări nu se potrivește cu tipul de date trimis de server.

    Converters este o setare ajax, deci poate fi setată global:

    // în acest fel puteți seta un handler care va funcționa dacă, în loc de // tipul mydatatype pe care l-ați specificat în dataType, sunt primite date de tip text $.ajaxSetup (( convertori: ( "text mydatatype" : function ( textValue )) ( if (valid( textValue ) ) ( // procesarea textului transmis returnează mydatatypeValue; ) else ( // dacă datele trimise de server nu corespund cu ceea ce este așteptat, // puteți arunca o excepție. throw exceptionObject; ) ) ) ) ;

    Convertoarele vă vor ajuta atunci când vă introduceți propriul tip de date (personalizat). Este important de reținut că numele unui astfel de tip de date ar trebui să fie utilizat numai literă mică! O solicitare pentru tipul de date „mydatatype” menționat mai sus ar putea arăta astfel:

    $.ajax (url, (dataType: "mydatatype" ) );

    O lecție în care ne vom uita la crearea unor cereri AJAX asincrone simple către server folosind exemple. Vom folosi atât metodele GET, cât și POST ca metodă de transmitere a cererii. Pe server, vom procesa cereri folosind scripturi PHP.

    Ce este o solicitare AJAX asincronă?

    Tehnologia AJAX este folosită în principal pentru a crea cereri asincrone către server. O solicitare asincronă este una care rulează în fundal și nu interferează cu interacțiunea utilizatorului cu pagina.

    La trimiterea unei cereri asincrone, browserul (pagina) nu se „îngheață”, adică. poți lucra cu el ca înainte. Dar atunci de unde știi când sosește răspunsul de la server? Pentru a determina acest lucru, trebuie să monitorizați proprietatea readyState a browserului. Această proprietate conține un număr a cărui valoare poate fi utilizată pentru a determina în ce stadiu se află cererea. Următorul tabel prezintă principalele valori ale proprietății readyState și stările lor corespunzătoare.

    Acestea. Se pare că trebuie să urmărim când valoarea proprietății readyState este egală cu 4. Aceasta va însemna că cererea trimisă a primit un răspuns de la server. Valorile rămase sunt folosite destul de rar în practică și este posibil ca unele browsere să nu le accepte.

    Pentru a determina în ce stadiu se află cererea, trebuie să utilizați evenimentul onreadystatechange al obiectului XMLHttpRequest. Acest eveniment are loc de fiecare dată când valoarea proprietății readyState se modifică. Prin urmare, în handlerul acestui eveniment (funcție fără nume sau cu nume), puteți scrie acțiuni care vor verifica dacă această proprietate este egală cu 4 și dacă este egală, apoi, de exemplu, afișați răspunsul serverului pe pagină.

    Crearea unei cereri AJAX asincrone (metoda GET)

    Să ne uităm la crearea unei cereri AJAX asincrone folosind un exemplu, care va saluta utilizatorul după încărcarea paginii și va afișa adresa lui IP.

    Pentru a face acest lucru, trebuie să creați 2 fișiere pe server într-un singur director:

  • welcome.html – pagină HTML care va fi afișată utilizatorului. Pe aceeași pagină vom plasa un script care va efectua toate acțiunile necesare pentru ca AJAX să funcționeze pe partea clientului.
  • processing.php – fișier PHP care va procesa cererea din partea serverului și va genera un răspuns. Să începem dezvoltarea prin crearea structurii de bază a fișierului welcome.html
    • Exemplu de lucru AJAX Exemplu de lucru AJAX // Aici vom plasa codul JavaScript care va trimite o cerere către server, o va primi și actualiza conținutul paginii. Toate acestea vor funcționa fără a reîncărca pagina

    Să ne uităm la secvența de acțiuni care trebuie efectuate pe partea clientului (în codul JavaScript):

    Să pregătim datele necesare executării cererii pe server. Dacă nu sunt necesare date pentru a finaliza solicitarea pe server, atunci această etapă poți sări peste el.

    Să creăm o variabilă care va conține o instanță a obiectului XHR (XMLHttpRequest).

    Să configuram cererea folosind metoda open().

    Sunt specificați următorii parametri:

    • Metoda prin care cererea va fi trimisă către server (GET, POST).
    • Adresa URL care va procesa cererea pe server.
    • Tip cerere: sincron (fals) sau asincron (adevărat).
    • Nume de utilizator și parolă, dacă este necesar.

  • Să ne abonam la evenimentul onreadystatechange al obiectului XHR și să specificăm handlerul ca funcție anonimă sau numită. După aceea, vom crea cod în interiorul acestei funcții care va verifica starea răspunsului și va executa anumite actiuni Pe pagina. Răspunsul care vine de la server este întotdeauna în proprietatea responseText.

    Pe lângă verificarea valorii proprietății readyState numărul 4, puteți verifica și valoarea proprietății status. Această proprietate determină starea cererii. Dacă este egal cu 200, atunci totul este în regulă. În caz contrar, a apărut o eroare (de exemplu, 404 - URL nu a fost găsit).

    Să trimitem o cerere către server folosind metoda send().

    Dacă folosim metoda GET pentru a trimite o solicitare, atunci transmitem datele parametrului aceasta metoda Nu este nevoie. Sunt trimise ca parte a URL-ului.

    Dacă folosim metoda POST pentru a trimite o solicitare, atunci datele trebuie să fie transmise ca parametru la metoda send(). În plus, înainte de a apela această metodă, trebuie să setați antetul Content-Type, astfel încât serverul să știe în ce codificare a venit cererea și să o poată decripta.

    Conținutul elementului de script:

    // 2. Crearea variabilei de cerere var request = new XMLHttpRequest(); // 3. Configurarea cererii request.open("GET","processing.php",true); // 4. Abonați-vă la evenimentul onreadystatechange și procesați-l folosind funcția anonimă request.addEventListener("readystatechange", function() ( // dacă stările cererii sunt 4 și starea solicitării este 200 (OK) dacă ((request. readyState==4) && (request.status==200)) ( // de exemplu, scoate un obiect XHR în consola browser console.log(request); // și răspunsul (text) care a venit de la server la fereastra de alertă console.log(request.responseText); // obține un element cu id = welcome var welcome = document.getElementById("welcome"); // înlocuiți conținutul elementului cu răspunsul care a venit de la server welcome.innerHTML = request.responseText; ) )); // 5. Trimiterea unei cereri către server request.send();

    Ca rezultat, fișierul welcome.html va avea următorul cod:

    Exemplu de funcționare AJAX Exemplu de funcționare AJAX window.addEventListener("load",function() (var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener(" readystatechange" , function() ( if ((request.readyState==4) && (request.status==200)) ( var welcome = document.getElementById("binevenit"); welcome.innerHTML = request.responseText; ) ) ); cerere trimisă(); ));

    Pe server (folosind php):

  • Să luăm datele. Dacă datele sunt trimise prin metoda GET, atunci din tabloul global $_GET["nume"] . Și dacă datele sunt transferate folosind metoda POST, atunci din matricea globală $_POST["nume"] .
  • Folosind aceste date, vom efectua câteva acțiuni pe server. Drept urmare, primim un răspuns. Să-l afișăm folosind echo .