O lecție în care vom folosi exemple pentru a crea cereri AJAX asincrone simple către server. Vom folosi atât metoda GET, cât și metoda POST ca metodă de transfer de cereri. Pe server, vom procesa cereri folosind scripturi PHP.

Ce este o solicitare AJAX asincronă?

Tehnologia AJAX este folosită în principal pentru a face cereri asincrone către server. O solicitare asincronă este una care rulează în fundal și nu împiedică utilizatorul să interacționeze cu pagina.

La trimiterea unei cereri asincrone, browserul (pagina) nu este „înghețat”, adică. cu ea, ca și înainte, poți lucra. Dar atunci de unde știi când va veni un răspuns de la server. Pentru a determina acest lucru, trebuie să monitorizați proprietatea readyState a browserului. Această proprietate conține un număr, după valoarea căruia puteți judeca în ce stadiu se află cererea. Următorul tabel rezumă valorile de bază ale proprietății readyState și stările lor corespunzătoare.

Acestea. se dovedește 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. Restul valorilor sunt rareori folosite în practică și este posibil ca unele browsere să nu le accepte.

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

Efectuarea unei cereri AJAX asincrone (metoda GET)

Să luăm în considerare crearea unei cereri AJAX asincrone folosind un exemplu care va saluta utilizatorul și va afișa adresa IP după încărcarea paginii.

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

1. welcome.html - pagină HTML care va fi afișată utilizatorului. În aceeași pagină, vom plasa un script care va efectua toate acțiunile necesare pentru ca AJAX să funcționeze pe partea clientului.
2. processing.php - fișier PHP care va procesa cererea din partea serverului și va forma răspunsul. Să începem dezvoltarea prin crearea structurii de bază a fișierului welcome.html.

Un exemplu de funcționare AJAX

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

Să pregătim datele necesare pentru a executa cererea pe server. Dacă nu sunt necesare date pentru a executa interogarea pe server, atunci această etapă poate fi omisă.

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

Să configuram cererea folosind metoda deschisă ().

Sunt specificați următorii parametri:

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

1. Abonați-vă la evenimentul onreadystatechange al obiectului XHR și specificați handlerul ca funcție anonimă sau numită. După aceea, vom crea un 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 cu numărul 4, puteți verifica valoarea proprietății status. Această proprietate determină starea cererii. Dacă este 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ă transferăm date la parametrul acestei metode. Acestea sunt transmise ca parte a adresei URL.

   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. Creați o cerere variabilă var request = new XMLHttpRequest (); // 3. Configurarea cererii request.open ("GET", "processing.php", true); // 4. Abonarea la evenimentul onreadystatechange și procesarea acestuia folosind funcția anonimă request.addEventListener ("readystatechange", funcția () (// dacă stările cererii sunt 4 și starea solicitării este 200 (OK) if ((request.readyState = = 4) && (request.status == 200)) (// de exemplu, afișați obiectul XHR în consola browser console.log (request); // și răspunsul (text) primit de la server în consola de alertă .log (request.responseText) ; // obțineți elementul c id = welcome var welcome = document.getElementById ("binevenit"); // înlocuiți conținutul elementului cu răspunsul 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:

Un exemplu de funcționare AJAX

Pe server (folosind php):

1. Să luăm datele. Dacă datele sunt trimise prin metoda GET, atunci din matricea globală $ _GET [„nume”]. Și dacă datele sunt transferate folosind metoda POST, atunci din matricea globală $ _POST [„nume”].
2. Folosind aceste date, să efectuăm câteva acțiuni pe server. Ca urmare, vom primi un răspuns. Să-i facem ecou.

Efectuarea unei cereri AJAX asincrone (metoda POST)

Să modificăm exemplul de mai sus. Acum cererea AJAX către server va fi executată după ce faceți clic pe butonul. Acesta va primi numele pe care utilizatorul l-a introdus în elementul de intrare și îl va trimite prin metoda POST către server. După ce primiți un răspuns de la server, înlocuiți conținutul elementului div de pe pagină cu acesta.

Un exemplu de funcționare AJAX

