AJAX je grupa tehnologija koja se koristi u web razvoju za kreiranje interaktivnih aplikacija. AJAX vam omogućava prijenos podataka sa servera bez ponovnog učitavanja stranice. Na ovaj način možete postići vrlo impresivne rezultate. A jQuery biblioteka uvelike pojednostavljuje implementaciju AJAX-a koristeći ugrađene metode.

Za implementaciju tehnologije koristite metodu $.ajax ili jQuery.ajax:

$.ajax(properties) ili $.ajax(url [, svojstva])

Drugi parametar je dodat u verziji 1.5 jQueryja.

url - adresa tražene stranice;

svojstva - zatražite svojstva.

Za kompletnu listu opcija, pogledajte jQuery dokumentaciju.

U ovom vodiču koristimo nekoliko najčešće korištenih parametara.

uspjeh (funkcija) - ovu funkciju pozvan nakon što je zahtjev uspješno završen. Funkcija prima od 1 do 3 parametra (ovisno o verziji korištene biblioteke). Ali prvi parametar uvijek sadrži podatke koje vraća server.

podaci (objekt/string) - korisnički podaci koji se prosljeđuju na traženu stranicu.

dataType (string) - moguće vrijednosti: xml, json, script ili html. Opis tipa podataka koji se očekuje u odgovoru servera.

type (string) - tip zahtjeva. Moguće vrijednosti: GET ili POST. Podrazumevano: GET.

url (string) - URL za zahtjev.

Primjer 1

Jednostavan prijenos teksta.

$.ajax(( url: "response.php?action=sample1", uspjeh: funkcija(podaci) ( $(".rezultati").html(podaci); ) ));

Postoji .result div element za odgovor.

Čekamo odgovor

Server jednostavno vraća string:

Eho "Primjer 1 - prijenos uspješno završen";

Primjer 2

Korisničke podatke prosljeđujemo PHP skripti.

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

Server vraća string sa umetnutim prenesenim podacima:

Echo "Primjer 2 - prijenos uspješno završen. Parametri: ime = " . $_POST["name"] . ", nadimak= " . $_POST["nadimak"];

Primjer 3

Prijenos i izvršenje JavaScript kod

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

Server izvršava kod:

Echo "$(".results").html("Primjer 3 - Izvršavanje JavaScripta");";

Primjer 4

Koristimo XML. Primjer se može koristiti za rad sa eksternim XML-om, na primjer, RSS feedom.

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

Server bi trebao vratiti XML kod:

Header("Content-Type: application/xml; charset=UTF-8");

Pregled