Dus AJAX AJAX en AJAX, dat is wat we doen uitvoerig deze dagen. Het bespaart tijd, voegt dynamiek en geeft u een gevoel van het gebruik van een software applicatie soort voelen. Er zijn vele manieren om AJAX te gebruiken met veel bibliotheken. Maar zoals je kunt zien is deze site is voor jQuery, zullen we kijken naar de basis-of misschien een aantal geavanceerde AJAX-toepassingen.
Wat heb je we nodig?
jQuery library (natuurlijk)
Een klein php script
Laten we begonnen te praten. In jQuery, zijn er in principe 6 soorten methode om AJAX operaties doen. Dit zijn
- $. Ajax (opties)
- $. Get (url, data, callback)
- $. GetJSON (url, data, callback)
- $. GetScript (url, callback)
- load (url, data, callback)
- $. Post (url, data, terugbellen,
Afgezien van nummer 1, alle andere methoden te gebruiken $. Ajax intern. Dus dat betekent $. Ajax () is onze moeder functie voor jQuery AJAX operaties. Laten we eens kijken hoe $. Ajax () ziet eruit als
$. Ajax ({
, Type: "POST",
, url: "some.php",
, data: "name = Peter & locatie = NY",
( msg ) { succes: functie (msg) {
+ msg ) ; alert ("Reactie van server" + msg);
}
}); |
Dat is vrij het. De parameter type is "GET" of "POST" wat betekent dat je kunt AJAX requestion verzenden als POST of GET (ik zou POST altijd de voorkeur). De rest van de parameters zijn vrij duidelijk als je een kijkje nemen op de code opnieuw in te nemen.
Nu gaan we naar een klein AJAX script dat de koppeling van de hyperlink-tags (<a>) leest en laadt het verzoek op sommige div elementen in het document te maken.
Eerst nemen we een normale html van php document dat zal er als volgt uitzien
<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 verbindingstest </ 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> |
Laten we nu nog wat links naar de documenten. Voor een betere menu soort blik zullen we gebruik maken van een UL> LI en Link. Dat ziet er zo uit
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Load in Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Load in Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Load in Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Load in Div 4 </ a> </ li>
</ Ul> |
Zoals je kunt zien hebben we koppelingen hebben gezet in de lijst elementen binnen een ongeordende lijst object. Neem een kijkje op de eigenschappen van de tag <a>'s. We hebben href, klasse en rel attribuut die ziet niets anders dan een normale link. Als je ziet, hebben we het attribuut rel gegeven om wat div namen namelijk div1, div2 .. enzovoort. Dit betekent dat we willen dat de respons van de href in die divs worden geladen. Hoe dat te doen? Voegen we deze divs eerste
<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> |
En het reële deel nu - we hebben de links gegeven een klasse "ajax_link". We zullen alleen dynamisch ajax acties alleen koppelingen met een class naam genaamd "ajax_link" toe te voegen. Hell, we niet alle links van een pagina naar ajax acties hebben, doen we?
Dus, op document belasting zouden we dit doen.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klik (function () {
this ) ; $ Current_link = $ (this);
$. 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;
});
}); |
Laat het me uitleggen het script een beetje. De document.ready event is een gebeurtenis die wordt geactiveerd op pagina te laden. En dan gaan we het toewijzen een soort van codes op de gebeurtenis click van de links die een class "ajax_link". Door dit te doen $ current_link = $ (this); maakt het mogelijk om de huidige koppeling object beschikbaar zijn binnen de callback functie. En we hebben
$ ("#" + $ Current_link.attr ("rel")). Html (e)
wat betekent $ ("div_id") html (server_response) en we hebben de url param van de $ ajax functie in te stellen dynamisch met url:.. $ current_link.attr ("href"). Dus nu al die middelen "Al deze banden die een klasse" ajax_link "- Voeg een click event handler - vervolgens uitvoeren en AJAX verzoek het nemen van de koppelingen href poperty en laad de respons in een div waarvan het id overeenkomt met de" rel "attribuut van het koppelen ". En de return false voorkomt dat de koppeling werken als normale link 
Wil het zien van een actie? Hier gaat het.
En je kunt de broncode downloaden ook.
In het volgende deel van deze kleine handleiding zullen we met behulp van hetzelfde, maar met een beetje comfort.
Toepassen eenvoudiger methode
Alles blijft bijna hetzelfde. We zullen gewoon hier veranderen de ajax methode. Dus in plaats van het schrijven van de hele $. Ajax blok kunnen we hetzelfde bereiken met de volgende.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klik (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) belasting ($ (this) attr ("href").);
; return false;
});
}); |
Het is veel minder ingewikkeld nu, toch? De belasting-methode laadt de ajax gehalte in het element het is bevestigd aan. Als $ ("# somediv_id"). Load ("mypage.php"), het zal proberen om inhoud mypage.php 's laden erin. Vrij eenvoudig, hè? Maar ik stel voor dat je even wennen aan de belangrijkste methode (weergegeven in het eerste deel).
In het zip-bestand is er een ander bestand genaamd ajax2.php die dit methos die hetzelfde resultaat heeft demonstreert.
Dus, AJAX is niet zo moeilijk als het klinkt, toch? Wanneer je erg vloeiend met AJAX operaties, zul je magie te creëren.
Bedankt voor het lezen btw.
Recente Reacties