În era web-ului modern, majoritatea site-urilor devin din ce în ce mai interactive. Dacă mai devreme, pentru a primi date actualizate, era nevoie să actualizăm complet pagina, acum au apărut tehnologii care permit să nu încărcăm întreaga pagină, ci doar o parte separată a acesteia. La rândul său, acest lucru oferă confort atât utilizatorilor, cât și proprietarilor de server, deoarece pentru utilizator, încărcarea paginii va fi mai rapidă, deoarece este încărcată doar o parte separată a paginii, iar serverul nu trebuie să genereze pagina de fiecare dată și să o dea. către utilizator. Aceste caracteristici sunt ușor de implementat folosind php și ajax.

Astăzi vom analiza un mic exemplu pentru a înțelege mai bine cum funcționează conceptul. AJAX... Uneori este dificil pentru începători să înțeleagă modul în care php și ajax interacționează între ele, mulți oameni caută exemple despre cum să valideze formularele din mers fără a reîncărca întreaga pagină. Vă voi arăta pe scurt cum să faceți acest lucru, astfel încât să puteți înțelege elementele de bază și principiile care vă vor permite pe viitor să învățați mai rapid alte instrumente și să vă scrieți propriile scripturi.

Să venim cu o mică sarcină pentru noi, vom verifica prezența unei adrese de e-mail în baza de date fără a reîncărca pagina folosind php și ajax. Un astfel de exemplu va demonstra bine cum putem interacționa cu serverul fără a reîncărca pagina în browser și, de asemenea, este adesea folosit în diferite tipuri de validări de formulare de utilizator. În directorul rădăcină, creați 3 fișiere numite index.php, email.php, validate.js.

Creaza o pagina

Să creăm o pagină simplă cu un singur formular care conține un singur câmp de e-mail.
Sintaxa fișierului index.php

Cel mai simplu mod de a lucra cu AJAX Este de a conecta cadrul jQuery, ceea ce chiar am făcut. jQuery ne oferă o sintaxă ușor de înțeles și ușor de utilizat pentru trimitere AJAX cereri, de ce să nu profitați de asta?

Crearea de script Js

Sintaxa pentru fișierul validate.js este

