Takže AJAX AJAX a AJAX, že to, co děláme v těchto dnech intenzivně. To šetří čas, zvyšuje dynamiku a dává vám pocit pomocí softwarové aplikace druh pocit. Tam jsme mnoho způsobů, jak používat AJAX s mnoha knihoven. Ale jak vidíte, toto místo je pro jQuery, se podíváme na základní nebo možná některé pokročilé zvyklostem AJAX.
Co budeme potřebovat?
jQuery knihovny (samozřejmě)
Malý PHP skript
Pojďme začal mluvit. V jQuery, existují v zásadě šest typů metody dělat AJAX operace. Jedná se o
- $. Ajax (možnosti)
- $. Get (url, data, callback)
- $. GetJSON (url, data, callback)
- $. GetScript (url, callback)
- zatížení (url, data, callback)
- $. Příspěvek (url, data, callback,
Na rozdíl od čísla 1, všechny ostatní metody používají $. Ajax interně. Takže to znamená, že $. Ajax () je naše matka funkce pro jQuery operace AJAX. Pojďme se podívat na to, jak $. Ajax () vypadá
msg ) ; } } ) ; Odpověď "+ msg);}}); |
To je dost, že. Parametr type má "GET" nebo "POST", což znamená, že můžete odesílat AJAX requestion jako POST nebo GET (Raději bych POST vždy). Zbytek parametrů je docela samozřejmý, pokud se podíváte na kód znovu.
A teď udělat malou AJAX skript, který čte odkaz na hypertextový odkaz tagů (<a>) a načte požadavek na některých div prvků v dokumentu.
Nejprve jsme se normální html dokumentu PHP, který bude vypadat takto
<DOCTYPE html PUBLIC! "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title> Ajax odkaz testu </ title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.2.6.min.js"> </ script>
</ Head>
<body>
</ Body> </ html> |
Nyní pojďme přidat nějaké odkazy na dokumentu. Pro lepší navigaci druhu vzhled budeme používat ul> LI a propojit. To bude vypadat takto
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> zatížení v Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> zatížení v Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> zatížení v Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> zatížení v Div 4 </ a> </ li>
</ Ul> |
Jak můžete vidět, jsme dát odkazy na prvky seznamu uvnitř výčtu objektu. Podívejte se blíže na tagu <a> vlastností. Máme href, třídy a atributu rel, který vypadá jako nic jiného, než normální odkaz. Pokud vidíte, jsme dali atribut rel některých div jmen a to DIV1, div2 .. tak dále. To znamená, že chceme odezvu href musí být vložen do těch tagů Div. Jak to udělat? Dodejme ty divy první
<span> DIV -1 </ span>
<div id="div1" class="content_loader"> </ div>
<span> DIV -2 </ span>
<div id="div2" class="content_loader"> </ div>
<span> DIV -3 </ span>
<div id="div3" class="content_loader"> </ div>
<span> DIV -4 </ span>
<div id="div4" class="content_loader"> </ div> |
A reálná část nyní - jsme dali na odkazy třídu "ajax_link". Budeme jen dynamicky Ajax akce pouze odkazy, které mají název třídy s názvem "ajax_link". Sakra, nemáme všechny odkazy na stránky, aby Ajax akce, že?
Takže na dokument zatížení bychom to udělat.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Tlačítko (function () {
this ) ; $ Current_link = $ (this);
$. Ajax ({
, Typ: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { Úspěch: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Dovolte mi vysvětlit tento skript trochu. Document.ready událost je událost, která se spouští při načtení stránky. A pak jsme přidělení nějaké kódy na události Click odkazů, které mají třídu "ajax_link". Tím $ current_link = $ (this); umožňuje mít aktuální objekt propojení být k dispozici v rámci zpětného volání. A my máme
$ ("#" + $ Current_link.attr ("rel")). Html (e)
což znamená, že $ ("div_id") html (server_response) a my jsme nastavit param url na $ funkce ajax dynamicky URL:. $. current_link.attr ("href"). Takže teď všechny ty prostředky "Všechny ty odkazy, které mají třídu" ajax_link "- přidat obslužnou rutinu události Click - pak spustit a AJAX požadavek brát odkazy href poperty a vložte odpověď na div, jehož id odpovídá" rel "atribut propojení ". A return false zabrání propojení práci jako normální odkaz 
Chcete vidět, jak to akce? je to tady.
A můžete si stáhnout zdrojový kód stejně.
V další části tohoto malého tutoriálu budeme používat to samé, ale s trochou pohodlí.
Použití snadnější způsob
Vše zůstává téměř stejné. Budeme se změnit způsob ajax zde. Takže místo psaní celého $. Ajax blok můžeme dosáhnout totéž s následujícími.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Tlačítko (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) zatížení ($ (this) attr ("href").)
; return false;
});
}); |
Je to mnohem méně komplikované, ne? Zatížení metoda načte ajax obsah v prvku to připojena. Pokud $ ("# somediv_id"). Zatížení ("mypage.php"), bude to pokusí načíst mypage.php je obsah v něm. Docela jednoduché, ne? Ale já doporučuji si zvyknete na hlavní metodu (viz první část).
V souboru zip je tu další soubor s názvem ajax2.php který demonstruje tuto Methos, který má stejný výsledek.
Takže, AJAX není tak těžké, jak to vypadá, ne? Pokud se stanete velmi plynulý provoz s AJAX, budete vytvářet magii.
Díky za čtení btw.
Nedávné komentáře