Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další




(9) Ajax

Kategorie: Ajax

Co je to AJAX?

AJAX je technologie umožňující posílat data na server a taky je přijímat bez nutnosti opětovného načítání, jak tomu je u klasického řešení. JQuery nabízí řadu funkcí zjednodušujících tuto technologii. Bez jQuery, za použití čistého javascriptu, bylo potřeba psát kód dlouhý několik desítek řádků. Nám stačí napsat jeden řádek a uděláme to stejné.

Funkce pro AJAX

První funkcí, kterou představím, je funkce load(). S její pomocí načteme do vybraného prvku/vybraných prvků obsah souboru ze serveru.

$("#sem_nacteme").load("cesta/k.souboru");

Funkci také můžeme použít s callback parametrem.

$("#sem_nacteme").load("cesta/k.souboru", function() {
    alert('Načteno');
});
// po úplném načtení souboru se zobrazí okno s nápisem
// Načteno 

Také můžeme načíst pouze část souboru v případě, že načítáme HTML soubor. V tom se orientujeme pomocí selektorů.

$("#sem_nacteme").load("cesta/k.souboru #leve_menu a",
     function() {
          alert('Načteno');
     }
);

V případě, že je to potřeba, můžeme odchytit chyby, které nastaly při načítání souboru.

$("#sem_nacteme").load("cesta/k.souboru #leve_menu a", 
 function(response, status, xhr) {
 // status - v případě, že nastane chyba, bude mít hodnotu "error"
 // xhr - informace o chybě
 if(status == "error") // když nastala chyba
 {                                                                  
 alert("Nastala chyba číslo: "+xhr.status+" - "+xhr.statusText);
 // xhr.status - číslo chyby
 // xhr.statusText - textový popis chyby, třeba error  
 // Not Found - nenalezeno, Acces denied - přístup odepřen apod.
 } else {
  alert('Načteno');}
});

Taky s funkcí load můžeme data na server poslat a zpracovaný výsledek načíst na stránku.

$("#sem_nacteme").load(
  "soubor.php", 
  { 'to co posíláme na server' } 
);

Pro tuto akci však musíte umět pracovat s PHP. Pokud PHP neumíte, AJAX plně nevyužijete (pokud vám PHP část někde neudělá a neřekne vám, jaké data máte kam posílat). Další funkcí, kterou uvedu, je getScript(). Ta načte skript ze serveru a poté ho spustí.

$.getScript("cesta/k.souboru");

Opět můžeme použít callback funkci jako parametr.

$.getScript("cesta/k.souboru", function(){
  alert("Skript byl načten a spuštěn!");
});

Obě funkce byly zkrácenou verzí funkce ajax(), podobně jako tomu bylo u událostí sbind().

