Kaya ang AJAX AJAX at AJAX, na kung ano ang gagawin namin nang husto mga araw na ito. Ito ay nakakatipid ng oras, nagdadagdag dinamika at nagbibigay sa iyo ng isang pakiramdam ng paggamit ng isang uri ng software ng application ng pakiramdam. May na maraming mga paraan upang gamitin ang AJAX na may maraming mga aklatan. Ngunit bilang maaari mong makita ang site na ito ay para sa jQuery, kami ay tumingin sa ang pangunahing o marahil ilang mga advanced na mga usages ng AJAX.
Ano ang kailangan namin?
jQuery library (siyempre)
Ang isang maliit na php script
Sabihin nagsimulang pakikipag-usap. Sa jQuery, doon ay talaga 6 na uri ng mga paraan upang gawin ang operasyon AJAX. Ito ang mga
- $. Ajax (mga pagpipilian)
- $. Makakuha ng (url, data, callback)
- $. GetJSON (url, data, callback)
- $. GetScript (url, callback)
- load (url, data, callback)
- $. Post (url, data, callback,
Bukod sa numero 1, ang lahat ng iba pang mga pamamaraan ay gumagamit ng $. Ajax loob. Kaya ibig sabihin $. Ajax () ay ang aming ina function para sa jQuery mga operasyon ng AJAX. Sabihin tumingin sa kung paano $. Ajax () Mukhang
$. Ajax ({ , uri: "POST", , url: sa "some.php", , data: "pangalan = Peter & lokasyon = NY", ( msg ) { tagumpay: function na (MSG) { "Server Response " + msg ) ; alert ("Server Response" + MSG); } });
Iyan ay sa katangian nito. Ang uri ng parameter ay tumatagal ng "GET" o "POST" na nangangahulugan na maaari mong ipadala ang ang AJAX requestion ng POST o GET (Gusto ko ginusto ang POST laging). Ang natitirang bahagi ng ang mga parameter ay medyo sarili nagpapaliwanag kung tumagal ng isang hitsura sa code muli.
Ngayon kami ay pagpunta sa gumawa ng isang maliit na script ng AJAX na bumabasa ang link ng mga tag sa hyperlink (<a>) at ikinarga ang mga kahilingan sa ilang mga elemento ng div sa dokumento.
Una naming gumawa ng isang normal na html ng php dokumento na ganito ang hitsura
<DOCTYPE html MGA! "- / / W3C / / DTD XHTML 1.0 Mahigpit na / / 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 na pagsubok ng link </ 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>
Ngayon ipaalam sa magdagdag ng ilang mga link sa dokumento. Para sa isang mas mahusay na uri ng menu ng hitsura namin gumamit ng ul> li at Link. Na ganito ang hitsura
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> load sa div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> load sa div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> load sa div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> load sa div 4 </ a> </ li> </ Ul>
Tulad ng iyong nakikita namin na maglagay ng mga link sa mga elemento ng listahan sa loob ng isang unordered bagay listahan. Kumuha ng mas malapit hitsura sa mga katangian ng <a> tag. Mayroon kaming href, klase at rel attribute na mukhang walang ibang kaysa sa isang normal na link. Kung nakikita mo, kami ay nabigyan ng rel attribute sa ilang mga pangalan ng div katulad div1, div2 ... pa. Ang ibig sabihin nito gusto namin ang tugon ng href upang mai-load sa mga divs. Kung paano gawin iyon? Hayaan ng magdagdag ng mga divs unang
<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>
At ang tunay na bahagi na ngayon - namin ibinigay ang mga link sa isang klase sa "ajax_link". Kami lamang dynamic na magdagdag ng mga mga ajax aksyon lamang link na may isang klase ng pangalan na tinatawag na "ajax_link". Hell, hindi namin ang lahat ng mga link ng isang pahina na may ajax aksyon, gawin namin?
Kaya, sa dokumento load gusto naming gawin ito.
. ready ( function ( ) { $ (Dokumento). Handa (ang function () { ) . click ( function ( ) { $ (Sa "a.ajax_link"). Click (ang function () { this ) ; $ Current_link = $ (ito); $. Ajax ({ , uri: "post", ( "href" ) , url:. $ current_link attr ("href"), ( e ) { tagumpay: function ng (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; bumalik huwad; }); });
Ipaalam sa akin ipaliwanag ang script ng isang bit. Ang document.ready kaganapan ay isang kaganapan na kung saan ay nag-trigger sa pahina ng pagkarga. At pagkatapos kami ay nagtatalaga ng ilang mga uri ng code sa click na kaganapan sa mga link na may isang klase sa "ajax_link". Ginagawa ito $ current_link = $ (ito); ay nagbibigay-daan upang ang mga kasalukuyang link ng bagay na magagamit sa loob ng function na callback. At mayroon kaming
$ ("#" + $ Current_link.attr ("rel")). Html (e)
na nangangahulugan na $ (sa "div_id") html (server_response) at hindi na namin i-set ang url param ng ang $ function na ajax dynamic na url:. $ current_link.attr ("href"). Kaya ngayon lahat ng mga paraan "ang lahat ng mga link na iyon na may isang klase sa" ajax_link "- Magdagdag ng isang humahawak ng kaganapan ng pag-click - pagkatapos ay isakatuparan at ang AJAX hiling paglalaan ng mga link href poperty at mai-load ang mga tugon sa isang div na ang id na tumutugma sa" rel "na katangian ng link ". At ang return maling pinipigilan ang link sa trabaho tulad ng normal na link 
Wanna makita ito ng isang action? Narito ito napupunta.
At maaari mong i-download ang source pati na rin.
Sa susunod na seksyon ng ang maliit na tutorial na ito kami ay gamit ang parehong bagay ngunit sa isang maliit na bit ng aliw.
Paglalapat ng mas madaling paraan
Ang lahat ay nananatiling halos ang parehong. Kami lamang na baguhin ang paraan ng ajax dito. Kaya sa halip ng pagsulat ng buong $. Ajax block maaari naming makamit ang parehong bagay na may mga sumusunod.
. ready ( function ( ) { $ (Dokumento). Handa (ang function () { ) . click ( function ( ) { $ (Sa "a.ajax_link"). Click (ang function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ ("#" + $ (Ito) attr ("rel")) pagkarga ($ (ito) attr ("href").); ; bumalik huwad; }); });
Ito ay maraming mas kumplikadong ngayon, karapatan? Ang paraan ng pagkarga ikinarga ang ajax na nilalaman sa loob ng sangkap na ito ay naka-attach sa. Kung $ ("# somediv_id"). Load ("mypage.php"), makikita ito subukang i-load ng mypage.php ang nilalaman sa. Medyo simple, huh? Ngunit iminumungkahi i masanay sa pangunahing paraan (ipinapakita sa unang bahagi).
Sa ang zip file na may isa pang file na na tinatawag ajax2.php na nagpapakita ito methos na kung saan ay ang parehong resulta.
Kaya, ang AJAX ay hindi bilang mahirap bilang ito iyan, i-right? Kapag kayo ay masyadong matatas sa AJAX operasyon, kakailanganin mong lumikha ng mga magics.
Salamat sa pagbabasa btw.
Kamakailang Komento