Så AJAX AJAX og AJAX, det er det vi gjør i stor utstrekning i disse dager. Det sparer tid, legger dynamikk og gir deg en følelse av å bruke en program slags følelse. Det er mange måter å bruke AJAX med mange biblioteker. Men som du kan se dette nettstedet er for jQuery, vil vi se på de grunnleggende eller kanskje noen avanserte AJAX bruksområder.
Hva vil du vi trenger?
jQuery bibliotek (selvfølgelig)
En liten php script
La oss begynte å snakke. I jQuery, det er i utgangspunktet 6 typer metode for å gjøre AJAX operasjoner. Disse er
- $. Ajax (opsjoner)
- $. Få (url, data, tilbakeringing)
- $. GetJSON (url, data, tilbakeringing)
- $. GetScript (url, callback)
- belastning (url, data, tilbakeringing)
- $. Innlegg (url, data, tilbakeringing,
Bortsett fra nummer en, alle de andre metodene bruker $. Ajax internt. Så det betyr $. Ajax () er vår mor funksjon for jQuery AJAX operasjoner. La oss se på hvordan $. Ajax () ser ut
msg ) ; } } ) ; Response "+ msg);}});
Det er ganske den. Typen parameteren tar "GET" eller "POST" som betyr at du kan sende AJAX requestion som POST eller GET (jeg foretrekker POST alltid). Resten av parametrene er ganske selvforklarende hvis du tar en titt på koden på nytt.
Nå skal vi lage en liten AJAX skript som leser koblingen av hyperkoblingsprotokollene tags (<a>) og laster forespørselen på noen div elementer i dokumentet.
Først tar vi en normal html av PHP dokument som vil se slik ut
<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 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>
Nå la oss legge til noen linker til dokumentet. For en bedre meny slags utseende vil vi bruke en ul> LI og Link. Det vil se slik ut
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Load i Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Load i Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Load i Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Load i Div. 4 </ a> </ li> </ Ul>
Som du ser har vi lagt lenker i listeelementer inni en ikke-sorterte liste objekt. Ta en nærmere titt på <a> tag egenskaper. Vi har href, klasse og rel-attributtet som ser noe annerledes enn en vanlig link. Hvis du ser, har vi gitt rel-attributtet til noen div navn nemlig div1 og div2 .. så videre. Dette betyr at vi ønsker respons href skal lastes inn i disse divs. Hvordan gjøre det? La oss legge disse divs første
<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>
Og den reelle delen nå - vi har gitt linkene en klasse "ajax_link". Vi bare dynamisk legger ajax handlinger bare linker som har en klasse navn heter "ajax_link". Hell, vi har ikke alle linkene på en side for å få ajax handlinger, gjør vi?
Så, på dokumentet belastning vil vi gjøre dette.
. ready ( function ( ) { $ (Document). Klar (funksjon () { ) . click ( function ( ) { $ ("A.ajax_link"). Klikk (funksjon () { this ) ; $ Current_link = $ (denne); $. Ajax ({ , type: "post", ( "href" ) , url:. $ current_link attr ("href"), ( e ) { suksess: funksjon (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; return false; }); });
La meg forklare skriptet litt. Den document.ready arrangementet er en begivenhet som blir utløst ved side belastning. Og da vi tilordner en slags koder på Klikk-hendelsen av linkene som har en klasse "ajax_link". Å gjøre dette $ current_link = $ (this); gjør det mulig å ha den aktuelle lenken objektet være tilgjengelig innenfor tilbakering funksjon. Og vi har
$ ("#" + $ Current_link.attr ("rel")). Html (e)
som betyr $ ("div_id") html (server_response) og vi har satt url param av $ ajax funksjon dynamisk med url:.. $ current_link.attr ("href"). Så nå alle disse betyr "alle disse koblingene som har en klasse" ajax_link "- Legge et klikk hendelseshåndterer - deretter utføre og AJAX anmodning tar lenker href poperty og laste responsen til en div som id matcher" rel "-attributtet til link ". Og avkastningen falsk hindrer koblingen arbeidet som vanlig kobling 
Vil du se det en handling? Her går.
Og du kan laste kilden også.
I den neste delen av denne lille opplæringen vil vi skal bruke det samme, men med litt komfort.
Påføring enklere metode
Alt forblir nesten det samme. Vi vil bare endre Ajax-metoden her. Så istedenfor å skrive hele $. Ajax blokk kan vi oppnå det samme med følgende.
. ready ( function ( ) { $ (Document). Klar (funksjon () { ) . click ( function ( ) { $ ("A.ajax_link"). Klikk (funksjon () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Denne) attr ("rel")) belastning ($ (denne) attr ("href").); ; return false; }); });
Det er mye mindre komplisert nå, ikke sant? Lasten metoden laster ajax innholdet i elementet det er knyttet til. Hvis $ ("# somediv_id"). Belastning ("mypage.php"), vil den prøve å laste mypage.php innhold i det. Ganske enkelt, ikke sant? Men jeg foreslår at du blir vant til den viktigste metoden (vist i første del).
I zip filen det er en annen fil som heter ajax2.php som demonstrerer denne methos som har samme resultat.
Så, er AJAX ikke så vanskelig som det høres ut, ikke sant? Når du blir veldig flytende med AJAX operasjoner, vil du lage magi.
Takk for lesing btw.
Siste kommentarer