jQuery Ajax - metoda load()

AJAX e acronimul de la Asynchronous JavaScript And XML, e o tehnica pentru creare dinamica si rapida a paginilor web, sau parti din continutul lor.
Ajax permite trimiterea de date la server si prelucrarea raspunsului returnat de server fara reincarcarea paginii sau deschiderea altei pagini.
jQuery are mai multe metode (functii) pentru AJAX. In acest tutorial e prezentata metoda load().

Metoda load()

Metoda load() e o functie AJAX simpla prin care se incarca date de la server si pot fi incluse in pagina web.
Sintaxa:

$('element').load(url, data, complet)

- url - specifica adresa URL la care se trimite cererea.
- data - (optional) un sir cu date care sunt trimise la script-ul de pe server.
- complet - (optional) o functie executata dupa ce s-a efectuat trimiterea cererii. Are trei parametri optionali (response, status, xhr).
• response - contine raspunsul de la server.
• status - contine starea cererii, unul din sirurile: "success", "notmodified", "error", "timeout", sau "parsererror".
• xhr - contine obiectul XMLHttpRequest.

Pentru motive de securitate, fisierul la care se face cererea AJAX trebuie sa fie pe acelasi domeniu ca si pagina in care e scriptul Ajax.

Iata un exemplu simplu. Mai intai se creaza un continut HTML intr-un fisier extern pe server, denumit extern.html.

Fisierul extern.html

<h2>Continut in extern.html</h2>
<div id="cnt">Exemplu jQuery Ajax, metoda load().
<p>Un continut text in extern.html</p></div>

Apoi creem o pagina web simpla (denumita test.html, in acelasi director), cu un link si un <div> in care vor fi adaugate datele incarcate de la "extern.html", cand se apasa pe link.

Pagina test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax Test</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se apasa pe un link cu class="lnk", preia adresa din "href"
  // preia continutul de la acea adresa si-l include in tag-ul cu id="content"
  $('a.lnk').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
    return false;
  });
});
--></script>
</head>
<body>
<h1>Pagina Web test.html</h1>
<a href="extern.html" title="Get extern" class="lnk">Get extern</a>
<div id="content">Continutul initial in test.html</div>
</body>
</html>

Cand se da click pe un link cu class="lnk", preia adresa URL din atributul "href" (cu .attr('href') ) si o adauga la functia load(), care va incarca datele de la acea adresa URL si le adauga in tag-ul cu id="content".
Instructiunea return false; e folosita ca sa nu lase browser-ul sa deschida pagina cand link-ul e apasat.
Acest exemplu va afisa urmatorul rezultat (apasati pe link-ul de mai jos):

Pagina Web test.html

Get extern

Continutul initial in test.html

Dupa cum se observa, metoda load(url) a adaugat tot continutul din "extern.html" in <div id="content">, fara sa se reincarce sau sa se deschida vreo pagina.
Daca continutul incarcat e prea mare si comunicarea cu serverul dureaza mult, in acest timp utilizatorul nu stie ce se intampla. De aceea este util sa adaugati o notificare de "Incarcare...".
De asemenea, se pot adauga in pagina doar anumite elemente din continutul incarcat, prin includerea selectorului ca parte din sirul cu adresa URL.
Sintaxa pentru adaugare notificare de "Incarcare..." si selector in sirul cu adresa URL e aceasta:

$('element').html('Incarcare...').load('url selector')

- Adresa "url" si "selector" trebuie sa fie separate printr-un spatiu, in acelasi sir.

Iata un exemplu. Se preia acelasi contiut din fisierul "extern.html", dar in pagina va fi adaugat doar paragraful care e in tag-ul <div> cu id="cnt".

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax Test</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se apasa pe un link cu class="lnk", preia valoarea din "href"
  // adauga o notificare de "Incarcare...", incarca continutul de la acea adresa URL
  // preia si adauga in tag-ul cu id="content" doar paragraful din #cnt
  $('a.lnk').click(function() {
    var url = $(this).attr('href');
    $('#content').html('<h4>Incarcare...</h4>').load(url+ ' #cnt p');
    return false;
  });
});
--></script>
</head>
<body>
<h1>Pagina Web test.html</h1>
<a href="extern.html" title="Get extern" class="lnk">Get extern</a>
<div id="content">Continutul initial in test.html</div>
</body>
</html>

Demo:

Pagina Web test.html

Get extern

Continutul initial in test.html

Daca procesul de incarcare e rapid, nu veti vedea notificarea "Incarcare...". Aceasta e utila cand functia load() acceseaza un script de pe server (precum PHP) care proceseaza informatiile si returneaza un raspuns, lucru care poate dura mai mult.
- Adresa URL poate fi si de forma: file.php?id=valoare

Incarcare cu Ajax rasuns de la un script PHP

Se poate folosi metoda jQuery load() pentru a incarca un continut HTML returnat de un script de pe server (PHP, ASP), precum si sa trimita date care sa fie prelucrate pe server.
In acest caz se foloseste inca un parametru (data) in metoda load():

$('element').load('script.php', data)

- data - poate sa contina un sir cu perechi "indice=valoare", separate prin "&", care va fi trimis prin GET. Sau poate sa contina un obiect (de tip JSON). Daca "data" contine un obiect, metoda de trimitere e POST.

Sa vedem un exemplu. Se incarca raspunsul returnat de un fisier PHP, denumit "script.php", care contine urmatorul cod:

Fisierul script.php

