Tik AJAX AJAX un AJAX, ka tas, ko mēs darām plaši šajās dienās. Tas ietaupa laiku, palielina dinamiku un sniedz jums justies, izmantojot lietojumprogrammu veida jūtas. Tur esam vairāki veidi, kā izmantot AJAX ar daudzām bibliotēkām. Bet kā jūs varat redzēt šajā lapā ir jQuery, mēs apskatīt pamata vai varbūt dažas progresīvas AJAX paražas.
Ko tu mums vajag?
jQuery bibliotēka (protams)
Tiny php skriptu
Pieņemsim sāka runāt. Ar jQuery, ir būtībā 6 veidu metodes, lai to AJAX operācijas. Tās ir
- $ Ajax (opcijas).
- $. Get (url, datu, callback)
- $ GetJSON (url, datu, callback).
- $ GetScript (url, callback).
- slodze (url, datu, callback)
- $ Post (url, datu, piepr.,
Neatkarīgi no 1 numura, visas citas metodes izmantot $ ajax iekšēji.. Tātad tas nozīmē $. Ajax () ir mūsu māte funkcija jQuery AJAX operācijas. Aplūkosim cik $. Ajax () izskatās
$. Ajax ({ , tips: "POST", , url: "some.php", , dati: "name = Peter & location = NY", ( msg ) { panākumi: funkcija (msg) { "Server Response " + msg ) ; alert ("servera atbilde" + msg); } });
Tas ir diezgan tā. 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). Parametru 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 hipersaišu atslēgvārdus (<a>) un ielādē pieprasījumu par dažiem div elementiem dokumentā.
Vispirms mēs normālu HTML php dokumentu, kas izskatās šādi
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1,0 Stingri / / 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 saite tests </ 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>
Tagad pieņemsim pievienot dažas saiknes uz dokumentu. Par labāku izvēlnes veida izskatu mēs izmantosim ul> LI un saiti. Kas izskatās šādi
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Slodzes 1 Div </> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Slodzes 2 Div </> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Slodzes 3 Div </> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Slodzes 4 Div </> </ li> </ Ul>
Kā jūs varat redzēt, mēs esam ielikuši saites saraksta elementiem iekšpusē Nekārtots saraksts objektu. Veikt tuvāk apskatīt <a> tag rekvizītos. Mums ir href, klases un rel atribūts, kas izskatās neko savādāki nekā parastā saite. Ja redzat, mēs esam dota rel atribūta dažiem div nosaukumiem proti div1, kas div2 .. tā tālāk. Tas nozīmē, ka mēs vēlamies reakciju href kas iepildīta šo divs. Kā to izdarīt? Pieņemsim pievienot tos divs 1.
<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 - mēs esam saiknēm klases "ajax_link". Mēs tikai dinamiski pievienot Ajax darbības tikai saites, kuru klases nosaukumu sauc par "ajax_link". Elle, mums nav visas lapas saites ir ajax darbības, mēs?
Tātad, par dokumenta slodzes mēs gribētu darīt.
. ready ( function ( ) { $ (Dokuments) gatavs (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ākumi: 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 to var izraisīt lapu slodzi. Un tad mēs esam uzticēt sava veida kodu par klikšķi notikums no saitēm, kas ir klasi "ajax_link". Darot $ current_link = $ (this); ļauj būt pašreizējais saite objekts būs pieejama atzvanīšanas funkciju. Un mums ir
$ ("#" + $ Current_link.attr ("rel")) html (e).
kas nozīmē $ ("div_id") html (server_response) un mēs esam noteikt url PARAM par $ ajax funkcijas dinamiski ar url:.. $ current_link.attr ("href"). Tātad tagad visi šie līdzekļi "Visas šīs saites, kam ir class" ajax_link "- Pievienot klikšķi notikumu apdarinātājs - tad izpildīt un AJAX pieprasījums ņemot saites href poperty un ielādēt atbildi par div kura id sakrīt ar" rel "atribūtu saiti ". Un atgriezties viltus novērš saiti darbs kā normālu saiti 
Gribu redzēt to darbību? Šeit tas pats.
Un jūs varat lejupielādēt avots , kā arī.
Nākamajā sadaļā šo maz apmācība mēs, 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 dolāru. Ajax bloku mēs varam sasniegt to pašu ar šādu.
. ready ( function ( ) { $ (Dokuments) gatavs (funkcija (). { ) . click ( function ( ) { $ ("A.ajax_link"). Noklikšķiniet uz (funkcija () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Šo) attr ("rel")) slodze ($ (šo) attr ("href").); ; atgriezties viltus; }); });
Tas ir daudz mazāk sarežģīta tagad, labi? Slodzes metode slodzes ajax satura informācija elementa tas pievienots. Ja $ ("# somediv_id"). Slodze ("mypage.php"), tas būs mēģināt ielādēt mypage.php 's saturs tajā. Diezgan vienkārši, vai ne? Bet es iesaku jums pierast pie galvenā metode (redzams pirmajā daļā).
Uz zip failu tur ir cita failu sauc ajax2.php kas parāda šo methos kurās ir tāds pats rezultāts.
Tātad, AJAX nav tik grūti, kā izklausās, vai ne? Kad jūs kļūstat ļoti brīvi ar AJAX darbības, jūs izveidosiet magics.
Paldies par rīdinga btw.
Jaunākie komentāri