Hlavní strana   Blog   Práce   Kontakty   Mapa stránek   Filmy  

Podkategorie

C++
Php
Java
JavaScript
Ruby on Rails
Vývoj pro iPhone
Databáze
OpenGL
Hardware
Software
Algoritmy
Technologie
Webdesign
Bezpečnost
Elektronika
Konference
VlastnÍ projekty
Jen tak mimochodem
Hry

Můžete mě sledovat:

          

Projekty

      

Novinky

Nové články
Nějakou dobu jsem psal blog na živě.cz a tomuto blogu se nevěnoval. Během několika dalších dnů budu některé články z blogu na živě.cz přesouvat sem, na tento blog. Bude se jednat hlavně o články, které obsahují zdrojové kódy, protože na živě není implementováno žádné rozšíření pro psaní kódu do článku.

Linkuj a TopClanky
Přidal jsem ke článkům odkazy na Linkuj.cz a TopClanky.cz. Pokud se vám článek líbí, tak to dejte najevo jeho zalinkováním.

Registrace
Dnes, 13.září, byla přídána možnost registrace.

jQuery: Examples 3 – Ajax

Několik příkladů pro použití technologie Ajax pomocí knihovny jQuery.

 

JavaScriptová knihovna jQuery disponuje množstvím funkcí, podporujících technologii Ajax, a jako obvykle nám práci s JavaScriptem velmi usnadňuje.

Load

První a nejjednodušší funkce, se kterou se v knihovně jQuery můžete setkat, je funkce Load. Jak už název funkce napovídá, funkce načítá data. Načítat data můžete do libovolného elementu ve stránce, pouhým voláním funkce nad elementem s příslušnými parametry.

Load obsahuje maximálně tři parametry, z nichž nejdůležitější je právě ten první, který určuje adresu, která bude pro load použita.

Druhý parametr je nepovinný a může obsahovat data, která budou spolu s požadavkem poslána na server. Poslední parametr je jako obvykle callback funkce.

Spolu s funkcí Load zmíním ještě funkce, které mohou být užitečné pro určité debugování Ajaxu v jQuery, a to jsou funkce pro jednotlivé události:

• ajaxComplete – provede se po dokončení požadavku
• ajaxError – provede se v případě nesplění požadavku
• ajaxSend – provede se při odeslání požadavku
• ajaxStart – provede se při startu požadavku (není stejný jako ajaxSend)
• ajaxStop – provede se po dokončení všech požadavků
• ajaxSuccess – provede se při úspěšném dokončení požadavků

Všechny tyto funkce obsahují jediný parametr a to callback funkci, která může například vypisovat stav provádění.

V příkladu si vytvoříme několik odkazů, na které po kliknutí nepřejdeme, ale pomocí knihovny jQuery je budeme načítat do elementu na stránce. Div s odkazy bude mít ID ajax_urls, abychom mohli jednoduše odlišit událost kliknutí pouze na tyto odkazy. Zjištěním jejich hodnoty atributu href můžeme provést načtením:

$("div#urls").load($(this).attr("href"));

Celý JavaScriptový handler může vypadat například takto:

$("div#ajax_urls a").click(function (){
        //load url   
        $("div#urls").load($(this).attr("href"));
        //return false - link is not clickable
        //set title value
        $("div#title").html( $(this).attr("title") );
        //simple animation :-)
        $("div#title").animate({ letterSpacing : 5 }).animate({ letterSpacing : 0 });
        //strike link
        $(this).css("text-decoration", "line-through");
        //return false
        return false;
});

