Så AJAX AJAX og AJAX, det er hvad vi gør omfattende i disse dage. Det sparer tid, tilføjer dynamik og giver dig en fornemmelse af at bruge en software applikation slags føler. Der er mange måder at bruge AJAX med mange biblioteker. Men som du kan se dette site er for jQuery, vil vi se på de grundlæggende eller måske nogle avancerede AJAX kutymer.
Hvad har du, vi har brug for?
jQuery bibliotek (selvfølgelig)
En lille php script
Lad os begyndte at tale. I jQuery, er der grundlæggende 6 typer metode til at gøre AJAX operationer. Disse er
- $. Ajax (optioner)
- $. Get (url, data, tilbagekald)
- $. GetJSON (url, data, tilbagekald)
- $. GetScript (url, tilbagekald)
- load (url, data, tilbagekald)
- $. Indlæg (url, data, tilbagekald,
Bortset fra nummer 1, alle de andre metoder bruger $. Ajax internt. Så det betyder $. Ajax () er vores mor funktion for jQuery AJAX operationer. Lad os se på, hvordan $. Ajax () ligner
$. Ajax ({
, typen: "POST",
, url: "some.php"
, data: "name = Peter & location = NY",
( msg ) { succes: function (msg) {
+ msg ) ; alert ("Server Reaktion" + msg);
}
}); |
Det er temmelig det. Den type parameter tager "GET" eller "POST", hvilket 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 vil vi lave en lille AJAX script, der læser linket til hyperlink tags (<a>) og indlæser anmodningen på nogle div elementer i dokumentet.
Først tager vi 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> |
Nu lad os tilføje nogle links til dokumentet. For en bedre menu slags ser vi 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"> 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 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, som ser noget anderledes end en normal link. Hvis du ser, har vi givet den rel attribut til nogle div navne nemlig Div1, div2 .. så videre. Det betyder, at vi ønsker, at svaret på href skal indlæses i disse divs. Sådan gør du det? Lad os tilføje disse divs først
<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 links en klasse "ajax_link". Vi vil kun dynamisk tilføje ajax handlinger kun links med en klasse navn kaldes "ajax_link". Hell, vi ikke alle de links på en side for at have ajax handlinger, gør vi?
Så på dokument belastning vi ville gøre dette.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klik (function () {
this ) ; $ Current_link = $ (dette);
$. Ajax ({
, typen: "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 lidt. Den document.ready begivenhed er en begivenhed, som udløses ved side belastning. Og så er vi tildele en slags koder på klik begivenheden af de links, der har en class "ajax_link". Gør denne $ current_link = $ (denne), gør det muligt at have den aktuelle link objektet 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 disse links, der har en class" ajax_link "- Tilføj et klik hændelseshandler - så udføre og AJAX anmodning tager links href poperty og indlæse reaktion i en div, hvis id matcher" rel "attribut i LINK ". Og return false forhindrer linket arbejde som normal 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, vi skal bruge de samme ting, men med en lille smule af komfort.
Anvende lettere metode
Alt forbliver næsten det samme. Vi vil bare ændre ajax metoden her. Så i stedet for at skrive hele $. Ajax blok vi kan opnå det samme med det følgende.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klik (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Dette) attr ("rel")) last ($ (dette) attr ("href").)
; return false;
});
}); |
Det er meget mindre kompliceret nu, right? Belastningen Metoden indlæser ajax indhold i det enkelte element, det er knyttet til. Hvis $ ("# somediv_id"). Load ("mypage.php"), vil den forsøge at indlæse mypage.php 's indhold i det. Ret simpelt, hva '? Men jeg foreslår, at du vænne sig til den vigtigste metode (vist i første del).
I zip-filen der er 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 at læse btw.
Seneste kommentarer