Krátký úvod do používání AJAX s využitím frameworku jQUERY.
AJAX umožňuje výměnu dat se serverem a aktualizaci definovaných částí webové stránky - bez opětovného načtení celé stránky.
Co je AJAX?
AJAX = Asynchronní JavaScript a XML.
Ve zkratce: AJAX je o načítání dat na pozadí a jejich zobrazení na webové stránce, aniž by se načítala celá stránka.
Příklady aplikací využívajících AJAX: karty Gmail, Google Maps, Youtube a Facebook.
A co jQuery a AJAX?
jQuery poskytuje několik metod pro práci s AJAX.
Pomocí metod jQuery AJAX si můžete vyžádat text, HTML, XML nebo JSON ze vzdáleného serveru pomocí protokolu HTTP Get i HTTP Post - a můžete načíst externí data přímo do vybraných prvků HTML webové stránky!
Bez jQuery může být kódování AJAX trochu složitější!
Psaní běžného kódu AJAX může být trochu složitější, protože různé prohlížeče mají pro implementaci AJAX odlišnou syntaxi. To znamená, že by se měl napsat další kód pro testování různých prohlížečů. jQuery ovšem umožňuje napsat funkčnost AJAX pouze s jedním řádkem kódu.
Metoda jQuery load()
Metoda jQuery load() je jednoduchá, ale výkonná metoda AJAX.
Metoda load() načte data ze serveru a předá je do vybraného prvku.
Syntax:
$(selector).load(URL,data,callback);
Požadovaný parametr adresy URL určuje adresu výkonného souboru, kterou chcete načíst. Může se jednat o dynamicky generovaný soubor v libovolném jazyce - PHP, ASP, JSP, HTML, JSON, TXT atd.
Nepovinný datový parametr určuje sadu párů klíč / hodnota dotazového řetězce, které se mají odeslat spolu s požadavkem.
Volitelný parametr zpětného volání je název funkce, která má být provedena po dokončení load() metody.
Zde je obsah našeho vzorového souboru: "demo_test.txt":
<h2>jQuery a AJAX je fajn!!!</h2>
<p id="p1">Toto je text v odstavci. Zde může být libovolný text v kombinaci s HTML značkami.</p>UPOZORNĚNÍ:
Při testování funkčnosti AJAX je nutné umístit všechny soubory na nějaký webový server. Spuštění nelze provádět v offline režimu. Nelze ani mít spouštěcí soubor na lokálním počítači a volaný soubor na webovém serveru. Z hlediska bezpečnosti se vzdálený soubor nespustí.
Následující příklad načte obsah souboru "demo_test.txt" do konkrétního prvku:
Do parametru URL je také možné přidat selektor jQuery.
Následující příklad načte obsah prvku s id = "p1", uvnitř souboru "demo_test.txt", do konkrétního prvku.
Volitelný parametr zpětného volání určuje funkci zpětného volání, která se má spustit po dokončení load() metody. Funkce zpětného volání může mít různé parametry:
responseTxt- obsahuje výsledný obsah, pokud je přenos úspěšnýstatusTxt- obsahuje stav přenosuxhr- obsahuje objekt XMLHttpRequest
Následující příklad zobrazí výstražné pole po dokončení metody load(). Pokud byla load() metoda úspěšná, zobrazí se „Externí obsah úspěšně načten!“ A pokud selže, zobrazí se chybová zpráva:
Metoda jQUERY AJAX()
Oproti metodě load(), ajax() poskytuje více parametrů, které usnadňují práci při asynchronním volání skriptů.
Všechny metody jQuery AJAX používají metodu ajax(). Tato metoda se většinou používá pro žádosti, u nichž nelze použít jiné metody.
Syntaxe
$.ajax({name:value, name:value, ... })Parametry určují jeden nebo více párů název / hodnota pro požadavek AJAX.
Následující příklad načte obsah souboru a zobrazí jej v elementu #div1. Všimněte si parametru success, ve kterém je volána funkce, která se vykoná po dokončení procesu načítání souboru.
Přehled parametrů:
| Name | Value/Description |
|---|---|
| async | Hodnota Boolean indikuje zda je požadavek předáván asynchronně či nikoliv. Výchozí hodnota je true. |
| beforeSend(xhr) | Funkce, která se vykoná před odesláním požadavku. |
| cache | Hodnota Boolean indicating zda se mánačítaný obsah ukládat do cache. Výchozí hodnota je true. |
| complete(xhr,status) | Funkce se spustí pokud je požadavek kompletní. |
| contentType | Typ obsahu. Výchozí je: "application/x-www-form-urlencoded" |
| data | Data, která jsou odesílána do volaného souboru. |
| type | Specifikace metody, kterou se mají data do souboru odeslat. (GET nebo POST) |
| url | Adresa URL volaného souboru. Ve výchozím nastavení se volá soubor ve, kterém je ajax metoda. |
Příklad:
V uvedeném příkladu je ukázka využití několika parametrů. Všimněte si proměnné data, která obsahuje řetězec parametrů odesílaných prostřednictvím metody GET. Pokud bychom chtěli odeslat data z formulářových polí, tak je lepší využít metodu POST, ale musí dojít k serializaci dat z formuláře.
Serializace dat
Pro serializaci dat z formulářových polí lze využít jQUERY metoda serialize().
Metoda serialize() vytvoří textový řetězec kódovaný URL pomocí serializace hodnot formuláře. Můžete vybrat jeden nebo více prvků formuláře (jako je vstupní a / nebo textová oblast) nebo samotný prvek formuláře. Serializované hodnoty lze použít v řetězci dotazů URL při vytváření požadavku AJAX.
Příklad