Takže AJAX AJAX a AJAX, že to, čo robíme v týchto dňoch intenzívne. To šetrí čas, zvyšuje dynamiku a dáva vám pocit pomocou softvérovej aplikácie druh pocit. Tam sme mnoho spôsobov, ako používať AJAX s mnohými knižníc. Ale ako vidíte, toto miesto je pre jQuery, sa pozrieme na základné alebo možno niektoré pokročilé zvyklostiam AJAX.
Čo budeme potrebovať?
jQuery knižnice (samozrejme)
Malý PHP skript
Poďme začal hovoriť. V jQuery, existujú v zásade šesť typov metódy robiť AJAX operácie. Jedná sa o
- $. Ajax (možnosti)
- $. Get (url, dáta, callback)
- $. GetJSON (url, dáta, callback)
- $. GetScript (url, callback)
- zaťaženie (url, dáta, callback)
- $. Príspevok (url, dáta, callback,
Na rozdiel od čísla 1, všetky ostatné metódy používajú $. Ajax interne. Takže to znamená, že $. Ajax () je naša matka funkcia pre jQuery operácie AJAX. Poďme sa pozrieť na to, ako $. Ajax () vyzerá
$. Ajax ({
, Typ: "POST",
, url: "some.php"
, údaje: "name = Peter & location = NY"
( msg ) { Úspech: function (msg) {
+ msg ) ; alert ("Odozva servera" + msg);
}
}); |
To je dosť, že. Parameter type má "GET" alebo "POST", čo znamená, že môžete odosielať AJAX requestion ako POST alebo GET (Radšej by som POST vždy). Zvyšok parametrov je celkom samozrejmý, ak sa pozriete na kód znova.
A teraz urobiť malú AJAX skript, ktorý číta odkaz na hypertextové prepojenie tagov (<a>) a načíta požiadavku na niektorých div prvkov v dokumente.
Najprv sme sa normálne html dokumentu PHP, ktorý bude vyzerať 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> |
Teraz poďme pridať nejaké odkazy na dokumente. Pre lepšiu navigáciu druhu vzhľad budeme používať ul> LI a prepojiť. To bude vyzerať takto
<UL id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> zaťaženie v Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> zaťaženie v Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> zaťaženie v Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> zaťaženie v Div 4 </ a> </ li>
</ Ul> |
Ako môžete vidieť, sme dať odkazy na prvky zoznamu vnútri zoznamu objektu. Pozrite sa bližšie na tagu <a> vlastností. Máme href, triedy a atribútu rel, ktorý vyzerá ako nič iné, než normálny odkaz. Ak vidíte, sme dali atribút rel niektorých div mien a to Div1, div2 .. tak ďalej. To znamená, že chceme odozvu href musí byť vložený do tých tagov Div. Ako to urobiť? Dodajme tie divy prvý
<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álna časť teraz - sme dali na odkazy triedu "ajax_link". Budeme len dynamicky Ajax akcie iba odkazy, ktoré majú názov triedy s názvom "ajax_link". Sakra, nemáme všetky odkazy na stránky, aby Ajax akcie, že?
Takže na dokument zaťaženie by sme to urobiť.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Tlačidlo (function () {
this ) ; $ Current_link = $ (this);
$. Ajax ({
, Typ: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { Úspech: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Dovoľte mi vysvetliť tento skript trochu. Document.ready udalosť je udalosť, ktorá sa spúšťa pri načítaní stránky. A potom sme pridelenie nejaké kódy na udalosti Click odkazov, ktoré majú triedu "ajax_link". Tým $ current_link = $ (this); umožňuje mať aktuálne objekt prepojení byť k dispozícii v rámci spätného volania. A my máme
$ ("#" + $ Current_link.attr ("rel")). Html (e)
čo znamená, že $ ("div_id") html (server_response) a my sme nastaviť param url na $ funkcie ajax dynamicky URL:. $. current_link.attr ("href"). Takže teraz všetky tie prostriedky "Všetky tie odkazy, ktoré majú triedu" ajax_link "- pridať obsluhy udalostí Click - potom spustiť a AJAX požiadavka brať odkazy href poperty a vložte odpoveď na div, ktorého id odpovedá" rel "atribút prepojenie ". A return false zabráni prepojenie prácu ako normálny odkaz 
Chcete vidieť, ako to akcia? je to tu.
A môžete si stiahnuť zdrojový kód rovnako.
V ďalšej časti tohto malého tutoriálu budeme používať to isté, ale s trochou pohodlie.
Použitie ľahší spôsob
Všetko ostáva takmer rovnaké. Budeme sa zmeniť spôsob ajax tu. Takže namiesto písania celého $. Ajax blok môžeme dosiahnuť to isté s nasledujúcimi.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Tlačidlo (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) zaťaženie ($ (this) attr ("href").)
; return false;
});
}); |
Je to oveľa menej komplikované, nie? Zaťaženie metóda načíta ajax obsah v prvku to pripojená. Ak $ ("# somediv_id"). Zaťaženie ("mypage.php"), bude to pokúsi načítať mypage.php je obsah v ňom. Celkom jednoduché, nie? Ale ja odporúčam si zvyknete na hlavnú metódu (pozri prvú časť).
V súbore zips je tu ďalší súbor s názvom ajax2.php ktorý demonštruje túto methos, ktorý má rovnaký výsledok.
Takže, AJAX nie je tak ťažké, ako to vyzerá, nie? Ak sa stanete veľmi plynulý prevádzku s AJAX, budete vytvárať mágiu.
Vďaka za čítanie btw.
Nedávne komentáre