Dakle AJAX AJAX i AJAX, to je ono što mi radimo intenzivno ovih dana. To štedi vrijeme, povećava dinamiku i daje vam osjećaj koristite vrstu softvera primjenu osjećaju. Tu si mnogo načina za korištenje AJAX s mnogim knjižnicama. Ali kao što možete vidjeti to je stranica za jQuery, mi ćemo pogledati osnovne ili možda nekim naprednim AJAX uzance.
Što nam je potrebno?
jQuery knjižnica (naravno)
Maleni php skripte
Idemo počeo pričati. U jQuery, postoje osnovi 6 vrste metode da to AJAX operacija. To su
- $. AJAX (opcije)
- $. Dobiti (url, podaci, povratni poziv)
- $. GetJSON (url, podaci, povratni poziv)
- $. GetScript (url, povratni poziv)
- opterećenje (url, podaci, povratni poziv)
- $. Post (url, podaci, povratni poziv,
Osim broja 1, sve ostale metode koristiti $. AJAX interno. Dakle, to znači da je $. Ajax () je naša majka funkcija za jQuery AJAX operacija. Pogledajmo kako je $. Ajax () izgleda kao
$. Ajax ({ , tip: "Post", , url: "some.php" , podaci: "name = Peter & location = NY", ( msg ) { uspjeh: funkcija (msg) { "Server Response " + msg ) ; alert ("Server Response" + msg); } });
To je lijepo to. Vrsta parametar se "GET" ili "POST" što znači da možete poslati AJAX requestion POST ili GET kao (ja bih radije POST uvijek). Ostali parametri su prilično self objasnidbeni ako pogledati kod ponovno.
Sada ćemo napraviti mali AJAX skriptu koja čita link na hipervezu oznaka (<a>) i učitava zahtjev na nekim div elemente u dokumentu.
Prvo smo se normalno HTML php dokument koji će izgledati ovako
<DOCTYPE html 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 izgled izbornika vrsta ćemo koristiti ul> Li i Link. To će izgledati ovako
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> opterećenje u Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> opterećenje u diviziju 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> opterećenje u diviziju 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> opterećenje u diviziju 4 </ a> </ li> </ Ul>
Kao što možete vidjeti smo stavili linkove na popisu elemenata unutar neuređen popis objekta. Pobliže pogledajte <a> tag svojstava. Imamo href, klasa i rel atribut koji izgleda ništa drugačije od normalne veze. Ako vidite, mi smo s obzirom na atribut rel nekim div imena naime div1 i div2 .. tako dalje. To znači da želimo odgovor href se učitava u onim divs. Kako to učiniti? Dodajmo one divs prvi
<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 stvarni dio sada - dali smo veze klase "ajax_link". Mi samo će dinamički dodati AJAX akcije samo linkovi koji imaju ime klase pod nazivom "ajax_link". Pakao, ne svi linkovi na stranici imati AJAX akcije, mi?
Dakle, dokument opterećenja ćemo to učiniti.
. ready ( function ( ) { $ (Document). Spreman (funkcija () { ) . click ( function ( ) { $ ("A.ajax_link"). Kliknite (funkcija () { this ) ; Current_link $ = $ (to); $. Ajax ({ , tip: "post", ( "href" ) , url:. $ current_link attr ("title"), ( e ) { uspjeh: funkcija (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; povratak false; }); });
Pustiti mene objasniti scenarij malo. Document.ready događaj je događaj koji se aktivira na strani opterećenja. A onda smo dodjelu neku vrstu koda na klik slučaju linkova koji imaju klase "ajax_link". Pri tome current_link $ = $ (ova), omogućuje da se trenutno vode objekt biti dostupan unutar funkcije povratnog poziva. I mi smo
$ ("#" + $ Current_link.attr ("rel")). Html (e)
što znači $ ("div_id") html (server_response) i mi smo postavili URL parametra od $ ajax funkciju dinamički s url:. $. current_link.attr ("title"). Tako sada svi ti znači "Svi ti linkovi koji imaju klase" ajax_link "- Dodaj događaj rukovatelj klik - tada izvršiti i AJAX zahtjev uzimanje linkovi href poperty i učitati odgovor u div čiji je id odgovara" rel "atribut povezati ". I povratak false sprječava link rad kao normalan vezu 
Želite li vidjeti neku radnju? Ovdje to ide.
A možete preuzeti izvor , kao dobro.
U sljedećem dijelu ovog malog tutorial ćemo koristiti istu stvar, ali s malo utjehe.
Primjena lakši način
Sve ostaje gotovo isti. Mi smo samo ćete promijeniti način Ajax ovdje. Dakle, umjesto pisanja cijeli dolara. Ajax blok možemo postići istu stvar sa sljedećim.
. ready ( function ( ) { $ (Document). Spreman (funkcija () { ) . click ( function ( ) { $ ("A.ajax_link"). Kliknite (funkcija () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Ova) attr ("rel")) opterećenje ($ (ova) 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 je $ ("# 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 naviknete na glavnom metodom (prikazano u prvom dijelu).
U zip datoteku postoji još jedan file pod nazivom ajax2.php koji pokazuje ovu methos koji ima isti rezultat.
Dakle, AJAX nije tako teško kao što zvuči, zar ne? Kada postanete vrlo tečno s AJAX operacija, morat ćete stvoriti magiji.
Hvala za čitanje btw.
U zadnje vrijeme Komentirajte