JavaScript - Solicitare AJAX sincronă (XMLHttpRequest). Un exemplu simplu de utilizare a PHP și AJAX
JQuery este o bibliotecă javascript al cărei scop este „a scrie mai puțin, a face mai mult”. jQuery este ușor de conectat la site-ul dvs. și de a începe să îl utilizați. jQuery face mult mai ușor să utilizați javascript pe site-ul dvs.
jQuery elimină o mulțime de linii de cod javascript și vă permite să implementați toată această mulțime de linii cu o singură metodă.
Ce este AJAX?AJAX este asincron (adică browserul poate face tot ce dorește după trimiterea unei cereri, cum ar fi afișarea unui mesaj în așteptarea unui răspuns, derularea paginii etc.) JavaScript și XML. Este folosit pentru a crea pagini web dinamice și rapide. AJAX ne permite să actualizăm o parte a unei pagini web fără a reîncărca întreaga pagină.
Dar jQuery și AJAX?Combinația de jQuery și AJAX oferă o funcționalitate puternică. Cu jquery și ajax, puteți face o solicitare și puteți primi informații într-o varietate de formate, inclusiv XML, HTML și chiar text simplu. Puteți utiliza formatul JSON pentru a face schimb de date. Putem folosi datele primite prin cererea ajax în pagina noastră html.
jQuery face ca browserul existent Ajax API mai puternic și mai ușor de utilizat. Efectuarea apelurilor ajax în modul normal folosind javascript este puțin complicată: deoarece trebuie să luați în considerare că diferite browsere necesită abordări diferite pentru a crea obiectul XMLHttpRequest. În plus, trimiterea datelor, de exemplu din formulare, devine mai dificilă dacă utilizați javascript obișnuit pentru apelul ajax.
jQuery oferă o funcționalitate simplă și puternică care extinde metodele AJAX ale javascript și oferă o abordare mai flexibilă.
În acest scurt articol vă voi arăta cum să utilizați jQuery și AJAX într-o formă simplă php. Să începem... Pentru a folosi jQuery și AJAX vom avea nevoie de două fișiere, primul fișier va conține codul html/php prin care se va face cererea ajax. În al doilea fișier vom procesa cererea ajax și vom returna rezultatul pe prima pagină.
Pasul 1: Creați un fișier school.php și inserați următorul cod în el:În codul de mai sus primim numele și numărul studentului și folosind jquery și ajax le trimitem la detalii.php.
function getdetails())( var nume = $("#nume").val(); var rno = $("#rno").val(); $.ajax(( tip: "POST", url: " detalii .php", date: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" Adresa rolului nr " +rno +" este "+rezultat ) ; ));
| Numele dumneavoastră: | ||
| Numărul rolului: | ||
În codul de mai sus, obținem adresa studentului folosind numărul de ordine și numele acestuia.
Pentru acest exemplu, va trebui să creați o bază de date a școlii și un tabel pentru studenți. Tabelul student conține câmpuri cu nume, numere de ordine și adrese.
Sper că veți găsi acest articol de ajutor.
jQuery.ajax() - face o cerere către server fără a reîncărca pagina. Aceasta este o metodă de nivel scăzut, cu multe setări. Stă la baza funcționării tuturor ajax, care este adesea mai ușor de înțeles și utilizat, dar oferă încă o funcționalitate limitată în comparație cu această metodă.
$.ajax() returnează un obiect XMLHttpRequest. În cele mai multe cazuri, nu va trebui să lucrați direct cu acest obiect, dar este încă disponibil în cazul în care trebuie să anulați manual cererea.
Funcției $.ajax() i se transmite un obiect format din perechi cheie/valoare care sunt folosite pentru a inițializa și gestiona cererea.
O solicitare Ajax are două utilizări:
jQuery.ajax(url [, setări ])
Singura diferență față de versiunea anterioară a metodei este că proprietatea URL de aici face parte din setări și nu este un parametru separat.
Lista setărilorTip: obiect.
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. De exemplu, următorul exemplu specifică tipurile personalizate valide:
$.ajax(( acceptă: ( mycustomtype: "application/x-some-custom-type"), convertoare: ( "text mycustomtype": function(result) ( return newresult; ) ), dataType: "mycustomtype" ));
$. ajax (( acceptă: ( mycustomtype : „aplicație/x-some-custom-type” convertoare: ( „text mycustomtype” : funcție (rezultat) ( returnează un nou rezultat; dataType: „mycustomtype” } ) ; |
Tip: boolean.
În mod implicit, toate cererile sunt trimise 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ă trimiteți cereri sincron, setați această opțiune la false. Solicitările între domenii și jsonp nu pot fi executate sincron. Vă rugăm să rețineți că solicitările sincrone pot bloca browserul în timp ce cererea rulează.
Tip: funcție.
Conține o funcție care va fi apelată imediat înainte de a trimite o solicitare ajax către server. Această funcție poate fi utilă pentru modificarea obiectului jqXHR (în versiunile anterioare ale bibliotecii (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.
beforeSend se referă la evenimente ajax. Prin urmare, dacă funcția specificată în ea returnează false, cererea ajax va fi anulată Începând cu jQuery-1.5, beforeSend este apelată indiferent de tipul cererii.
Tip: boolean.
dacă doriți ca browserul să nu memoreze în cache cererea care se face, atunci setați acest parametru la false. Vă rugăm să rețineți că, dacă parametrul este setat la false, atunci linia „_=" va fi adăugată la adresa URL.
Tip: funcție.
O funcție care este executată de fiecare dată când se finalizează o solicitare AJAX (după finalizarea succesului și a erorii). Doi parametri sunt trecuți funcției: jqXHR (în versiunile anterioare ale bibliotecii (până la 1.5), XMLHttpRequest este folosit în loc de jqXHR) și starea de execuție a cererii (valoarea șirului: „succes”, „notmodified”, „error”, „timeout”, „abort” sau „parsererror”).
Începând cu jQuery-1.5, puteți trece o serie de funcții la parametrul complet, mai degrabă decât la o singură funcție. Toate funcțiile vor fi apelate în ordinea în care sunt specificate în această matrice.
Tip: obiect.
Parametrul a apărut în jQuery-1.5 Este specificat de un obiect în format (șir:expresie regulată) și determină modul în care jQuery va analiza răspunsul de la server, în funcție de tipul acestuia.
Tip: boolean sau șir.
La trimiterea unei cereri către server, datele sunt transmise în formatul specificat în contentType. Valoarea implicită este „application/x-www-form-urlencoded; charset=UTF-8’, care este potrivit în majoritatea cazurilor. Dacă specificați acest parametru în mod explicit, acesta va fi trimis către server (chiar dacă nu au fost trimise date acolo).
Cu jQuery-1.6 puteți trece false pentru a nu seta titlul.
Tip: obiect.
Obiectul care va deveni context după finalizarea cererii (valoarea transmisă acestei variabile). De exemplu, dacă specificați un element DOM ca context, atunci toți gestionanții de solicitare ajax vor fi, de asemenea, executați în contextul acestui element DOM. În acest exemplu, cuvântul cheie this va conține document.body:
$.ajax(( url: "test.html", context: document.body )).done(function() ( $(this).addClass("terminat"); ));
$. ajax (( url: "test.html" , context: document. corp ) ) . terminat(funcție()( $(acesta). addClass(„terminat”); } ) ; |
Tip: obiect.
Parametrul apărut în jQuery-1.5 Determină ce funcții vor fi folosite pentru a converti valorile de la un tip la altul.
Tip: boolean.
Această opțiune a fost introdusă în jQuery-1.5 Dacă doriți să efectuați o solicitare între domenii (de exemplu, JSONP) pe același domeniu, setați setarea crossDomain la true. Acest lucru permite, de exemplu, să se facă redirecționări de server către un alt domeniu.
Tip: obiect, șir sau matrice.
Date care vor fi transferate pe server. Dacă datele nu sunt un șir, acestea sunt convertite într-un șir de interogare. Pentru solicitările GET, datele sunt atașate la adresa URL. Un obiect trebuie să fie format din perechi cheie/valoare. Dacă valoarea este o matrice, atunci jQuery ordonează valorile în funcție de setarea tradițională. În mod implicit, de exemplu, (foo:["bar1", "bar2"]) devine &foo=bar1&foo=bar2 .
Tip: funcție.
O funcție care va preprocesa datele trimise de server, de ex. ar trebui să acționeze ca un filtru și să returneze șirul curățat. Doi parametri sunt trecuți acestei funcție: datele menționate și valoarea parametrului dataType. Funcția specificată în dataFilter trebuie să returneze date procesate.
Tip: sfoară.
Tipul de date în care este așteptat răspunsul de la server. Dacă nu este setat, jQuery va încerca să o determine automat folosind MIME-ul primit de la server.
Tip: funcție
O funcție care va fi apelată dacă o solicitare către server eșuează. Este prevăzut cu trei parametri: jqXHR (până se folosește 1.5 XMLHttpRequest), un șir de caractere care descrie eroarea care a apărut, precum și un obiect excepție dacă aceasta a avut loc. Valorile posibile pentru al doilea argument sunt „timeout”, „error”, „notmodified” și „parsererror” (în cazuri neașteptate, poate fi returnat null). Începând cu jQuery-1.5, acest parametru poate accepta fie o singură funcție, fie o matrice de funcții.
Evenimentul de eroare nu apare atunci când dataType este egal cu script sau JSONP.
Tip: boolean.
Responsabil pentru operarea evenimentelor globale de solicitare ajax (de exemplu, ajaxStart sau ajaxStop). Dacă setați acest parametru la false , evenimentele globale pentru această solicitare nu vor fi declanșate.
Tip: obiect.
Parametrul a apărut în jQuery-1.5 Aici puteți specifica antete de solicitare suplimentare. Valorile pentru această setare vor fi introduse înainte de apelarea funcției beforeSend, unde se pot face modificări finale ale antetelor.
Tip: boolean.
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ă) .
Tip: boolean.
Această opțiune a fost introdusă în jQuery-1.5.1 Vă permite să setați starea sursei unei pagini la local (ca și cum ar fi fost 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 globală a valorii parametrului isLocal - folosind funcția $.ajaxSetup(), și nu. în setările solicitărilor individuale ajax.
Tip: șir sau boolean.
Definește numele parametrului care este adăugat la adresa URL a solicitării JSONP (în mod implicit, se folosește „callback”). De exemplu, setarea (jsonp:"onJSONPLoad") este convertită în partea URL a șirului "onJSONPLoad=?" . Începând cu versiunea 1.5, specificarea false în acest parametru împiedică adăugarea unui parametru suplimentar la adresa URL. În acest caz, trebuie să setați valoarea setării jsonpCallback. De exemplu: (jsonp:false, jsonpCallback:"callbackName") .
Tip: șir sau funcție.
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 o opțiune preferabilă care simplifică 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 funcția specificată va fi disponibilă în primul parametru).
Tip: sfoară.
Parametrul apărut în jQuery-1.9.0 Vă permite să specificați tipul de solicitare către server ("POST", "GET", "PUT")
Tip: sfoară.
Parametrul a apărut în jQuery-1.5.1 În acest câmp puteți specifica tipul de date în care este așteptat răspunsul de la server în loc de XHR
Tip: sfoară.
Parola pentru autentificare pe server, dacă este necesar.
Tip: boolean.
În mod implicit, datele transferate către server sunt convertite dintr-un obiect într-un șir de interogare (format URL: fName1=value1&fName2=value2&...) și trimise ca „application/x-www-form-urlencoded” . Dacă trebuie să trimiteți un document DOM sau alte date care nu pot fi convertite, setați opțiunea processData la false .
Tip: sfoară.
Se aplică numai solicitărilor Ajax GET, dataType poate fi fie „jsonp”, fie „script”. Dacă un server de pe un domeniu terță parte utilizează o codificare diferită de a dvs., trebuie să specificați codificarea serverului terță parte.
Tip: obiect.
Parametrul a apărut în jQuery-1.5.0 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"); ) ) ));
$. ajax (( statusCode: ( 404 : funcția () ( alertă („pagina nu a fost găsită”); } ) ; |
Dacă cererea a avut succes, atunci ca parametru, funcția anonimă va lua aceiași parametri ca și funcțiile de gestionare pentru executarea cu succes a cererii (specificate în parametrul de succes), iar în cazul unei erori, aceiași parametri ca cei ai erorii. funcții.
Tip: funcție, matrice.
O funcție care va fi apelată dacă cererea către server se finalizează cu succes. Ia 3 argumente:
- date trimise de server și preprocesate;
- șir cu starea de execuție (textStatus);
- obiect jqXHR (în versiunile anterioare 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.
Tip: număr.
Timp de așteptare pentru un răspuns de la server în milisecunde. Suprascrie setarea globală a aceluiași parametru în $.ajaxSetup(). Dacă acest timp este depășit, cererea va fi finalizată cu o eroare și va apărea un eveniment de eroare, 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, timeout-ul se 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.
Tip: boolean.
Setați acest parametru la true pentru a utiliza opțiunile tradiționale de conversie (serializare).
Tip: sfoară.
Similar cu parametrul metodei. Parametrul este utilizat în jQuery mai devreme de 1.9.0
Tip: sfoară.
Definește adresa la care va fi trimisă cererea.
Tip: sfoară.
Nume de utilizator pentru autentificare la server, dacă este necesar.
Tip: funcție.
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 a acestui obiect.
Tip: obiect.
Parametrul a apărut î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 ) ));
$. ajax (( url: a_cross_domain_url, xhrFields:( cuCredentials: adevărat } ) ; |
După cum am menționat mai sus, $.ajax() este metoda cea mai de bază, iar toate metodele ulterioare sunt doar wrapper-uri. De foarte multe ori nu este nevoie să apelați această funcție, deoarece Există alternative de nivel superior, cum ar fi , și . Sunt mai ușor de înțeles și de utilizat, deși $.ajax() este o soluție mai flexibilă.
Cel mai simplu caz de utilizare ar fi apelarea $.ajax() fără a specifica parametrii:
$. ajax(); |
Setările beforeSend, error, dataFilter, succes și complete vă permit să setați handlere de evenimente care apar în anumite momente în execuția fiecărei solicitări ajax.
- beforeSend are loc imediat înainte ca cererea să fie trimisă către server;
- eroarea apare dacă cererea eșuează;
- dataFilter apare atunci când datele sosesc de la server. Vă permite să procesați datele „brute” trimise de server;
- succesul are loc dacă cererea se finalizează cu succes;
- complete apare ori de câte ori cererea este finalizată. succes : function () (
- „xml” - documentul xml rezultat va fi disponibil sub formă de text. Puteți lucra cu el folosind instrumente jQuery standard (precum și cu un document html).
- „html” - codul html 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.
- „script” - 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 analiză 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.
- „text” - datele primite vor fi disponibile în text simplu, fără procesare prealabilă.
alertă („Date trimise cu succes.” );
} ) ;
Atenţie! Setările .success(), .error() și .complete() discutate mai sus au fost adăugate la jQuery-1.5 în plus față de metodele standard .done(), .fail() și .then() pentru obiectul amânat, care poate fi folosit pentru a seta handlere, cu toate acestea, începând cu jQuery-1.8, aceste trei metode vor deveni depreciate.
parametru dataTypeFuncț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:
Î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 ultimul caz, înainte de a trimite datele, jQuery convertește obiectul dat într-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
url: "test.php",
succes : funcție (date) (
alertă ("Date primite: " + date );
} ) ;
Sintaxă și descriere:
Valoare returnată: o instanță a obiectului XHR (XMLHttpRequest).
Opțiuni:
async – (boolean - valoare logică) Valoarea implicită este adevărată, iar apoi toate cererile sunt executate asincron (De aceea se folosește Ajax, astfel încât operațiunile să fie efectuate în paralel). Dacă setați valoarea la false, ceea ce este extrem de nedorit, cererea va fi executată ca sincron (Alte acțiuni ale browserului pot fi blocate în timp ce solicitarea sincronă este în curs de executare. Și, în general, browserul poate înceta să reacționeze și să mai răspundă).
beforeSend(XHR) – (funcție) O funcție apelată înainte de a trimite o solicitare. Este folosit pentru a seta anteturi suplimentare (personalizate) sau pentru a efectua alte operațiuni preliminare. I se transmite o instanță a obiectului XHR (XMLHttpRequest) ca singur argument. Dacă funcția returnează false, cererea este anulată.
cache – (boolean - valoare logică) Dacă este fals, atunci paginile solicitate nu sunt stocate în cache de browser. (Browserul poate servi rezultate din memoria cache. De exemplu, când datele din răspunsul serverului la o solicitare Ajax sunt întotdeauna noi, memorarea în cache interferează). În mod implicit, este adevărat pentru tipurile de date text, xml, html, json. Pentru tipurile de date „script” și „jsonp”, valoarea implicită este false.
complete(XHR, textStatus ) – (funcție) O funcție apelată la sfârșitul cererii, indiferent de succesul sau eșecul acesteia (și după funcțiile de succes și eroare, dacă sunt specificate). Funcția are două argumente: o instanță a obiectului XHR (XMLHttpRequest) și un șir care indică starea de „succes” sau „eroare” (conform codului de stare din răspunsul la cerere).
contentType – (șir) Tipul de conținut din cerere (când trimiteți date către server). Setarea implicită la „application/x-www-form-urlencoded” (potrivit pentru majoritatea cazurilor și este, de asemenea, implicit pentru trimiterea formularelor).
context – (obiect) Acest obiect va deveni contextul (this) pentru toate funcțiile de apel invers asociate cu această solicitare Ajax (de exemplu, pentru funcțiile de succes sau eroare).
$.ajax(( url: "test.html",
context: document.body,
succes: function())(
$(this).addClass(„terminat”);
}});date – (șir | obiect) Date trimise cu cererea către server. Acestea sunt convertite într-un șir de interogare și, implicit, codificate într-o formă asemănătoare URL (parametrul processData este responsabil pentru codificarea automată în formatul URL).
Șirul este atașat la șirul de interogare URL dacă solicitarea este făcută folosind metoda GET. Dacă solicitarea este efectuată folosind metoda POST, atunci datele sunt transmise în corpul cererii.
Dacă parametrul dat este un obiect ca un set de perechi property_name/valoare și valoarea este o matrice, atunci jQuery serializează obiectul într-o secvență de mai multe valori cu aceeași cheie.
De exemplu, (Foo: ["bar1", "bar2"]) va deveni „&Foo=bar1&Foo=bar2” .
dataFilter(data, type) – (funcție) O funcție care este apelată dacă cererea are succes și este utilizată pentru a procesa datele primite în răspunsul serverului la cerere. Returnează datele procesate conform parametrului „dataType” și le transmite funcției de succes. Datele de tip text și xml sunt transmise fără procesare imediată către funcția de succes prin proprietatea responseText sau responseHTML a obiectului XMLHttpRequest. Funcția dataFilter are două argumente:
- date - date primite (corp de răspuns al serverului),
- tip - tipul acestor date (parametrul „dataType”).
dataType – (șir) Un șir care definește numele tipului de date așteptat în răspunsul serverului. Dacă tipul de date nu este specificat, jQuery însuși încearcă să îl determine, pe baza tipului MIME al răspunsului serverului. Valori valide: „xml”, „html”, „script”, „json”, „jsonp”, „text”. (Acest lucru este necesar pentru a defini o metodă de procesare a datelor primite în răspunsul la cerere de către funcția dataFilter înainte de a fi transmisă funcției de apel invers de succes.)
error(XHR, textStatus, errorThrown) – (funcție) O funcție care este apelată atunci când cererea eșuează (dacă codul de stare din răspunsul serverului indică o eroare). Funcției primesc trei argumente:
- XHR - o instanță a obiectului XMLHttpRequest,
- textStatus - un șir care descrie tipul de eroare care a apărut ("timeout", "error", "notmodified" sau "parsererror"),
- errorThrown - parametru opțional - obiect excepție, dacă există (returnat de o instanță a obiectului XHR).
global – (boolean - valoare logică) Implicit la true (permite apelarea gestionarilor de evenimente globale în diferite etape ale unei solicitări Ajax, de exemplu, funcțiile ajaxStart sau ajaxStop). Valoarea este setată la false pentru a preveni declanșarea acestora. (Folosit pentru a gestiona evenimentele Ajax).
ifModified – (boolean - valoare booleană) Dacă este setată la true, atunci cererea este considerată reușită numai dacă datele din răspuns s-au schimbat de la ultima solicitare (jQuery determină dacă o componentă din memoria cache a browserului se potrivește cu ceea ce este pe server, verificând antetul „Last-Modified” cu data ultimei modificări a conținutului, iar în jQuery 1.4 este bifat și antetul „Etag” - un șir cu versiunea componentei). Valoarea implicită este false, adică Succesul cererii nu depinde de anteturi sau de modificările răspunsului.
jsonp – (șir) Suprascrie numele funcției de apel invers pentru o solicitare jsonp pe mai multe domenii. Înlocuiește cuvântul cheie callback din partea „callback=?”. un șir de solicitare GET (adăugat la adresa URL) sau trimis în corpul solicitării atunci când este trimis folosind metoda POST. În mod implicit, jQuery generează automat un nume unic pentru funcția de apel invers.
jsonpCallback – (șir) Definește numele funcției de apel invers pentru cererea jsonp. Această valoare va fi folosită în locul numelui aleatoriu generat automat de biblioteca jQuery. Utilizarea acestui parametru vă permite să evitați stocarea în cache a cererilor GET în browser. Este recomandabil să permiteți jQuery să genereze un nou nume pentru fiecare nouă solicitare pe mai multe domenii către server pentru ușurință în gestionarea cererilor și a răspunsurilor.
parola – (șir) Parola care va fi utilizată ca răspuns la o solicitare de autorizare HTTP pe server.
processData – (boolean) Valoarea implicită la true și datele transmise serverului în parametrul de date sunt convertite într-un șir de interogare cu tipul de conținut „Application/X-WWW-forms-urlencoded” și codificate. Dacă această procesare nu este dorită (când trebuie trimise alte date către server, cum ar fi un obiect DOMDocument sau xml), atunci poate fi ocolită setând acest parametru la fals.
scriptCharset – (șir) Când se efectuează cereri GET și solicitări care vizează date „jsonp” sau „script”, specifică codificarea caracterelor cererii (de exemplu, „UTF-8” sau „CP1251”). Util pentru diferențele dintre codificările de pe partea client și pe partea de server.
success(data, textStatus, XHR ) – (funcție) O funcție care este apelată la o solicitare reușită (dacă codul de stare din răspunsul la cerere indică succes). Funcției i se transmit trei argumente:
- date - date returnate de server în răspuns, preprocesate de funcția dataFilter în conformitate cu valoarea parametrului dataType,
- textStatus - un șir cu un cod de stare care indică succesul,
- XHR este o instanță a obiectului XMLHttpRequest.
timeout – (număr) Setează timpul maxim de așteptare pentru un răspuns al serverului în milisecunde. Are prioritate față de setarea globală a limitei de expirare prin $.AjaxSetup. Dacă limita de expirare este depășită, cererea este anulată și este apelată eroarea funcției de gestionare a erorilor (dacă este instalată). Aceasta poate fi folosită, de exemplu, pentru a atribui unei anumite solicitări un timeout mai lung decât timeout-ul setat pentru toate cererile.
traditional – (boolean) Trebuie să fie setat la true pentru a utiliza serializarea tradițională (simplificată) a datelor la trimitere (fără a se converti recursiv într-un șir de obiecte sau matrice asemănătoare URL-ului care sunt imbricate în alte matrice sau obiecte).
tip – (șir) metodă HTTP pentru transmiterea datelor la executarea unei cereri. În mod implicit, datele sunt transferate folosind metoda GET. De obicei, sunt folosite GET sau POST. Puteți folosi și metodele PUT și DELETE, dar acest lucru nu este recomandat din cauza faptului că nu sunt acceptate de toate browserele.
url – (șir) Un șir care conține adresa URL la care este trimisă solicitarea. În mod implicit, aceasta este pagina curentă.
username – (șir) Nume de utilizator care va fi folosit pentru autorizarea HTTP pe server.
xhr – (funcție) O funcție numită pentru a instanția un obiect XMLHttpRequest. Implicit, crearea unui obiect XHR este implementată prin ActiveXObject în browserul IE, sau prin obiectul încorporat de tip XMLHttpRequest în alte cazuri.
opțiuni – (obiect) Un obiect sub forma unui set de proprietăți (cheie: perechi „valoare”) care specifică parametrii pentru o solicitare Ajax. Există o mulțime de parametri posibili (proprietăți ale obiectului opțiuni) și, de obicei, în majoritatea cazurilor nu sunt folosiți toți, ci doar unii dintre ei. În plus, toți acești parametri sunt opționali, deoarece valoarea oricăruia dintre ele poate fi setată la implicit folosind metoda $.ajaxSetup().
Următoarele proprietăți ale obiectului opțiuni sunt disponibile pentru a configura o solicitare Ajax:
O lecție în care ne vom uita la crearea unor solicitări 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 corespunzătoare ale acestora.
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 obiect XMLHttpRequest onreadystatechange. 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:
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 acest pas poate fi omis.
Să creăm o variabilă care va conține o instanță a obiectului XHR (XMLHttpRequest).
Să setăm 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 abonăm 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 efectua anumite acțiuni pe pagină. 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 nu este nevoie să trecem date la parametrul acestei metode. 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 utilizând 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 obiectul XHR în consola browser console.log(request); // și răspunsul (text) care a venit de la server în fereastra de alertă console.log(request.responseText) ; // obțineți elementul cu id = welcome var welcome = document.getElementById("welcome" // înlocuiți conținutul elementului cu răspunsul venit de la server .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):
Scopul fișierului time.php este de a afișa ora curentă pe ecran.
Descărcați exemple de fișiere sursă (16,6 kb):
Un program care încarcă dinamic conținut la discreția utilizatorului.
Conținutul fișierului index.html.
Ce pagină ai vrea să deschizi?
$(document).ready(function())( $("#btn1").click(function())( $.ajax(( url: "page1.html", cache: false, succes: function(html)) ( $ ("#conținut").html(html); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", cache: false, succes) : function(html)( $("#conținut").html(html); ) ));În corpul documentului a fost creat un formular care are două butoane prin care utilizatorul selectează conținutul dorit. Și un container pentru încărcarea conținutului.
Evenimentul clic de pe butonul „Pagina 1” este gestionat de funcția $(„#btn1”).click(), iar evenimentul clic de pe butonul „Pagina 2” este procesat de $(„#btn2”). funcția click().
Conținutul fișierelor page1.html și page2.html, care sunt încărcate dinamic în zona de conținut, sunt simple pagini HTML sau fișiere text care conțin conținut.
Descărcați exemple de fișiere sursă (18,4 kb):
Să ne uităm la un exemplu care trimite numele de utilizator introdus către server. Când serverul primește un nume, emite un salut și numără numărul de caractere din numele introdus.
Conținutul fișierului index.html.
Introdu numele tau:
$(document).ready(function())( $("#myForm").submit(function())( $.ajax(( tip: "POST", url: "greetings.php", date: "nume utilizator) =" +$("#nume utilizator").val(), succes: function(html)( $("#content").html(html); ) ));
În corpul documentului a fost creat un formular pentru introducerea unui nume de utilizator. Și un container pentru încărcarea conținutului dinamic.
Rețineți că formularul în sine nu are câmpurile obișnuite de acțiune și metodă. Funcția $("#myForm").submit() servește ca handler pentru evenimentul de clic pe butonul "Submit". Să aruncăm o privire la această funcție.
$("#myForm").submit(function())( $.ajax(( tip: "POST", url: " salutări.php", date: "username="+$("#username").val ( ), succes: function(html)( $("#conținut").html(html); ) ));
După cum putem vedea, lucrarea principală este din nou legată de funcția $.ajax(). De această dată, apar parametri suplimentari care nu au fost luați în considerare în exemplele 1 și 2. Și anume:
Tip: „POST” Tip de transfer de date. date: "username="+$("#username").val() Parametrii transmisi serverului. În acest caz, transmitem conținutul câmpului nume de utilizator - numele de utilizator. În general, parametrii sunt scriși în același mod ca în metoda GET, pe o singură linie, de exemplu:
date: „nume utilizator=Vasya&age=18&sex=masculin”
Vă rugăm să rețineți că la sfârșit există o linie:
Returnează fals; Acest lucru se face astfel încât formularul să nu încerce să transfere date în fișierul din care este lansat și pagina să nu se reîncarce.
Conținutul fișierului greetings.php.
Afișăm salutul și numărăm numărul de caractere din nume.
Descărcați exemple de fișiere sursă (16,8 kb):
În concluzie, merită să spunem că, pe lângă avantajele evidente ale creării paginilor folosind conținut de actualizare dinamică, există o serie de dezavantaje care ar trebui luate în considerare la dezvoltarea unui site și anume:
1. În paginile cu actualizare dinamică a conținutului, butonul „Înapoi” din browser nu funcționează corect.
2. Paginile cu actualizări dinamice de conținut nu modifică adresele URL în funcție de conținutul lor, așa că nu pot fi marcate.
3. Paginile cu actualizări dinamice de conținut nu sunt indexate de motoarele de căutare, deoarece nu execută comenzi JavaScript.
Puteți scăpa de dezavantajele de mai sus în mod programatic. Acest articol nu discută astfel de metode.
