Dakle AJAX AJAX i AJAX, to je ono što mi radimo intenzivno ovih dana. To štedi vrijeme, dodaje dinamiku i daje vam osjećaj o korištenju vrste softvera primjena osjećaju. Tu si mnogo načina za korištenje AJAX s mnogim knjižnicama. Ali kao što možete vidjeti ovaj site je za jQuery, mi ćemo pogledati osnovnih ili možda nekim naprednim AJAX uzance.
Što mi treba?
jQuery knjižnice (naravno)
Maleni php skripte
Neka je počeo govoriti. U jQuery, u osnovi postoje 6 vrste metoda za napraviti AJAX operacije. To su
- $. Ajax (opcija)
- $. Dobili (url, podaci, povratni)
- $. GetJSON (url, podaci, povratni)
- $. GetScript (url, povratni)
- opterećenje (url, podaci, povratni)
- $. Post (url, podaci, povratni poziv,
Osim broja 1, sve druge metode koriste $. Ajax interno. Dakle, to znači $. Ajax () naša majka funkcija za jQuery AJAX operacija. Pogledajmo kako $. Ajax () izgleda kao
$. Ajax ({ , Tip: "POST", , url: "some.php", , Podaci: "ime = Peter & location = NY", ( msg ) { Uspjeh: funkcija (MSG) { + msg ) ; alert ("Odgovor poslužitelja" + poruka); } }); |
To je prilično to. Vrsta parametra se "GET" ili "POST", što znači da možete slati AJAX requestion kao POST ili GET (ja bih radije POST uvijek). Ostatak parametara su prilično isti objašnjiv ako pogledamo koda ponovno.
Sada ćemo napraviti malu AJAX skriptu koja čita link hipervezu (oznake <a>) i učitava zahtjev na nekim div elemenata u dokumentu.
Prvo smo se normalno html php dokument koji će izgledati ovako
<DOCTYPEhtml JAVNO! "- / / 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 vode Test </ 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> |
Sada ćemo dodati neke linkove na dokumentu. Za bolji izbornika vrste izgledom ćemo koristiti ul> LI link. To će izgledati ovako
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> tereta u diviziju 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> tereta u diviziju 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> tereta u diviziju 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> tereta u diviziju 4. </ a> </ li> </ Ul> |
Kao što možete vidjeti mi smo stavili linkove na popis elemenata unutar jednog nenumerirani popis objekta. Pobliže Na <a> svojstava. Imamo href, klasu i rel atribut koji izgleda ništa drugo nego normalan link. Ako vidite, mi smo s obzirom na rel atribut nekim imenima div naime div1, div2 .. tako dalje. To znači da želimo na odgovor HREF da se učita u tim divs. Kako to učiniti? Dodajmo one DIVs prva
<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 pravi dio sada - dali smo linkove klase "ajax_link". Samo ćemo dodati dinamički AJAX akcije samo linkovi koji imaju ime klase pod nazivom "ajax_link". Dovraga, ne svi linkovi za stranice imati AJAX akcije, zar ne?
Dakle, na dokumentu opterećenja bismo to učinili.
. ready ( function ( ) { $ (Dokument). Spremni (funkcija () { ) . click ( function ( ) { $ ("A.ajax_link"). Pritisnite (function () { this ) ; $ Current_link = $ (ove); $. Ajax ({ , Tip: "Pošta", ( "href" ) , url:. $ current_link attr ("title"), ( e ) { Uspjeh: funkcija (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; povratak false; }); }); |
Dopustite mi objasniti skriptu malo. Document.ready događaj je događaj koji se pokreću na stranici opterećenja. A onda smo dodjeljivanje nekakvu kodova na klik slučaju linkova koji imaju klasu "ajax_link". Pri tome current_link $ = $ (ove); omogućuje da imaju struje vode objekt biti dostupan u povratni funkciji. I mi smo
$ ("#" + $ Current_link.attr ("rel")). Html (e)
što znači $ ("div_id") HTML (server_response), a mi smo postavili URL parametra od $ Ajax funkcije dinamično s URL:. $. current_link.attr ("title"). Tako sada svi ti znači "Svi oni koji imaju veze klasu" ajax_link "- Dodavanje rukovatelj događaj klik - tada izvršiti i AJAX zahtjeva uzimanje linkovi href poperty i učitavanje odgovor u div čija id odgovara" rel "atribut povezati ". A povratak false sprječava link radio kao normalno linka 
Želite li vidjeti neku akciju? Ovdje to ide.
A možete preuzeti izvora , kao dobro.
U sljedećem dijelu ovog malog tutorial ćemo biti koristeći istu stvar, ali s malo udobnosti.
Primjena lakši način
Sve ostaje gotovo ista. Samo ćemo promijeniti način ajax ovdje. Dakle, umjesto pisanja cijelu $. Ajax blok možemo postići istu stvar u sljedećem.
. ready ( function ( ) { $ (Dokument). Spremni (funkcija () { ) . click ( function ( ) { $ ("A.ajax_link"). Pritisnite (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Ove) attr ("rel")) opterećenje ($ (ove) attr ("title").); ; povratak false; }); }); |
To je puno manje komplicirano, zar ne? Opterećenje metoda učitava ajax sadržaj unutar elementa to je u prilogu. Ako $ ("# somediv_id"). Opterećenje ("mypage.php"), to će pokušati učitati mypage.php je sadržaj u njoj. Prilično jednostavno, zar ne? Ali ja predlažem da se navikne na glavnom metodom (prikazano u prvom dijelu).
U zip datoteku postoji još jedan spis pod nazivom ajax2.php što pokazuje ovaj methos koji ima isti rezultat.
Dakle, AJAX nije tako teško kao što zvuči, zar ne? Kad ste postali vrlo tečno s AJAX operacija, vi ćete stvoriti čarolija.
Hvala za čitanje btw.
U zadnje vrijeme Komentirajte