Deci, Ajax si AJAX, asta e ceea ce facem noi pe scară largă în aceste zile. Se economisește timp, adaugă dinamică și vă oferă o senzație de a folosi un fel de aplicație software de simt. Nu sunt multe moduri de a folosi AJAX cu mai multe biblioteci. Dar, după cum puteți vedea acest site este pentru jQuery, ne vom uita la cele de bază, sau, poate, câteva întrebuințări avansate AJAX.
Ce ai nevoie?
biblioteca jQuery (desigur)
Un script PHP mici
Să început să vorbim. În jQuery, există practic 6 tipuri de metode de a face operațiuni AJAX. Acestea sunt
- $. Ajax (opțiuni)
- $. Obține (url, date, invers)
- $. GetJSON (url, date, invers)
- $. GetScript (url, invers)
- Sarcina (URL-ul, de date, invers)
- $. Mesaj (URL-ul, de date, de apel invers,
În afară de la numărul 1, toate celelalte metode folosesc $ Ajax intern.. Asta înseamnă $. Ajax () este funcția noastră mamă pentru operațiunile de jQuery AJAX. Să ne uităm la modul $. Ajax () arata ca
$. Ajax ({
, Tip: "POST",
, url: "some.php",
, Date: "name = Peter & locație = NY",
( msg ) { succes: Funcția (msg) {
+ msg ) ; alert ("Răspuns server" + msg);
}
}); |
Asta e destul de ea. Tip de parametru ia "GET" sau "POST", ceea ce înseamnă că puteți trimite AJAX requestion ca POST sau GET (aș prefera POST întotdeauna). Restul parametrilor sunt destul de sine explicativ, dacă aruncăm o privire la codul nou.
Acum vom face un mic script AJAX care citește pe link-ul de tag-uri hyperlink (<a>) și încarcă cererea de pe unele elemente div în document.
În primul rând vom lua o HTML normală a documentului PHP care va arata ca aceasta
<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 testare link-ul </ 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> |
Acum, haideți să adăugați câteva link-uri la document. Pentru un tip de meniu mai bună de look vom folosi un UL> LI și Link. Care va arata ca aceasta
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> de încărcare din Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> de încărcare din Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> de încărcare în Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> de încărcare în Div 4 </ a> </ li>
</ Ul> |
După cum puteți vedea, am pus link-uri la elementele din lista din interiorul unui obiect lista neordonata. Aruncati o privire mai atentă la proprietățile tag <a> lui. Avem href, de clasă și atribut rel care arată nimic diferit de un link-ul normal. Dacă vedeți, ne-am dat atributul rel la unele nume div anume Div1, div2 .. așa mai departe. Acest lucru înseamnă că ne dorim răspunsul a href să fie încărcate în aceste divs. Cum să faci asta? Să adăugăm aceste divs primul
<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> |
Și partea reală acum - am dat link-urile de clasa "ajax_link". Vom adăuga numai dinamic acțiuni ajax doar link-uri cu un nume de clasa numita "ajax_link". La naiba, noi nu toate link-urile de o pagină pentru a avea acțiuni Ajax, nu-i așa?
Deci, pe Încărcați documentul vom face acest lucru.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function () {
this ) ; $ Current_link = $ (aceasta);
$. Ajax ({
, Tip: "mesaj",
( "href" ) , URL:. $ current_link attr ("href"),
( e ) { succes: funcția (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Permiteți-mi să explic scenariul un pic. Evenimentul document.ready este un eveniment care este declanșat de încărcare a paginii. Și apoi vom atribui un fel de coduri în cazul clic pe link-urile care au o clasa "ajax_link". Făcând acest lucru $ current_link = $ (aceasta), permite de a avea obiectul link-ul de curent să fie disponibile în funcție de apel invers. Și ne-am
$ ("#" + $ Current_link.attr ("rel")). Html (e)
ceea ce înseamnă $ ("div_id") html (server_response) și ne-am stabilit param URL a funcției Ajax $ dinamic cu url:.. $ current_link.attr ("href"). Deci, acum, toate aceste mijloace "Toate aceste link-uri care au o clasa" ajax_link "- Adaugă un eveniment click manipulare - apoi executa și cererea AJAX a lua link-uri href poperty și încărcați răspuns într-un div al cărui ID se potrivește cu" rel "atribut al Link ". Și revenirea falsă împiedică activitatea link ca link-ul normal 
Vrei sa vezi o acțiune? Aici merge.
Și puteți descărca sursa , de asemenea.
În următoarea secțiune a acestui mic tutorial vom folosi același lucru, dar cu un pic de confort.
Aplicarea metodă mai ușoară
Totul rămâne aproape aceeași. Vom schimba doar metoda ajax aici. Deci, în loc de a scrie întregului bloc ajax $. Putem realiza acelasi lucru cu următoarele.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Aceasta) attr ("rel")) de încărcare ($ (aceasta) attr ("href").);
; return false;
});
}); |
Este mult mai puțin complicată acum, nu? Metoda de încărcare încarcă conținutul Ajax în elementului este atașat. Dacă $ ("# somediv_id"). Sarcina ("mypage.php"), va încerca să încarce conținut mypage.php e în ea. Destul de simplu, nu-i asa? Dar vă sugerez să te obișnuiești cu metoda principală (prezentat în prima parte).
În fișierul zip exista un alt fișier numit ajax2.php care demonstrează acest methos care are același rezultat.
Deci, AJAX nu este la fel de greu pe cât pare, nu? Când vei deveni foarte fluent, cu operațiuni AJAX, veți crea magie.
Multumesc pentru lectură BTW.
Comentarii recente