<?php
// verifica daca sunt trimise date prin GET, cu indice "pag"
if(isset($_GET['pag'])) {
  $pag = strip_tags($_GET['pag']);       // preia datele si sterge posible tag-uri

  // defineste un continut HTML in functie de valoarea lui $pag
  if($pag=='php') {
    $rehtml = '<b>Cursuri si tutoriale PHP-MySQL:</b> <u>www.coursesweb.net/php-mysql/</u>';
  }
  else if($pag=='ajax') {
    $rehtml = '<b>Curs AJAX:</b> <u>marplo.net/ajax/</u>';
  }
  else {
    $rehtml = '<b>Cursuri gratuite Web Development:</b> <u>marplo.net</u>';
  }

  echo $rehtml;        // returneaza valoarea lui $rehtml
}
else {
  // daca nu e $_GET cu indice "pag", returneaza un mesaj de eroare
  echo 'Eroare: date nevalide.';
}
?>

- Explicatiile necesare pentru acest script sunt in cod.

Acum se creaza pagina web cu codul jQuery care va accesa fisierul "script.php" prin Ajax.
Contine un formular cu un Select (cu trei optiuni), un buton Submit si un <div> unde va fi adaugat continutul incarcat de la "script.php", dupa ce utilizatorul trimite datele din formular.
Datele care vor fi trimise la scriptul PHP contin valoarea selectata in lista Select. Pentru mai multe detalii, vedeti comentariile din cod.

<!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 utilizatorul trimite formularul
  $('form').submit(function() {
    var url = $(this).attr('action');       // preia adresa URL din "action", a formularului trimis

    // defineste datele ce vor fi trimise prin GET la PHP
    // cu indice "pag" si optiunea selectata in <select> (cu id="pag")
    var data = 'pag='+ $('#pag').val();

    // adauga notificare de "Incarcare..." si incarca continutul de la adresa URL (transferand datele)
    // raspunsul de la scriptul php il adauga in tag-ul cu id="content"
    $('#content').html('<h4>Incarcare...</h4>').load(url, data);
    return false;
  });
});
--></script>
</head>
<body>
<div id="content">Continut initial ...</div>
<form action="script.php" method="get">
 Selecteaza curs:
 <select name="pag" id="pag">
  <option value="altu">Altu</option>
  <option value="php">PHP</option>
  <option value="ajax">Ajax</option>
 </select>
 <input type="submit" id="submit" value="Trimite" />
</form>
</body>
</html>

Alegeti o optiune din lista si apasati butonul "Trimite":

Continut initial ...

Daca vreti sa trimiteti mai multe valori la scriptul PHP, adaugati-le intr-un sir cu perechi "indice=valoare" separate de "&":

var data = 'id=val1&name=val2&pag=val3';

Daca vreti sa trimiteti un Array, sau un obiect, folositi sintaxa JSON (datele vor fi trimise prin POST):

var data = { 'array[]': ["valoare1", "valoare2", "valoare3"] };

Verificare stare si erori la cererea Ajax

Metoda load() are un al treilea argument, care e o functie cu trei parametri:

$('element').load(url, data, function(raspuns, status, xhr){
  // cod ce trebuie executat dupa ce cererea Ajax e trimisa
})

- raspuns - contine rezultatul returnat de server.
- status - contine starea cererii, unul din sirurile: "success", "notmodified", "error", "timeout", sau "parsererror".
- xhr - contine obiectul XMLHttpRequest. Ca sa obtineti starea din acest obiect, se aplica xhr.status , sau xhr.statusText

Cu parametru "status" se poate verifica daca datele au fost trimise cu succes, sau a aparut vreo eroare. Astfel, se pot executa diferite instructiuni in functie de "status".

Sa vedem cum se lucreaza cu parametru "status".
In urmatorul exemplu sunt doua link-uri, unul catre fisierul "script.php" (creat in exemplu de mai sus), iar celalalt catre un fisier inexistent (nofile.php).
Daca parametru status are valoarea "success", preia raspunsul de la server, altfel, daca valoarea este "error", seteaza un mesaj de eroare.
Raspunsul de la server, sau mesajul de eroare vor fi adaugate intr-un <div> cu id="content".

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax - verificare status</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se apasa un link cu class="lnk", preia adresa URL din "href"
  // incarca raspunsul de la acel URL si verifica "status"
  // include raspunsul sau mesajul de eroare in tag-ul cu id="content"
  $('a.lnk').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url, function(raspuns, status, xhr) {
      // verifica "status", daca e "success", pune "raspuns" in #content
      // daca e "error", defineste un mesaj de eroare si-l afiseaza in #content
      // altfel, afiseaza un Alert cu valoarea lui "status"
      if(status=='success') {
        $('#content').html(raspuns);
      }
      else if(status=='error') {
        var ermsg = '<i>Eroare: '+ xhr.status+ ' '+ xhr.statusText+ '</i>';
        $('#content').html(ermsg);
      }
      else { alert(status); }
    });
    return false;
  })
});
--></script>
</head>
<body>
<h2>Exemplu jQuery Ajax</h2>
<div id="content">Continut initial...</div>
<a href="script.php?pag=ajax" title="link to script.php" class="lnk">Link la script.php</a>
<a href="nofile.php" title="link to nofile.php" class="lnk">Link la nofile.php</a>
</body>
</html>

- Expresia: else { alert(status); } este adaugata pentru cazuri cand parametrul "status" are o valoare diferita de "success" sau "error".
Click pe urmatoarele doua link-uri ca sa vedeti rezultatul:

Exemplu jQuery Ajax

Continut initial...

Link la script.php Link la nofile.php

<<-jQuery - legare mai .. -- jQuery metoda ajax()->>

jQuery Ajax - metoda load()

Curs Javascript

Metoda load()

Fisierul extern.html

Pagina test.html

Incarcare cu Ajax rasuns de la un script PHP

Fisierul script.php

Verificare stare si erori la cererea Ajax

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month