$.ajax({
  url: "cesta/k.souboru",
  dataType: 'script',
  success: function(){
  alert("Skript byl načten a spuštěn!");
});
  // načtení a spuštění skriptu pomocí obecné funkce pro AJAX

Teď uvedu příklad načtení HTML souboru funkcí ajax(), podobně jako na začátku funkcí load().

$.ajax({
  url: "cesta/k.souboru",
  dataType: 'html',
  success: function(){      // po dokončení...
       alert("Skript byl načten a spuštěn!");
});

Parametr dataType může nabývat hodnot html, text, xml, script, json a jsonp. Pokud nepotřebujete nějakou speciální akci, vystačíte si se zkrácenými verzemi této funkce. Další zkrácenou funkcí je get(), která na server odešle data pomocí metodyget.

// jQuery část
$.get('test.php', {jmeno: "Pepa", prijmeni: "Novak"});
// odešle pomocí metody get PHP skriptu test.php dvě
// proměnné, jmeno a prijmeni 

// PHP část       
$jmeno = $_GET['jmeno'];
$prijmeni = $_GET['prijmeni'];
// Přijmutí proměnných v PHP pomocí metody GET

Callback funkce se používá stejně jako v ostatních případech, takže příklad myslím není potřeba. Podobná je funkce post(), se kterou se pracuje stejně. Rozdíl je pak v PHP části, kde je potřeba GET přepsat na POST.

// PHP část       
$jmeno = $_POST['jmeno'];
$prijmeni = $_POST['prijmeni'];
// Přijmutí proměnných v PHP pomocí metody POST

Další funkce, podobná funkcím load() a getScript(), je funkce getJSON(). Získáváme s ní soubory, které jsou formátovány podle určitých pravidel, na která se můžete podívat na oficiálních stránkách. Protože JSON nepoužívám, použiji příklad zkopírovaný ze jquery.com.

$.getJSON('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});
// Načte JSON dokument ze serveru
// ve parametru callback funkce (data)
// představuje data, která jsme načetli

Nastavení výchozích hodnot

JQuery nabízí funkci pro nastavení základních hodnot parametrů pro budoucí použitíAJAXu.  Pokud třeba stahujete jeden soubor pořád dokola, je dobré nastavit ho jako výchozí hodnotu parametru s adresou. Nastavíme to pomocí funkceajaxSetup().

$.ajaxSetup({                  
     url: "http://cesta.k/souboru.x"
});
// Výchozí adresa pro všechny funkce pro AJAX,
//   pokud nebude předána jako parametr.

AJAX a události

Události vztahující se k AJAXu děíme na dvě části - globální a lokální. Lokální události jsou funkce, které jsem už uvedl jako callback funkce, vztahující se ke konkrétnímu volání AJAXu. Globální se, narozdíl od lokálních, nevztahují ke konkrétnímu volání AJAXu, ale ke všem AJAXovým volání u vybraných prvků.

Lokální události

Tak na ukázku vyberu třeba událost beforeSend, která zajistí provedení akce bezprostředně před požadavkem AJAXu (př. load(), get()...). Jedná se o lokální funkci, takže kód bude vypadat následovně.

 $.ajax({    // obecná AJAXová funkce
   beforeSend: function(){
     // Tady bude kód, který chceme 
     // provést před voláním AJAXu.
   }
 });

Na jeden požadavek můžeme zavěsit více lokálních událostí. Abych to mohl demonstrovat na ukázce, musíme se naučit další lokální událost. Kód napsaný u události error se provede, když se někde stane chyba a požadavek nemohl být dokončen.

$.ajax({    // obecná AJAXová funkce
   beforeSend: function()
   {
     // Tady bude kód, který chceme 
     // provést před voláním AJAXu.
   },

   error: function()
   {
     // co se provede, když se něco pokazí 
     // a volání bude neúspěšné
   }
   // a takhle můžeme pokračovat dál...
  
});
 

Z lokálních událostí už zbývají jenom dvě. První je událost success, která se zavolá, když vše proběhlo v pořádku, vzájemně se vylučuje s error. Poslední je complete, která se zavolá v okamžiku přerušení nebo dokončení volání. Vrací výsledek, jestli vše proběhlo v pořádku nebo jestli nastala chyba. V podstatě zahrnuje událost errora success.

Globální události

Jaký je rozdíl mezi globální a lokální událostí již víte, takže se vrhneme na ukázky kódu a popisování událostí. První, kterou uvedu, je ajaxSend. Je to obdoba lokální události beforeSend. Používá se takhle.

$("#prubeh").bind("ajaxSend", function(){
     $(this).text("Za chvíli startujeme.");
});
 

Zavěšení událostí pomocí bind, už umíme, pokud ne, můžete si to zopakovat zde. Když se něco stane s AJAXem a divem prubeh, třeba do něj budeme načítat data ze serveru, tak se před začátkem tohoto AJAXového volání spustí kód zavěšený na událost ajaxSend. Následuje přehled všech globálních událostí.

  • ajaxSuccess - obdoba success
  • ajaxError - obdoba error
  • ajaxComplete - obdoba complete
  • ajaxStop - když neběží žádné AJAXové volání
  • ajaxStart - při startu AJAXového volání

Pochopitelně na vybrané prvky lze zavěsit více událostí.

$("#prubeh")
  .bind("ajaxStart", function()
   {
     $(this).text("Začínáme!");
   })
  .bind("ajaxComplete", function()
   {
     $(this).text("Končíme!");
   });

Zobrazit diskuzi