$ (document) .ready (funcție () (var e-mail = ""; $ ("# e-mail"). keyup (funcție () (var valoare = $ (acest) .val (); $ .ajax ((tip: „POST”, url: „email.php”, date: „email =" + valoare, succes: funcție (msg) (dacă (msg == „valid”) ($ ("# mesaj"). Html (" Acest e-mail poate fi folosit.Această adresă de e-mail este deja luată.");))));)); $ (" # trimite "). faceți clic pe (funcție () (dacă (e-mail ==" ") (alertă (" Vă rugăm, puneți datele la toate e-mailurile ");) else ( $ .ajax ((tip: "POST", url: "email.php", date: "add_email =" + email, succes: function (msg)) ($ ("# mesaj"). html (msg);)) );)));));

handler PHP

Acest script va primi POST cerere de la client, o procesează și returnează rezultatul. AJAX citește rezultatul și ia o decizie pe baza acestuia.
Sintaxa pentru fișierul email.php este

$ connection = mysqli_connect ("localhost", "email", "email", "email"); if (isset ($ _ POST ["email"]) && $ _POST ["email"]! = "") ($ email = $ _POST ["email"]; $ email = mysqli_real_escape_string ($ conexiune, $ email); if (! filter_var ($ email, FILTER_VALIDATE_EMAIL)) (echo "invalid";) else ($ sql = "SELECT ID FROM email WHERE email =" $ email ""; $ rezultat = mysqli_query ($ conexiune, $ sql); dacă ( mysqli_num_rows ($ rezultat) == 1) (echo "invalid";) else (echo "valid";))) if (isset ($ _ POST ["add_email"]) && $ _POST ["add_email"]! = "" ) ($ email = mysqli_real_escape_string ($ conexiune, $ _ POST ["add_email"]); $ sql = "INSERT INTO email (email) VALUES (" $ email ")"; if (mysqli_query ($ conexiune, $ sql) )) ( ecou Succes";) else (ecou" Eroare"; } }

În scriptul nostru php, cel mai obișnuit cod care procesează o solicitare de postare și imprimă un text pe pagină. Ca rezultat AJAX trimite o solicitare către scriptul php, scriptul o procesează și returnează rezultatul, AJAX citește rezultatul și schimbă pagina în timp real.

AJAX transmite cererea POST către script prin această bucată de cod:

$ .ajax ((tip: „POST”, url: „email.php”, date: „email =" + valoare, succes: funcție (msg) (dacă (msg == „valid”) ($ ("# mesaj ") .html (" Acest e-mail poate fi folosit."); email = valoare;) else ($ (" # mesaj "). html (" Această adresă de e-mail este deja luată."); } } });

tip - Tipul cererii, POST sau GET. În cazul nostru, POST;
url - adresa script-ului la care este trimisă cererea;
date - date care sunt transmise în cerere;
succes - ce trebuie făcut ca urmare a executării cu succes a cererii. În cazul nostru, funcția este numită;

În scriptul propriu-zis, o verificare a prezenței e-mailului în baza de date este efectuată de fiecare dată când un caracter este introdus în câmpul de e-mail. În script, $ ("# e-mail"). Keyup (funcția () ()); care verifică apăsarea unei taste în câmpul cu id = „email”.
După cum puteți vedea, codul este destul de simplu și nu necesită abilități deosebit de mari pentru a înțelege, totul este legat de gestionarea evenimentelor keyup () - apăsarea unei taste, clic () - clic pe un element. Urmată de AJAX cerere și răspuns din script. Astfel, folosind php și ajax, puteți obține posibilități aproape nesfârșite de a crea pagini interactive.
Acest cod nu pretinde a fi de înaltă calitate, dar dacă îl dezvoltați, adăugați validările corecte la nivel de client și server, introduceți css, atunci îl puteți folosi destul de mult în proiectele dvs.
Dacă aveți întrebări, nu ezitați să scrieți comentarii.
O zi bună și ne vedem curând 🙂

Face o cerere către server fără a reîncărca pagina. Aceasta este o metodă de nivel scăzut, cu multă personalizare. Este în centrul tuturor celorlalte metode ajax. Are două cazuri de utilizare:

url- solicita adresa.
setări- în acest parametru puteți seta setările pentru această solicitare. 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 de setări

↓ nume: tip (Mod implicit)

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

În mod implicit, toate solicitările fără reîncărcarea paginii apar asincron (adică după trimiterea unei cereri către server, pagina nu își oprește activitatea în timp ce așteaptă un răspuns). Dacă aveți nevoie de execuție sincronă a interogării, setați parametrul la false. Solicitările pe mai multe domenii și „jsonp” nu pot rula sincron.

Vă rugăm să rețineți că executarea solicitărilor în modul sincron poate duce la blocarea paginii până când solicitarea este complet finalizată.

Acest câmp conține o funcție care va fi apelată chiar înainte de a trimite cererea ajax către server. Această funcție poate fi utilă pentru modificarea unui obiect 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. Object-jqXHR va fi transmis funcției ca prim argument. Al doilea argument este setările cererii.

În acest câmp pot fi specificate anteturi suplimentare de solicitare (antet). Aceste modificări vor fi aplicate înainte de apelul către beforeSend, în care pot fi efectuate modificări finale ale antetului.

Când această setare este setată la adevărat, cererea va fi executată cu starea „reușită” numai dacă răspunsul de la server diferă de răspunsul anterior. jQuery verifică acest lucru uitându-se la antetul Last-Modified. Începând cu jQuery-1.4, pe lângă Last-Modified, se bifează și „etag” (ambele sunt furnizate de server și sunt obligate să notifice browser-ul că datele solicitate de la server nu s-au schimbat de la solicitarea anterioară).

Vă permite să setați starea sursei paginii la local (ca și cum ar fi folosit protocolul de fișier), chiar dacă jQuery a recunoscut-o diferit. Biblioteca decide ca pagina să fie lansată local în cazul următoarelor protocoale: fișier, * -extensie și widget.

Se recomandă setarea valorii parametrului esteLocal la nivel global folosind funcția $ .ajaxSetup (), 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” - „httr: //siteName.ru? Callback = ...”).

Începând cu jQuery-1.5, specificarea false în acest parametru va împiedica adăugarea parametrului suplimentar la adresa URL. În acest caz, trebuie să setați în mod explicit valoarea proprietății jsonpCallback. De exemplu, astfel: (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 arbitrar pentru această funcție, care este opțiunea preferată pentru a face mai ușor să lucrați cu biblioteca. Unul dintre motivele pentru care ar trebui să specificați propria funcție pentru gestionarea cererilor jsonp este îmbunătățirea stocării în cache a cererilor GET.

De la 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ă, acestea 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 procesate în acest mod (de exemplu, un document DOM), atunci ar trebui să dezactivați opțiunea processData.

Acest parametru este utilizat pentru cererile ajax încrucișate de tip GET, dataType poate fi fie „jsonp”, fie „script”. Determină codificarea în care va fi executată cererea pe mai multe domenii. Acest lucru este necesar dacă serverul de pe un domeniu străin utilizează o codificare care este diferită de codificarea de pe serverul de domeniu de origine.

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

$ .ajax ((statusCode: (404: funcția () (alertă ( "Pagina nu a fost gasita") ; } } } ) ;

Funcțiile care răspund la coduri pentru executarea cu succes a unei cereri vor primi aceleași argumente ca și funcțiile care gestionează executarea cu succes a unei cereri (specificate în parametrul de succes), iar funcțiile care răspund la codurile de eroare vor fi aceleași ca și pentru funcțiile de eroare.

Funcția care va fi apelată în cazul finalizării cu succes a cererii către server. Ii vor fi trecuți trei parametri: date trimise de server și deja preprocesate (care 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). Deoarece jQuery-1.5, în loc de o singură funcție, acest parametru poate prelua o serie de funcții.

Este timpul să așteptați 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 avea loc 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 în acest moment să fie lansate alte câteva solicitări și browserul să amâne 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 anterioare, când expiră timpul de expirare, obiectul XMLHttpRequest va intra într-o stare de eroare și accesul la câmpurile sale poate arunca o excepție. V Firefox 3.0+ cererile 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 un ActiveXObject, în caz contrar este XMLHttpRequest. Cu acest parametru, puteți încorpora propria versiune a acestui 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 faceți o solicitare pe mai multe domenii:

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

V jQuery-1.5 proprietatea withCredentials nu este acceptată de XMLHttpRequest nativ și acest câmp va fi ignorat într-o solicitare între domenii. În toate versiunile ulterioare ale bibliotecii, acest lucru a fost remediat.

Managerii de evenimente

Setările beforeSend, error, dataFilter, succes și complete (descrise î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 chiar înainte ca cererea să fie trimisă către server. eroare apare dacă cererea eșuează. dataFilter apare atunci când datele sosesc de la server. Permite procesarea datelor brute trimise de server. succes apare dacă cererea se finalizează cu succes. complet apare la orice finalizare a cererii.

Un exemplu de utilizare simplă. Să afișăm un mesaj dacă solicitarea are succes:

$ .ajax ((url: "ajax / test.html", succes: function () (alerta ("Î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ă, permițându-vă să definiți handlere de execuție suplimentare. Pe lângă metodele standard amânate .done (), .fail () și .then (), pe care le puteți utiliza pentru a seta handlere, jqXHR implementează .success (), .error () și .complete (). Acest lucru se face pentru a se potrivi cu numele familiare ale metodelor utilizate pentru a configura handlere pentru executarea cererilor ajax. Cu toate acestea, începând cu jQuery-1.8 aceste trei metode vor deveni nedorite pentru utilizare.

Unele tipuri de solicitări, cum ar fi cererile jsonp sau GET pe mai multe domenii, nu acceptă obiecte XMLHttpRequest. În acest caz, transmise manerelor XMLHttpRequest și textStatus vor conține valoarea nedefinită.

Î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.

Parametrul DataType

Funcția $ .ajax () învață despre tipul de date trimise de server de la serverul însuși (prin intermediul MIME). În plus, este posibil să indicați personal (clarăm) cum trebuie interpretate aceste date. Acest lucru se face folosind parametrul dataType. Valori posibile pentru acest parametru:

"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" - html-ul rezultat va fi disponibil sub formă de text. Dacă conține scripturi în etichete