jQuery - metoda ajax()
Metoda ajax() se foloseste pentru a efectua o cerere AJAX (asynchronous HTTP) la server.
Toate functiile Ajax jQuery: load(), get(), post(); folosesc metoda ajax(). Aceasta contine mai multe optiuni de configurare si prelucrare a datelor, iar sintaxa ei este mai complexa.
Sintaxa:
$.ajax({ nume:valoare, nume:valoare, ...})- Parametrii reprezinta una sau mai multe perechi nume:valoare, care configureaza cererea Ajax. Sunt prezentati mai jos, dar mai intai iata un exemplu simplu cu o cerere Ajax prin POST:
$.ajax({
type: 'POST',
url: 'script.php',
data: 'nume=un_nume&id=un_id',
success: function(raspuns){
$('#result').html(raspuns);
}
});Datele: "nume=un_nume&id=un_id" sunt trimise pe server la "script.php" prin POST, apoi, raspunsul de la server e adaugat intr-un element HTML (cu id="result").
Optiuni pentru jQuery Ajax
Iata cateva optiuni (perechi nume/valoare) ce pot fi utilizate pentru configurarea cererii Ajax.
- "xhr" reprezinta obiectul XMLHTTPRequest.
async - o valoare Booleana (true sau false), care seteaza daca cererea trebuie facuta asincron sau nu (prestabilit: true). Cererile intre domenii diferite sau cu dataType:"jsonp"; nu suporta operatii sincron (simultane).
$.ajax({
url: "file.php",
async: false
});beforeSend(xhr) - o functie care sa fie executata inainte de trimitere cerere. Poate fi utilizata si pentru definirea de headers care sa fie transmise.
$.ajax({
url: "file.php",
beforeSend: function() {
xhr.setRequestHeader("Accept", "text/javascript");
$('#resp').html('Loading...');
},
success: function(raspuns){
$('#resp').html('raspuns');
}
}); cache - o valoare Booleana care indica browser-ului daca sa adauge sau nu in cache pagina accesata (prestabilit: true, si false pt. dataType 'script' sau 'jsonp').
$.ajax({
url: "file.html",
cache: false
});complete(xhr, status) - o functie care va fi executata dupa ce e trimisa cererea (dupa executia functiilor de la 'success' si 'error').
$.ajax({
url: "file.php",
complete: function() { alert('Trimis complet'); }
}); contentType - tipul de continut utilizat la trimiterea de date la server (prestabilit: 'application/x-www-form-urlenecodd').
$.ajax({
type: "POST",
url: "file.php",
data: "{'nume1':'valoare', 'nume2':'valoare'}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}); context - specifica valoarea lui "this" pentru functiile legate de rezultatul AJAX returnat.
$.ajax({
url: "file.php",
context: $('#idd'),
success: function(){
$(this).html('Succes'); // this va fi "#idd"
}
});data - datele care vor fi trimise la server. Sunt transformate in sir (string).
$.ajax({
type: "GET",
url: "file.php",
data: "id=78&nume=un_nume"
}); dataFilter(data, type) - o functie utilizata pentru a gestiona datele de raspuns din obiectul XMLHttpRequest. Este o functie de pre-filtrare a raspunsului. Functia accepta doua argumente: "data" (datele returnate de server), "type" (dataType - tipul de date).
$.ajax({
url: "file.php",
data: {'json':'datas'},
contentType: "application/json; charset=utf-8",
dataFilter: function(data) {
var resp = eval('(' + data + ')');
return resp;
},
success: function(raspuns, status, xhr){
$('#idd').html(raspuns.property);
}
}); dataType - Tipul de date asteptat ca raspuns de la server.
"xml": Returneaza un document XML ce poate fi procesat prin jQuery.
"html": Returneaza cod HTML; scripturile JavaScript incluse in acest cod sunt evaluate la adaugarea in DOM.
"script": Evalueaza raspunsul ca pe un cod JavaScript si-l returneaza sub forma de text.
"json": Evalueaza raspunsul ca tip JSON si returneaza obiectul JavaScript continut in acel format JSON.
"jsonp": Incarca intr-un JSON folosind JSONP.
- Daca nu e specifcat nici un tip, jQuery va stabili dataType in functie de tipul MIME din raspuns.
$.ajax({
// Incarca si executa un fisier JavaScript
type: "GET",
url: "file.js",
dataType: "script"
}); error(xhr, status, error) - functie care sa fie executata in caz ca apare vreo eroare la cererea Ajax.
$.ajax({
url: "file.php",
error: function(xhr, status, error) { alert(error); }
}); global - o valoare Booleana ce specifica daca va declansa sau nu evenimentele Ajax (prestabilit: true). Setati ''false'' daca vreti sa opriti declansarea evenimentelor precum ajaxStart sau ajaxStop.
$.ajax({
url: "file.php",
global: false,
success: function(msg){
alert(msg);
}
}); headers - perechi tip/valoare cu headere aditionale care sa fie trimise la server. Acestea se adauga inainte de functia beforeSend; de fapt, orice valoare din optiunea "headers" poate fi rescrisa in functia de la beforeSend.
$.ajax({
headers: { "Content-Type": "application/json", "Accept": "application/json" },
type: "POST",
url: "file.php",
data: {'json': 'data'},
dataType: "json",
success: function(json){
// do something...
}
}); ifModified - o valoare Booleana, daca e setata true, determina cererea sa fie considerata "success" doar daca raspunsul s-a modificat de la ultima cerere. Aceasta se realizeaza prin verificarea ultimului header modificat (prestabilit: false).
$.ajax({
url: "file.php",
ifModified: true,
success: function(data, status){
if(status!="notmodified") {
$("#display").append(data);
}
}
}); jsonp - un nume care retine sirul transmis in format JSON (adaugat in "data"). Acest nume va fi utilizata in loc de 'callback', ca parte din sirul ce reprezinta adresa URL ('callback=?'). Astfel, {jsonp:'onJSONPLoad'} va rezulta in 'onJSONPLoad=?', transferat la server.
// jQuery va schimba adresa URL ca sa contina &jsonp=jsonpmethod
$.ajax({
dataType: 'jsnp',
data: 'id=10',
jsonp: 'jsnp',
url: "file.php",
}); password - un sir cu o parola utilizata pentru acces HTTP ce necesita autentificare.
usernume - un sir cu un nume utilizata pentru acces HTTP ce necesita autentificare.
$.ajax({
url: "file.php",
usernume: 'nume',
password: 'parola',
success: function(raspuns){
$("#display").html(raspuns);
}
});processData - o valoare Booleana care specifica daca datele transmise la server trebuie sau nu transformate in sir (prestabilit: true). Daca vreti sa trimiteti un document DOM (precum XML), setati false aceasta optiune.
// trimite un document XML la server
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: function(raspuns){
$("#display").html(raspuns);
}
}); scriptCharset - determina cererea sa fie interpretata cu un anumit set de caractere. Numai pentru date transmise cu dataType "jsonp" sau "script", si prin "GET".
$.ajax({
type: "GET",
url: "file.php",
scriptCharset: "utf-8",
contentType: "application/x-www-form-urlenecodd; charset=UTF-8",
data: "id=12&nume=un_nume",
success: function(raspuns){
$("#idd").html(raspuns);
}
}); statusecod - un set cu percechi numar: function(), unde numar e un cod HTML, iar function() e functia care va fi executata cand raspunsul are acel cod.
// alert cand raspunsul are codul HTML 404
$.ajax({
url: "file.php",
statusecod: {
404: function() {
alert('pagina nu e gasita');
}
}
});success(raspuns, status, xhr) - o functie ce va fi executata cand cererea Ajax returneaza "success" in parametru "status".
$.ajax({
url: "file.php",
data: 'id=un_id',
success: function(raspuns, status, xhr){
if(status=="success") {
$("#display").html(raspuns);
}
else { alert(status+ ' - '+ xhr.status); }
}
}); timeout - seteaza un timp local de expirare (in milisecunde) in care cererea Ajax poate astepta raspunsul de la server.
// asteapta raspunsul maxim 3000 milisecunde
$.ajax({
url: "file.php",
timeout: 3000,
success: function(){
$("#response").text('Success');
}
});type - tipul prin care sunt transmise datele: GET sau POST (prestabilit: GET). Se pot folosi si alte tipuri, adaugate in HTML5: PUT si DELETE.
$.ajax({
type: "POST",
url: "file.php",
data: 'nume=un_nume&pass=parola',
success: function(raspuns){
$("#idd").text(raspuns);
}
}); url - un sir cu adresa URL la care e trimisa cererea Ajax (prestabilit: pagina curenta).
$.ajax({
url: "file.php",
success: function(raspuns){
$("#idd").text(raspuns);
}
});Exemplu script jQuery Ajax - PHP
Sa vedem un exemplu complet cu ajax() si PHP.
Se creaza o pagina web cu un formular ce contine o caseta text pentru nume, o lista
<select> cu optiuni si un
textarea pt. comentarii.
Cand userul trimite formularul, se foloseste jQuery Ajax pentru a trimite datele din formular la un script PHP (intr-un fisier denumit
script.php) care va procesa datele si returneaza un sir cu cod HTML. Daca cererea este efectuata cu succes, raspunsul de la scriptul PHP va fi inclus intr-un <div> (cu id="resp"), fara reincarcarea paginii. In caz de eroare, va fi afisata o fereastra Alert cu acea eroare.
Iata codul pt. scriptul PHP, apoi pt. pagina cu jQuery Ajax (pt. mai multe detalii, vedeti comentariile din coduri).
Fisierul script.php
<?php
// defineste un Array cu adrese pt diferite cursuri
$crs = array(
'altu'=>'',
'php-mysql'=>'php-mysql',
'javascript'=>'javascript',
'actionscript'=>'flash/actionscript-3_e',
'jquery'=>'javascript/curs-jquery-tutoriale-js'
);
// verifica daca sunt date trimise prin POST, cu iindice "nm", "cs", si "cmt"
if(isset($_POST['nm']) && isset($_POST['cs']) && isset($_POST['cmt'])) {
$_POST = array_map("strip_tags", $_POST); // sterge posibile tag-uri din POST
// preia datele
$nm = $_POST['nm'];
$cs = $_POST['cs'];
$cmt = $_POST['cmt'];
// defineste o variabila ce va contine raspunsul returnat de script
$rehtml = '<h4>Hy '. $nm. '</h4> Link-ul pentru Curs <b>'. $cs. '</b>: <a href="http://www.skilledg.com/'. $crs[$cs]. '">'. $cs. '</a><br />Comentariul dv.: <i>'. $cmt. '</i>';
}
else $rehtml = 'Date nevalide';
echo $rehtml; // returneaza raspunsul
?>Pagina cu codul HTML si jQuery
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax - PHP</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
// cand formularul "#crs" e trimis
$('#crs').submit(function() {
// preia datele din formular
var nm = $('#crs #nm').val();
var cs = $('#crs #cs').val();
var cmt = $('#crs #cmt').val();
// pune date din formular in format JSON, care va fi trimis la server
var data_json = {'nm':nm, 'cs':cs, 'cmt':cmt};
// seteaza functia ajax() sa trimita datele prin POST la "script.php"
// daca apare vreo eroare, afiseaza o fereastra Alert cu starea cererii (xhr.status) si eroarea
// la "success", plaseaza raspunsul intr-un element HTML cu id="resp"
$.ajax({
type: 'post',
url: 'script.php',
data: data_json,
beforeSend: function() {
// inainte sa trimita cererea, afiseaza o notificare de "Incarcare..." messaj in locul unde va fi adaugat raspunsul
$('#resp').html('Incarcare...');
},
timeout: 10000, // seteaza timpul de expirare (10 secunde)
error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },
success: function(raspuns) { $('#resp').html(raspuns); }
});
return false; // necesar ca sa nu deschida pagina cu adresa din formular cand e trimis
});
});
--></script>
</head>
<body>
<div id="resp"></div>
<h4>Completati formularul:</h4>
<form action="script.php" method="post" id="crs">
Nume: <input type="text" name="nm" id="nm" /><br />
Curs: <select name="cs" id="cs">
<option value="altu">Altu</option>
<option value="php-mysql">PHP-MySQL</option>
<option value="javascript">JavaScript</option>
<option value="actionscript">ActionScript</option>
<option value="jquery">jQuery</option>
</select><br />
Comentarii:<br />
<textarea name="cmt" id="cmt" cols="20" rows="3"></textarea>
<input type="submit" value="Trimite" />
</form>
</body>
</html>