Så AJAX AJAX och AJAX, det är vad vi gör i stor utsträckning i dessa dagar. Det sparar tid, tillägger dynamik och ger dig en känsla av att använda ett slags program för känsla. Det är många sätt att använda AJAX med många bibliotek. Men som ni kan se här webbplatsen är för jQuery, kommer vi att titta på de grundläggande eller kanske vissa avancerade AJAX användningar.
Vad tycker du vi behöver?
jQuery biblioteket (naturligtvis)
En liten php script
Låt oss började tala. I jQuery, det finns i princip 6 typer av metod att göra AJAX verksamheten. Dessa är
- $. Ajax (tillval)
- $. Get (url, data, återuppringning)
- $. GetJSON (url, data, återuppringning)
- $. GetScript (url, callback)
- belastning (url, data, återuppringning)
- $. Post (url, data, återuppringning,
Bortsett från nummer 1, alla andra metoder använder $. Ajax internt. Så det betyder $. Ajax () är vår moder funktion för jQuery AJAX verksamhet. Låt oss titta på hur $. Ajax () ser ut
$. Ajax ({ , Typ: "POST", , url: "some.php" , data: "name = Peter & location = NY", ( msg ) { framgång: function (msg) { "Server Response " + msg ) ; alert ("Server Response" + msg); } });
Det är ganska det. Type-parametern tar "GET" eller "POST" vilket innebär att du kan skicka AJAX requestion som POST eller GET (jag föredrar POST alltid). Resten av parametrarna är ganska självförklarande om du tar en titt på koden igen.
Nu ska vi göra en liten AJAX skript som läser länken av hyperlänk taggar (<a>) och laddar begäran om vissa div element i dokumentet.
Först tar vi en normal html i php dokument som ser ut så här
<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 länk 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>
Låt oss nu lägga till några länkar till dokumentet. För en bättre meny sorts utseende som vi kommer att använda en UL> LI och Link. Det kommer att se ut så här
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Belastning i Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Belastning i Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Belastning i Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Belastning i Div 4 </ a> </ li> </ Ul>
Som ni kan se har vi lagt länkar i listelement inuti en oordnad lista objekt. Ta en närmare titt på <a> taggens egenskaper. Vi har href, klass och rel-attribut som ser något annorlunda ut än en vanlig länk. Om du ser har vi gett rel-attributet till några div namn säga div1 och div2 .. så vidare. Det innebär att vi vill att svar href som skall laddas in i dessa divar. Hur göra det? Låt oss lägga till dessa Divar 1:a
<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>
Och den reella delen nu - vi har gett länkarna en klass "ajax_link". Vi kommer bara dynamiskt att lägga ajax åtgärderna endast länkar som har ett klassnamn som kallas "ajax_link". Fan, vi inte alla länkar på en sida att ha ajax åtgärder, gör vi?
Så på dokument last vi skulle göra detta.
. ready ( function ( ) { $ (Document). Klar (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Klicka på (function () { this ) ; $ Current_link = $ (this); $. Ajax ({ , Typ: "post", ( "href" ) , URL:. $ current_link attr ("href"), ( e ) { framgång: function (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; return false; }); });
Låt mig förklara manuset lite. Den document.ready händelse är en händelse som utlöses på sidan belastning. Och sedan vi tilldelar någon form av koder på ett klick vid länkarna som har en klass "ajax_link". Att göra denna $ current_link = $ (this); gör det möjligt att få den aktuella länken objektet finnas i callback-funktionen. Och vi har
$ ("#" + $ Current_link.attr ("rel")). Html (e)
vilket betyder $ ("div_id") html (server_response) och vi har satt url param av $ Ajax-funktionen dynamiskt med url:.. $ current_link.attr ("href"). Så nu alla dessa medel "Alla dessa länkar som har en klass" ajax_link "- Lägg till en handler click-händelse - sedan köra och AJAX begäran med länkarna href poperty och ladda svaret i en div vars ID matchar" rel "-attributet i länk ". Och avkastningen falska förhindrar länken arbete som normal länk 
Vill se den en handling? Här går.
Och du kan ladda ner källkoden också.
I nästa avsnitt av denna lilla guiden kommer vi att använda samma sak men med lite tröst.
Tillämpning enklare metod
Allt är nästan detsamma. Vi ska bara byta ajax metoden här. Så istället för att skriva hela $. Ajax blocket kan vi uppnå samma sak med följande.
. ready ( function ( ) { $ (Document). Klar (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Klicka på (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) last ($ (this) attr ("href").) ; return false; }); });
Det är mycket mindre komplicerat nu, eller hur? Belastningen Metoden laddar Ajax innehållet i elementet det är fäst. Om $ ("# somediv_id"). Belastning ("mypage.php"), kommer den försöker ladda mypage.php: s innehåll i den. Ganska enkelt, va? Men jag föreslår att du vänjer den huvudsakliga metoden (visas i den första delen).
I zip-filen finns en annan fil som heter ajax2.php som visar detta Methos som har samma resultat.
Så, AJAX inte så svårt som det låter, eller hur? När du blir väldigt flytande med AJAX verksamhet, skapar du magics.
Tack för att läsa btw.
Senaste kommentarer