AJAX este un grup de tehnologii care este utilizat în dezvoltarea web pentru a crea aplicații interactive. AJAX vă permite să transferați date de pe server fără a reîncărca pagina. Astfel poți obține rezultate foarte impresionante. Și biblioteca jQuery simplifică foarte mult implementarea AJAX folosind metode încorporate.

Pentru a implementa tehnologia, utilizați metoda $.ajax sau jQuery.ajax:

$.ajax(proprietăți) sau $.ajax(url [, proprietăți])

Al doilea parametru a fost adăugat în versiunea 1.5 a jQuery.

url - adresa paginii solicitate;

proprietăți - solicitați proprietăți.

Pentru o listă completă de opțiuni, consultați documentația jQuery.

În acest tutorial folosim câțiva dintre cei mai des utilizați parametri.

succes (funcție) - această funcție este apelată după ce cererea a fost finalizată cu succes. Funcția primește de la 1 la 3 parametri (în funcție de versiunea bibliotecii utilizate). Dar primul parametru conține întotdeauna datele returnate de la server.

date (obiect/șir) - date utilizator care sunt transmise paginii solicitate.

dataType (șir) - valori posibile: xml, json, script sau html. Descrierea tipului de date care este așteptat în răspunsul serverului.

tip (șir) - tip cerere. Valori posibile: GET sau POST. Implicit: GET.

url (șir) - URL pentru cerere.

Transfer ușor de text.

$.ajax(( url: "response.php?action=sample1", succes: function(data) ( $(".rezults").html(data); ) ));

Există un element div .result pentru răspuns.

In asteptarea unui raspuns

Serverul returnează pur și simplu șirul:

Echo „Exemplu 1 - transfer finalizat cu succes”;

Transmitem datele utilizatorului către scriptul PHP.

$.ajax(( tip: "POST", url: "response.php?action=sample2", date: "name=Andrew&nickname=Aramis", succes: function(data)( $(".results").html( date); ) ));

Serverul returnează un șir cu datele transmise introduse în el:

Echo "Exemplu 2 - transfer finalizat cu succes. Parametri: nume = " . $_POST[„nume”] . ", porecla= " . $_POST[„porecla”];

Trecerea și executarea codului JavaScript

$.ajax(( dataType: „script”, url: „response.php?action=sample3”, ))

Serverul execută codul:

Echo "$(".rezultate").html("Exemplu 3 - Executarea JavaScript");";

Folosim XML. Exemplul poate fi folosit pentru a lucra cu XML extern, de exemplu, un flux RSS.

$.ajax(( dataType: "xml", url: "response.php?action=sample4", succes: function(xmldata)( $(".results").html(""); $(xmldata).find ("articol").each(function())( $(" ").html($(this).text()).appendTo(".results"); )); ) ));

Serverul ar trebui să returneze codul XML:

Antet ("Content-Type: application/xml; charset=UTF-8"); echo "linia de testare 1"); $arr = array("id" => 20, "text" => "linia de test 2"); $arr = array("id" => 30, "text" => "linia de testare 3"); echo json_encode($arr);

În același mod, puteți transfera obiecte stdClass de pe server, transformându-le într-un șir json.

Acum voi da un exemplu de cerere de obținere simplă folosind funcția ajax și primind date html.

