Kaya AJAX AJAX at AJAX, na kung ano ang ginagawa namin malawakan mga araw na ito. Ito sine-save ng oras, nagdadagdag ng dynamics at nagbibigay sa iyo ng isang pakiramdam ng paggamit ng isang uri ng software application ng pakiramdam. May handa 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, titingnan namin ang basic o marahil ilang mga advanced na AJAX usages.
Ano ang kailangan namin?
jQuery library (siyempre)
Isang napakaliit na php script
Sabihin nagsimulang pakikipag-usap. Sa jQuery, mayroong isa lamang 6 na uri ng mga paraan upang gawin operasyon AJAX. Ito ang mga
- $. Ajax (mga pagpipilian)
- $. Makakuha (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 gamitin $. Ajax loob. Kaya ito ay nangangahulugan na $. Ajax () ay ang aming ina-andar para sa mga pagpapatakbo ng jQuery AJAX. Tingnan natin kung paano $. Ajax () kamukha
$. Ajax ({
, uri: "POST",
, url: "some.php",
, data: "pangalan = Peter & lokasyon = NY",
( msg ) { tagumpay: function na (msg) {
+ msg ) ; alert ("Pagtugon ng Server" + msg);
}
}); |
Iyan ay medyo ito. Ang uri ng parameter na tumatagal ng "GET" o "POST" na nangangahulugan na maaari mong ipadala AJAX requestion bilang POST o GET (Gusto ko ginusto POST palagi). Ang natitira sa ang mga parameter ay medyo sarili nagpapaliwanag kung tingnan muli ang code.
Ngayon kami ay pagpunta upang makagawa ng isang maliit na script ng AJAX na bumabasa ng mga link ng mga tag hyperlink (<a>) at ikinarga ang kahilingan sa ilang mga elemento ng div sa dokumento.
Unang-alang namin ang isang normal na html ng php dokumento na ganito ang magiging hitsura
<DOCTYPE html MGA! "- / / W3C / / DTD XHTML 1.0 Mahigpit / / 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 pagsubok </ 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 sabihin magdagdag ng ilang mga link sa mga dokumento. Para sa isang mas mahusay na uri menu ng hitsura gagamitin namin ang isang ul> li at Link. Iyon ay 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 ang mga link ilagay sa listahan ng mga elemento sa loob ng isang unordered bagay na listahan. Kumuha ng mas malapit tumingin sa mga katangian ng ang <a> tag ni. Mayroon kaming href, klase at rel attribute na kamukha walang iba kaysa sa normal na link. Kung nakikita mo, aming ibinigay ang rel attribute sa ilang mga pangalan ng div lalo div1, div2 .. iba pa. Ang ibig sabihin nito gusto namin ang tugon ng href upang mai-load sa mga divs. Paano upang gawin iyon? Sabihin magdagdag ng mga divs muna
<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 ang ibinigay na mga link sa isang class "ajax_link". Kami lamang dynamic na magdagdag ng mga ajax pagkilos lamang ang mga link sa pagkakaroon ng isang pangalan ng klase na tinatawag na "ajax_link". Impiyerno, hindi namin ang lahat ng mga link ng isang pahina upang magkaroon ajax pagkilos, gagawin namin?
Kaya, sa dokumento ng pagkarga nais naming gawin ito.
. ready ( function ( ) { $ (Dokumento). Handa (function na () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function na () {
this ) ; $ Current_link = $ (ito);
$. Ajax ({
, uri: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { tagumpay: function na (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; bumalik false;
});
}); |
Hayaan akong ipaliwanag ang script ng kaunti. Ang document.ready kaganapan ay isang kaganapan na kung saan ay nag-trigger sa page load. At pagkatapos kami ay nagtatalaga ng isang uri ng mga code sa pag-click ng kaganapan sa mga link na may isang class "ajax_link". Ang paggawa nito $ current_link = $ (ito); nagbibigay-daan upang magkaroon ng kasalukuyang object link na magagamit sa loob ng function na callback. At mayroon kami
$ ("#" + $ Current_link.attr ("rel")). Html (e)
na nangangahulugang $ ("div_id") html (server_response) at hindi na namin itakda ang url param ng $ ajax function na may pabagu-bagong url:.. $ current_link.attr ("href"). Kaya ngayon ang lahat ng mga paraan "Lahat ng mga link na iyon na may isang class" ajax_link "- Magdagdag ng isang pag-click handler ng kaganapan - pagkatapos ay i-execute at AJAX kahilingan paglalaan ng mga link href poperty at i-load ang mga tugon sa isang div na may id na tumutugma sa" rel "na katangian ng link ". At ang return false pinipigilan ang link sa trabaho tulad ng normal na link 
Nais mong makita ito ng isang pagkilos? Narito ito napupunta.
At maaari mong i-download ang pinagmulan pati na rin.
Sa susunod na seksyon ng ito maliit tutorial lilikha kami gamit ang parehong bagay ngunit may kaunting ginhawa.
Paglalapat ng mas madaling paraan
Lahat ay nananatiling halos pareho. Susubukan naming baguhin lamang ang ajax pamamaraan dito. Kaya sa halip ng pagsulat ng buong $. Ajax bloke maaari naming makamit ang parehong bagay sa mga sumusunod.
. ready ( function ( ) { $ (Dokumento). Handa (function na () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function na () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Ito) attr ("rel")) pagkarga ($ (ito) attr ("href").);
; bumalik false;
});
}); |
Mas marami mas kumplikadong ngayon, tama? Ang pamamaraan ng pag-load ikinarga ang ajax nilalaman sa loob ng mga elemento ito ay naka-attach sa. Kung $ ("# somediv_id"). Load ("mypage.php"), ito ay subukan upang i-load mypage.php 's nilalaman sa loob nito. Medyo simple, huh? Ngunit iminumungkahi i mo masanay sa pangunahing pamamaraan (ipinapakita sa unang bahagi).
Sa file zip mayroong isa pang file na tinatawag na ajax2.php na ito ay nagpapakita ng methos na may parehong resulta.
Kaya, ang AJAX ay hindi bilang mahirap bilang ito tunog, tama? Kapag ikaw ay naging napaka matatas sa AJAX operasyon, gagawa ka ng magics.
Salamat sa pagbabasa btw.
Mga Kamakailang Komento