Tik AJAX AJAX un AJAX, ka tas, ko mēs darām plaši šajās dienās. Tas ietaupa laiku, piebilst dinamiku un sniedz jums justies, izmantojot lietojumprogrammu veida jūtas. Tur esam daudz veidi, kā izmantot AJAX ar daudzām bibliotēkām. Bet kā jūs varat redzēt, šī lapa ir jQuery, mēs apskatīt pamata vai varbūt dažām uzlabotas AJAX paražas.
Ko jūs mums vajag?
jQuery bibliotēka (protams)
Tiny php skriptu
Let 's sāka runāt. In jQuery, ir būtībā 6 veidu metodes, lai darīt AJAX operācijas. Tie ir
- $ Ajax (opcijas).
- $. Get (url, dati, callback)
- $ GetJSON (url, dati, callback).
- $ GetScript (url, callback).
- slodze (url, dati, callback)
- $ Post (url, datu, callback.,
Neatkarīgi no 1 numuru, visas citas metodes izmantot $ ajax iekšēji.. Tātad tas nozīmē, ka $. Ajax () ir mūsu māte funkcija jQuery AJAX operācijām. Apskatīsim, kā $. Ajax () izskatās
msg ) ; } } ) ; Atbilde "+ msg);}}); |
Tas ir diezgan to. Tipa parametrs notiek "GET" vai "POST", kas nozīmē, ka varat sūtīt AJAX requestion kā POST vai GET (es gribētu, POST vienmēr). No parametriem, pārējie ir diezgan pašsaprotami, ja jūs to apskatīt kodu vēlreiz.
Tagad mēs esam gatavojas veikt nelielu AJAX skriptu, kas skan saiti uz hipersaiti tagiem (<a>), un slodzes pieprasījumu par dažiem div elementiem dokumentā.
Vispirms mēs normālu html no php dokumentu, kas izskatās kā šis
<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 link tests </ title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<skripta type="text/javascript" src="jquery-1.2.6.min.js"> </ script>
</ Head>
<body>
</ Body> </ html> |
Tagad pieņemsim pievienot dažas saites uz dokumentu. Lai labāk izvēlnes veida izskatu mēs izmantot ul> LI un saiti. Tas izskatās šādi
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Slodzes 1 Div </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Kravas 2 Div </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Kravas 3 Div </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Kravas 4 Div </ a> </ li>
</ Ul> |
Kā jūs varat redzēt, mēs esam iekļāvuši saites saraksta elementu iekšpusē ir Nekārtots saraksts objektu. Veikt tuvāk apskatīt <A> Tag rekvizītus. Mums ir href, klasi un rel atribūtu, kas izskatās neko citu kā normālu saiti. Ja jūs redzat, mums ir dota rel atribūta dažiem div nosaukumiem, proti div1, div2 .. tā tālāk. Tas nozīmē, ka mēs vēlamies reakciju href kas iepildīta šajās divs. Kā to darīt? Pieņemsim pievienot šos divs pirmais
<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> |
Un reālā daļa tagad - mums ir devis saites klases "ajax_link". Mēs tikai dinamiski pievienot ajax darbības tikai saites, kuru klases nosaukumu sauc par "ajax_link". Hell, mēs visi lapā saites ir ajax darbības, mēs?
Tātad, par dokumentu slodzes mēs gribētu darīt.
. ready ( function ( ) { $ (Dokumentu) Ready (funkcija (). {
) . click ( function ( ) { $ ("A.ajax_link"). Noklikšķiniet uz (funkcija () {
this ) ; $ Current_link = $ (this);
$. Ajax ({
, tips: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { panākumu: funkcija (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; $ (. "#" + $ Current_link attr ("rel")) html (e).;
}
});
; atgriezties viltus;
});
}); |
Ļaujiet man paskaidrot skriptu mazliet. Document.ready notikums ir notikums, kas tiek iedarbināts ar lapas ielādes. Un tad mēs esam uzticēt sava veida kodu par klikšķi gadījumā saitēm, kas ir klases "ajax_link". Darot $ current_link = $ (this), ļauj būt Pašreizējā saikne objekts būs pieejams atzvanīšanas funkciju. Un mums ir
$ ("#" + $ Current_link.attr ("rel")) html (e).
kas nozīmē $ ("div_id") html (server_response), un mēs esam noteikuši url param par $ Ajax funkcijas dinamiski ar url:.. $ current_link.attr ("href"). Tātad tagad visi šie nozīmē "Visas šīs saites, kuriem ir klase" ajax_link "- Pievienot klikšķi notikumu apdarinātājs - tad izpildīt un AJAX pieprasījums ņemot saites href poperty un slodzes atbildi uz div kura id sakrīt ar" rel "atribūts saite ". Un atgriezties viltus novērš saiti darbu kā parasti saite 
Gribu redzēt to prasību? Šeit tas pats.
Un jūs varat lejupielādēt avots , kā arī.
Nākamajā sadaļā šo maz apmācība mēs būsim, izmantojot to pašu, bet ar mazliet komfortu.
Piemērojot vieglāku metodi
Viss paliek gandrīz tāds pats. Mēs vienkārši mainīt ajax metodi šeit. Tā vietā, rakstot visu $. Ajax bloku, mēs varam sasniegt to pašu ar šādiem.
. ready ( function ( ) { $ (Dokumentu) Ready (funkcija (). {
) . click ( function ( ) { $ ("A.ajax_link"). Noklikšķiniet uz (funkcija () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (". #" + $ (This) attr ("rel")) slodze ($ (this) attr ("href").);
; atgriezties viltus;
});
}); |
Tas ir daudz mazāk sarežģīta tagad, labi? Slodzes metode slodzes ajax saturu ietvaros elementa tas ir pievienots. Ja $ ("# somediv_id"). Slodze ("mypage.php"), to mēģināšu ielādēt mypage.php 's saturs tajā. Diezgan vienkārši, vai ne? Bet es jums iesakām pierastu pie galvenā metode (uzrādīts pirmajā daļā).
Jo zip fails tur ir vēl viens fails, ko sauc ajax2.php kas parāda šo methos, kas ir to pašu rezultātu.
Tātad, AJAX nav tik grūti, kā izklausās, vai ne? Kad jūs kļūstat ļoti brīvi ar AJAX operācijas, jūs izveidosiet magics.
Paldies par lasījumā btw.
Jaunākie komentāri