$.ajax(( url: "", dataType: "html", succes: function(data) ( // unele actiuni cu datele primite ) ));

Solicitarea către server se face folosind metoda get, deoarece parametrul responsabil pentru tipul de cerere; tipul este GET în mod implicit.

Un exemplu de executare a unei cereri folosind funcția ajax cu transmisie de date folosind metoda post și procesarea evenimentului. Mai jos voi descrie parametrii suplimentari care sunt cel mai des utilizați.

$.ajax(( url: "", tip: "post", date: "", // poate fi un șir, sau puteți, de exemplu, astfel: $("input, input:checked, input:checked , select, textarea" ) dataType: "json", beforeSend: function() ( $("#sendajax").button("se incarca"); ), complete: function() ( $("#sendajax").button ("resetare") ; ), succes: function(json) ( // unele acțiuni cu datele primite ), eroare: function(xhr, ajaxOptions, thrownError) ( alert(thrownError + "\r\n" + xhr.statusText) + "\r \n" + xhr.responseText); ) ));

Buton de trimitere:

Trimite

În exemplul de mai sus, când faceți clic pe buton, starea butonului se schimbă mai întâi (textul de pe acesta se schimbă în „Trimitere...” și devine inactiv), ceea ce se face folosind parametrul beforeSend. Apoi se trimite o cerere cu datele necesare transferate. După ce se primește un răspuns de la server, starea butonului revine la starea anterioară (textul se schimbă în „Trimitere” și devine activ). Răspunsul este primit sub formă de date json.

Voi descrie pe scurt parametrii pentru trimiterea unei cereri ajax, care poate fi cel mai adesea util:

Mai jos voi da câteva exemple de utilizare a cererilor ajax.

Exemplu de cod de formular html:

Numele dumneavoastră:

Cod JavaScript:

$("#myform").submit(function(e) ( e.preventDefault(); $.ajax(( tip: $(this).attr("metodă")), url: "", date: $(this). ).serialize(), async: false, dataType: "html", succes: function(result)( alert("Formular trimis"); ) )); ));

Pentru a preveni reîncărcarea paginii când se face clic pe butonul „Trimite”, mai întâi înlocuim acțiunile implicite ale browserului folosind e.preventDefaults() .

În parametrul de date trecem toate câmpurile formularului folosind $(this).serialize() - această funcție convertește toate intrările și selectează într-un șir potrivit pentru a fi trimis la server.

De asemenea, aici este folosit parametrul async: false, astfel încât până când formularul este trimis la server, nu se mai poate face clic sau face nimic altceva.

Problema trimiterii unui fișier sau a unei imagini către server fără a reîncărca pagina apare destul de des. În acest exemplu, voi analiza 2 caracteristici simultan: selectarea unui fișier făcând clic pe un buton, care poate fi proiectat în orice mod, și afișarea progresului la transferul unui fișier pe server folosind o solicitare Ajax.

Codul html va fi astfel:

Incarca imaginea

#addfile ( poziție: relativă; overflow: ascuns; lățime: 180px; înălțime: 34px; ) #load_file (poziția: absolut; sus: 0; stânga: 0; lățime: 180px; înălțime: 34px; dimensiunea fontului: 0px; opacitate : 0; filtru: alfa(opacitate:0); ) #load_file:hover (cursor: pointer; )

Esența ideii este că o intrare standard pentru selectarea unui fișier este afișată deasupra butonului, dar este complet transparent și are aceleași dimensiuni ca și butonul. În acest fel, utilizatorul vede un buton, dar când trece cu mouse-ul peste el, de fapt trece peste o intrare. În consecință, când face clic pe buton, intrarea de selecție a fișierului este de fapt apăsată. Pentru a preveni ca cursorul să clipească după selectarea unui fișier, dimensiunea fontului este setată la 0px.

Acum codul javascript pentru trimiterea fișierului către server care afișează progresul:

$(function() ( $("#load_file").on("schimbare", loadfile); )); funcția loadfile() ( $("#addfile span").html("0% încărcat"); fișiere = $("#load_file").files; var form = new FormData(); form.append("încărcare" , fișiere); $.ajax(( url: "", tip: "POST", date: form, cache: false, processData: false, contentType: false, xhr: function() ( var myXhr = $.ajaxSettings.xhr (); dacă (myXhr.upload) ( myXhr.upload.addEventListener("progres",ShowProgress, false); ) returnează myXhr; ), completează: function(data)( $("#addfile span").html(" Încărcați imaginea"); $("#load_file").val(""); ), succes: function(message)( alert(message); ), eroare: function(jqXHR, textStatus, errorThrown) ( alert(textStatus+" "+errorThrown); ) )); ) funcția ShowProgress(e) ( if(e.lengthComputable)( $("#addfile span").html("Loaded "+Math.round(100*e.loaded/e. total)+"%"); ))

Când încărcați un fișier pe server, butonul va afișa câte % au fost deja transferate pe server. După ce încărcarea este completă, numele butonului este returnat așa cum era și valoarea fișierului de intrare este setată la gol, astfel încât un fișier nou poate fi selectat din nou.

Exemplu de parte server în PHP (la cererea lui Evgeniy):

$mesaj = ""; if (empty($_FILES["încărcare"]["nume"]) || $_FILES["încărcare"] == "niciuna") ( $message = "Nu ați selectat niciun fișier"; ) else if ($ _FILES[ "încărcare"]["dimensiune"] == 0 || $_FILES["încărcare"]["dimensiune"] > 9437184) ( $message = "Dimensiunea fișierului nu respectă standardele (maximum 9 MB)" ; ) else if ( ($_FILES["upload"]["type"] != "image/jpeg") && ($_FILES["upload"]["type"] != "image/pjpeg") && ( $_FILES["încărcare "]["tip"] != "imagine/gif") && ($_FILES["încărcare"]["tip"] != "imagine/png")) ( $message = "Numai JPG , imaginile GIF și PNG pot fi încărcate."; ) else if (!is_uploaded_file($_FILES["upload"]["tmp_name"])) ( $message = "Ceva a mers prost. Încercați să încărcați fișierul din nou." ; ) else ( $ ftype = $_FILES["încărcare"]["tip"]; $fname = "newname_image.".($ftype == "imagine/gif" ? "gif" : ($ftype == "imagine /png" ? " png" : "jpg")); dacă (move_uploaded_file($_FILES["încărcare"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].."/files/".$fname)) ( $message = „Imaginea a fost încărcată cu succes.”; ) else ( $message = „Ceva a mers prost. Vă rugăm să încercați să descărcați fișierul din nou."; ) ) exit($message);

Informațiile despre imaginea încărcată vor fi conținute în $_FILES["upload"] , deoarece Scriptul a adăugat fișierul astfel: form.append(„încărcare”, fișiere); În consecință, tot ceea ce este necesar de la programul PHP este să verificați dacă fișierul corespunde parametrilor așteptați, mutați fișierul în folderul dorit (în exemplu, folderul fișiere) sub numele dorit (în exemplu, newname_image) și returnează un răspuns la browser, care în exemplul meu este pur și simplu afișat utilizatorului cu comanda alert(message);

Există o mulțime de situații în care este posibil și chiar necesar să folosiți cereri Ajax și nu este posibil să le discutăm pe toate aici. Cu toate acestea, dacă aveți sugestii cu privire la ce alte exemple ar putea avea sens să adăugați aici, vă rugăm să scrieți în comentarii.

Fiecare funcție jQuery este folosită pentru a itera elementele unui obiect jQuery. Conține unul sau mai multe elemente DOM și oferă toate funcționalitățile jQuery. În plus, jQuery oferă o funcție de ajutor cu același nume, care poate fi apelată fără a selecta sau crea mai întâi elemente DOM. Să aflăm despre asta mai detaliat.

În exemplul următor, selectăm toate elementele div dintr-o pagină web și afișăm indexul și ID-ul fiecăruia. Rezultate posibile: „div0:header”, „div1:body”, „div2:footer”. Exemplul folosește funcția jQuery each() mai degrabă decât funcția de ajutor:

// Elemente DOM $("div").each(funcție (index, valoare) ( ​​console.log("div" + index + ":" + $(this).attr("id")); ) );

Următorul exemplu demonstrează utilizarea funcției de ajutor. În acest caz, obiectul pe care este executată bucla este dat ca prim argument. În acest exemplu, voi arăta cum să parcurgeți o matrice folosind fiecare funcție a jQuery:

// Arrays var arr = [ „unu”, „două”, „trei”, „patru”, „cinci” ]; $.each(arr, function (index, value) ( ​​​​console.log(value); // Execuția se oprește după returnarea „trei” (valoare !== „trei”); )); // Rezultat: unu doi trei

În ultimul jQuery fiecare exemplu, vreau să reprezint bucle prin proprietățile obiectului:

// Obiecte var obj = ( unu: 1, doi: 2, trei: 3, patru: 4, cinci: 5 ); $.each(obj, funcție (index, valoare) ( ​​console.log(valoare); )); // Rezultat: 1 2 3 4 5

Totul se rezumă la formarea unui apel invers adecvat. Acest context de apel invers va fi egal cu al doilea argument, care este valoarea curentă. Dar, deoarece contextul va fi întotdeauna un obiect, valorile simple trebuie să fie „înfășurate”. Prin urmare, egalitatea strictă între sens și context nu poate fi specificată. Primul argument este indexul curent, care este un număr pentru fiecare matrice jQuery sau un șir (pentru obiecte).

Să vedem cum este folosită funcția each() împreună cu obiectul jQuery. Primul exemplu selectează toate elementele din pagină și le afișează atributul href:

$("a").each(funcție (index, valoare)( console.log($(this).attr("href")); ));

Al doilea exemplu de utilizare a jQuery pentru fiecare obiect afișează toate href-urile externe pe o pagină web (presupunând că este utilizat protocolul HTTP):

$("a").each(funcție (index, valoare)( var link = $(this).attr("href"); if (link.indexOf("http://") === 0) ( console.log(link); ) ));

Să presupunem că pagina are următoarele link-uri:

JQUERY4U PHP4U LOGOOLA

Al doilea cod va scoate:

http://jquery4u.com http://www.phpscripts4u.com http://www.blogoola.com

Elementele DOM dintr-un obiect jQuery trebuie să fie „înfășurate” din nou atunci când sunt utilizate în fiecare (). Deoarece jQuery în sine este de fapt un container pentru o serie de elemente DOM. Cu fiecare funcție a jQuery, această matrice este procesată în același mod ca o matrice obișnuită. Prin urmare, nu primim elementele împachetate imediat după procesare.

Să ne uităm din nou la modul în care poate fi procesată o matrice obișnuită:

var numere = ; $.each(numere , functie (index, valoare)( console.log(index + ":" + valoare); ));

Rezultatul executării codului este: 0:1, 1:2, 2:3, 3:4, 4:5 și 5:6.

Tabloul conține indici numerici, deci obținem numere care încep de la 0 și merg până la N - 1, unde N este numărul de elemente din tablou.

Putem avea structuri de date mai complexe, cum ar fi matrice din matrice, obiecte din obiecte, matrice din obiecte sau obiecte din matrice. Să ne uităm la modul în care jQuery find fiecare poate fi folosit în scenarii ca acesta:

var json = [ ( „roșu”: „#f00” ), ( „verde”: „#0f0” ), ( „albastru”: „#00f” ) ]; $.each(json, function () ( $.each(this, function (nume, valoare) ( ​​console.log(name + "=" + value); )); ));

Rezultatul executării codului: roșu=#f00, verde=#0f0, albastru=#00f.

Procesăm structura folosind un apel imbricat each(). Apelul exterior procesează o matrice de variabile JSON, apelul interior procesează obiecte. În acest exemplu, fiecare element jQuery are o singură cheie. Dar folosind codul prezentat, poate fi atribuit orice număr de taste.

Acest exemplu arată cum să iterați peste fiecare element cu clasa productDescription:

Roșu Roz Portocaliu Verde albăstrui Verde

Împreună cu selectorul, folosim funcția helper each() în loc de metoda each():

$.each($(".productDescription"), funcție (index, value) ( ​​​​console.log(index + ":" + $(value).text()); ));

Rezultatul utilizării jQuery pentru fiecare funcție va fi: 0:Roșu, 1:Portocaliu, 2:Verde.

Nu trebuie să folosim index și valoare. Aceștia sunt parametrii care ajută la determinarea elementului DOM care este procesat în prezent de buclă. În plus, scriptul poate folosi metoda each() mai convenabilă:

$(".productDescription").each(function () ( console.log($(this).text()); ));

Rezultat .

În acest articol, vom arunca o privire asupra metodelor de comenzi rapide AJAX ale jQuery: încărcare, get, getJSON, getScript și post. Aceste metode facilitează implementarea solicitărilor AJAX necesare și, spre deosebire de funcția ajax, necesită mai puține linii de cod pentru a scrie.

Metoda de încărcare este concepută pentru a prelua date de pe server la o adresă URL specificată și a le plasa în unul sau mai multe elemente selectate.

Metoda de încărcare are următoarea sintaxă:

Load(url [,data] [,complete]) // parametrii dintre paranteze drepte sunt opționali //url - un șir care conține adresa URL la care trebuie trimisă solicitarea //date (parametru opțional) - date care trebuie trimise către serverul (în format șir sau obiect) //complete – acțiuni suplimentare care trebuie efectuate după finalizarea cererii (specificate folosind funcția Function(responseText, textStatus, xhr)) // responseText - răspuns server // textStatus - stare răspuns // xhr - XMLHTTPSolicita un obiect

În cele mai multe cazuri, metoda de încărcare folosește GET pentru a trimite o solicitare. Dar poate folosi și metoda POST. Acest lucru se întâmplă doar atunci când datele care urmează să fie trimise către server sunt specificate nu în format șir, ci printr-un obiect.

1. Introduceți conținutul fișierului asidenav.tpl în blocul cu id="asidenav" după ce DOM-ul paginii s-a încărcat:

... // după încărcarea DOM-ului paginii $(function() ( // introduceți conținutul fișierului asidenav.tpl în elementul (#asidenav) // dacă fișierul nu se află în același director cu HTML document, atunci trebuie să specificați în plus calea către el $("#asidenav").load("asidenav.tpl"); ));

2. Încărcați o parte din fișierul demo.html în element când faceți clic pe butonul situat în acesta:

Obțineți conținutul fișierului demo.html ... $("#ajaxclick").click(function())( // încărcați o parte a fișierului demo.html (#conținut1) în elementul id="conținut1" $ (acest).parent() .load("demo.html #conținut1"); ));

Conținutul fișierului demo.html:

Fișier demo.html ......

3. Încărcați răspunsul content.php în elementul care are id="result" . Acest răspuns va depinde de valoarea atributului de conținut de date pe care îl are butonul care a trimis cererea AJAX către server.

Încărcați conținut 1 Încărcați conținut 2 Încărcați conținut 3 ... // când faceți clic pe un buton cu clasa load-ajax-click $(".load-ajax-content").click(function())( // definiți valoarea al atributului de date -content var dataContent = $(this).attr("data-content"); // solicită date din fișier folosind valoarea atributului data-content și le trimite la elementul id="rezultat " if (dataContent) ( $ ("#rezultat").load("content.php","content="+dataContent); ) ));