Příklad můžeme doplnit o výpis stavu požadavku pomocí zmíněných funkcí:

    //ajax start event
    $("#msg").ajaxStart(function(){
        $(this).append("
Starting request
");
     });
…

Celý příklad může vypadat následně:

jQuery.get, jQuery.post

Na jednoduché načítání si sice vystačíte s funkcí Load, ale na pokročilejší požadavky vám určitě stačit nebude. Funkce sice umožňuje jednoduché odesílání dat, kromě samotného načtení, ale pro snadnější prácí nabízí jQuery rozšíření v podobě dvojice funkcí, které slouží primárně pro odesílání hodnot, a to metodou GET nebo POST, jak jejich názvy vypovídají. Obě funkce a jejich ovládání jsou identické, liší se pouze v použité metodě při odesílání.

Použití bude zřejmé na příkladu. Vytvoříme si jednoduchý formulář, který se bude pomocí Ajaxu a metody Get odesílat.

 

Vytvoříme si jednoduchý formulář s jedním inputem, který bude sloužit pro zadání čísla. Toto číslo se odešle na server, který jej následně zpracuje (v našem případě zformátuje pomocí number_format) a vrátí zpět.

 

JavaScriptová část bude velmi jednoduchá. Musíme načíst hodnotu z inputu po odeslání formuláře a tuto hodnotu pomocí Ajaxu odešleme na server (pomocí metody GET). Výsledek, který server vrátí zpracujeme pomocí callback funkce:

$("form").submit( function(){
    //value from input
    var number = $("input[name='number']").val(); 
    
    //send form
    $.get("format.php", {number: number}, function ( data ){
        //callback function
        $("div#numbers").append(number + " : " + data + '
');
    }, ‘html’);
    //stop
    return false;
});

Div „numbers“ obsahuje výsledné hodnoty zformátovaného čísla.

Serverová část pouze zpracuje vstupní hodnotu z pole GET:

if( (int)$_GET['number'] == 0 )
{
    die('Please enter number (!= 0)');    
}
die( number_format( (int)$_GET['number'], 2, ', ', ' ') );

Důležité je zde použití funkce $.get, která obsahuje čtyři parametry:

• volaný soubor pro zpracování parametrů
• odesílaná data se správnou strukturou (name: value)
• callback funkce
• udává typ dat: xml, html, …, které jsou vráceny callback funkcí. Parametr je nepovinný

Celý příklad si můžete zobrazit zde:

jQuery.ajax

Pokud si nevystačíte ani s funkcemi get a post, můžete využít této globální funkce, která je základem pro celé zpracování Ajaxu v jQuery a nabízí velké možnosti nastavení.

Funkce má jeden jediný parametr – options, který umožňuje zadávat nastavení pro zpracování metodou klíč: hodnota.

Opět vysvětlím na jednoduchém příkladu:

$('a').click(function(){
    $.ajax({
      type: "GET",
      url: "test.php",
    });    
    return false;
});

V tomto případě je vytvořena událost pro kliknutí na odkazy. V případě že bude na odkaz kliknuto, skript odešle požadavek na soubor test.php, což je nastaveno klíčem url, metodou get – klíč type.

Klíčů, kterými můžete nastavení Ajaxu ovlivnit je velké množství, uvedu alespoň ty nejdůležitější:

Klíč	Hodnota
url:	Url adresa požadavku.
type:	typ odesílaných dat (GET, POST). Hodnota ‚GET je výchozí.
success:	funkce volaná po vykonání požadavku. Funkce může obsahovat dva parametry: data vrácená požadavkem status vykonání ajaxu
dataType:	typ dat, vrácených serverem (xml, html, json, …)
data:	data odsílaná na server, podobně jako u funkce post a get.
beforeSend:	možnost definování funkce před odesláním
cache:	možnost nastavení cache – true/false

Klíče a možné hodnoty v $.ajax

Můžeme si opět vytvořit jednoduchý příklad, kde si funkčnost ukážeme.

Ukázkový příklad bude obsahovat jeden select, ve kterém budeme mít možnost vybrat si z několika hodnot, po vybrání možnosti kliknutím na odkaz možnost zvolíme a odešleme požadavek na server. Jako hodnota $_GET[‘name’] budeme chtít, aby serveru byla odeslána hodnota z našeho selectu.

V poslední fázi vypíšeme vrácená data:

$('a').click(function(){
    var OptionValue = $("select[name='themes']").val();
    
    $.ajax({
      type: "GET",
      url: "goImage.php",
      cache: false, 
      data: "name=" + OptionValue,
      dataType: "html", 
      beforeSend: function(){
        alert("Loading image");                  
      }, 
      success: function(data){
        $("#ImageTheme").html(data);
      }
    });    
    return false;
});

Nejprve jsme si zjistili hodnotu ze selectu, který má name themes. Následně odešleme náš požadavek.

V nastavení si nastavíme metodu GET (nemusíme nastatovat, je výchozí), url adresu pro odeslání požadavku, odesílaná data a typ navrácených dat.

Jako rozšíření jsme vytvořili funkci pro událost beforeSend, která se volá před samotným odesláním požadavku a nakonec funkci pro success, která se volá po dokončení požadavku.

Na serveru dle hodnoty v selectu (1-4) vrátíme obrázek dle této hodnoty:

switch( (int)$_GET['name'] )
{
    case 1: die('');
    case 2: die('');
    case 3: die('');
    case 4: die('');
    default: die('Select optoin');
}

Celý příklad si můžete zobrazit zde

Závěrem

jQuery nabízí pro využití technologie Ajax mnohem více. Tří příklady uvedené v tomto článku jsou pouze základní použití, detailnější informace zmíním příště.