Så AJAX AJAX og AJAX, det er hvad vi gør udstrakt grad i disse dage. Det sparer tid, tilføjer dynamik og giver dig en fornemmelse af at bruge et program slags fornemmelse. Der er mange måder at bruge AJAX med mange biblioteker. Men som du kan se denne side er for jQuery, vil vi se på de grundlæggende eller måske nogle avancerede AJAX kutymer.
Hvad mener du vi har brug for?
jQuery bibliotek (selvfølgelig)
En lille php script
Lad os begyndte at tale. I jQuery, er der dybest set 6 typer af metode til at gøre AJAX operationer. Disse er
- $. Ajax (optioner)
- $. Får (url, data, tilbagekald)
- $. GetJSON (url, data, tilbagekald)
- $. GetScript (url, tilbagekald)
- belastning (url, data, tilbagekald)
- $. Indlæg (url, data, tilbagekald,
Bortset fra nummer 1, alle de andre metoder bruge $. Ajax internt. Så det betyder $. Ajax () er vores mor funktion til jQuery AJAX operationer. Lad os se på, hvordan $. Ajax () ligner
$. Ajax ({ , type: "POST", , url: "some.php", , data: "navn = Peter & location = NY", ( msg ) { succes: funktion (msg) { "Server Response " + msg ) ; alert ("Server Response" + msg); } });
Det er kønt. Den type parameter tager "GET" eller "POST", som betyder, at du kan sende AJAX requestion som POST eller GET (jeg foretrækker POST altid). Resten af parametrene er temmelig selvforklarende, hvis du tager et kig på koden igen.
Nu skal vi til at lave en lille AJAX script, der læser linket til hyperlinks tags (<a>) og indlæser anmodningen på nogle div elementer i dokumentet.
Først skal vi tage en normal html i php dokument, som vil se sådan ud
<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>
Lad os nu tilføje nogle links til dokumentet. For en bedre menu slags udseende, vi vil bruge en UL> LI og Link. Det vil se sådan ud
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Læg i Div. 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Læg 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"> Læg i Div. 4 </ a> </ li> </ Ul>
Som du kan se, vi har lagt links i listeelementer inde i en uordnet liste objekt. Tag et nærmere kig på <a> tag egenskaber. Vi har href, klasse og REL attribut der ser noget anderledes end en normal link. Hvis du ser, har vi givet rel attributten til nogle div navne nemlig div1 og DIV2 .. så videre. Det betyder, at vi ønsker respons på href der skal indlæses i disse divs. Hvordan til at gøre det? Lad os tilføje disse 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>
Og den reelle del nu - vi har givet de links en klasse "ajax_link". Vi vil kun dynamisk føjer ajax handlinger kun links der har en klasse navn kaldet "ajax_link". Hell, vi ikke alle links på en side for at få ajax handlinger, gør vi?
Så på dokumentet belastning vi ville gøre det.
. ready ( function ( ) { $ (Document). Klar (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Klik (function () { this ) ; $ Current_link = $ (denne); $. Ajax ({ , type: "post", ( "href" ) , url:. $ current_link attr ("href"), ( e ) { succes: function (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; return false; }); });
Lad mig forklare scriptet en smule. Den document.ready begivenhed er en begivenhed, som udløses på side belastning. Og så er vi tildele en slags koder på et klik tilfælde af de links, der har en klasse "ajax_link". Gør dette $ current_link = $ (dette), gør det muligt at få den aktuelle link objekt være til rådighed inden for callback funktion. Og vi har
$ ("#" + $ Current_link.attr ("rel")). Html (e)
hvilket betyder $ ("div_id") html (server_response), og vi har sat url param af $ ajax funktionen dynamisk med url:.. $ current_link.attr ("href"). Så nu er alle disse midler "Alle de links, der har en klasse" ajax_link "- Tilføj et klik hændelseshandler - derefter udføre og AJAX anmodning tager links href poperty og læg svaret ind i en div, hvis id matcher" rel "attribut i Link ". Og return false forhindrer linket arbejde som normale link 
Vil du se det en handling? Her går.
Og du kan downloade kilden så godt.
I det næste afsnit i denne lille tutorial vil vi bruge det samme, men med en lille smule af komfort.
Anvendelse nemmere metode
Alt forbliver næsten uændret. Vi vil bare ændre ajax-metoden her. Så i stedet for at skrive hele $. Ajax blok vi kan opnå det samme med følgende.
. ready ( function ( ) { $ (Document). Klar (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Klik (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Denne) attr ("rel")) belastning ($ (denne) attr ("href").); ; return false; }); });
Det er meget mindre kompliceret nu, right? Belastningen Metoden indlæser ajax indholdet i elementet det er knyttet til. Hvis $ ("# somediv_id"). Belastning ("mypage.php"), vil den forsøge at indlæse mypage.php 's indhold i det. Ret simpelt, hva? Men jeg foreslå dig at vænne sig til den vigtigste metode (vist i første del).
I zip-filen er der en anden fil kaldet ajax2.php som viser denne methos der har det samme resultat.
Så AJAX er ikke så svært som det lyder, right? Når du bliver meget flydende med AJAX-operationer, skal du oprette magi.
Tak for læsning btw.
Seneste kommentarer