杞澆google榪欑瘒鍙戣〃鍦?a >Devmo涓婄殑AJAX: Getting Started銆?/p>
鐩綍
- 浠涔堟槸AJAX錛?/a>
- 絎竴姝ワ細(xì)濡備綍鍙戝嚭涓涓狧TTP璇鋒眰
- 絎簩姝ワ細(xì)澶勭悊鏈嶅姟鍣ㄧ殑鍝嶅簲
- 絎笁姝ワ細(xì)涓涓畝鍗曠殑渚嬪瓙
- 絎洓姝ワ細(xì)涓?acronym title="Extensible Markup Language">XML鍝嶅簲鍗忓悓宸ヤ綔
浠涔堟槸AJAX
AJAX鏄竴涓柊鐨勫悎鎴愭湳璇紝闅愬惈浜?jiǎn)涓や釜宸簿l忓瓨鍦ㄥ騫寸殑JavaScript鐗規(guī)э紝浣嗘槸鐩村埌鏈榪戯紝闅忕潃涓浜涜濡侴mail銆丟oogle Suggest浠ュ強(qiáng)Google Maps鐨勮槳鍔紝鎵嶈璁稿緗戠粶寮鍙戣呮墍娉ㄦ剰鍒般?/p>
鎴戜滑鎵璁ㄨ鐨勪袱涓狫avaScript鐨勭壒鎬ф槸浣犺兘澶燂細(xì)
- 鍚戞湇鍔″櫒鍙戝嚭璇鋒眰鑰屼笉闇閲嶆柊鍔犺澆浠諱綍欏甸潰
- 瑙ｆ瀽XML鏂囨。騫朵笖涓庝箣鍗忓悓宸ヤ綔
AJAX鏄竴涓緝鍐欙紝A鏄寚"asynchronous"錛堝紓姝ョ殑錛夛紝瀹冭〃紺轟綘鍙互鍦ㄥ悜鏈嶅姟鍣ㄥ彂鍑轟竴涓狧TTP璇鋒眰鍚庯紝杈瑰仛鍏朵粬鐨勪簨鎯咃紝杈圭瓑寰呮湇鍔″櫒鐨勫搷搴斻?strong>JA琛ㄧず"JavaScript"錛?strong>X琛ㄧず"XML"錛堝彲鎵╁睍鏍囪璇█錛夈?/p>
絎竴姝ワ細(xì)濡備綍鍙戝嚭涓涓狧TTP璇鋒眰
涓轟簡(jiǎn)鐢↗avaScript鍚戞湇鍔″櫒鍙戝嚭涓涓狧TTP璇鋒眰錛屼綘闇瑕佷竴涓被鐨勫疄渚嬫潵鎻愪緵緇欎綘榪欑鍔熻兘銆傝繖涓被鍘熸湰鍦↖E閲岃浣滀負(fù)涓涓狝ctiveX瀵硅薄鎻愬嚭錛屽彨XMLHTTP銆傜劧鍚庯紝Mozilla銆丼afari浠ュ強(qiáng)涓浜涘叾浠栫殑嫻忚鍣ㄧ浉緇ц窡闅忥紝鍑虹幇浜?jiǎn)涓涓?code>XMLHttpRequest綾伙紝鍏舵敮鎸佸井杞殑ActiveX瀵硅薄鍘熸湰鐨勬柟娉曞拰灞炴с?/p>
鎵浠ワ紝涓轟簡(jiǎn)鑳藉璺ㄦ祻瑙堝櫒鍦板垱寤鴻繖涓被鐨勫璞★紝浣犻渶瑕佽繖鏍鳳細(xì)
if (window.XMLHttpRequest) { // Mozilla, Safari,
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
錛堜互涓婁緥瀛愪腑鐨勪唬鐮侊紝鏄竴涓敤鏉ユ瀯寤篨MLHTTP瀹炰緥鐨勭畝鍗曠増鏈紝瀹為檯浣跨敤鏃剁殑渚嬪瓙璇峰弬瑙佹湰鏂囩殑絎笁姝ワ級(jí)
濡傛灉鏈嶅姟鍣ㄧ鐨勫搷搴斾腑娌℃湁鍖呭惈XML鐨刴ime-type鎶ュご錛坔eader錛夛紝鏈変簺鐗堟湰鐨凪ozilla嫻忚鍣ㄥ彲鑳戒笉浼?xì)澶勭悊銆傛墍浠ワ紝涓轟簡(jiǎn)瀹夊叏璧瘋錛屼綘鍙互鐢ㄤ竴涓壒孌婄殑鏂規(guī)硶鏉ョ粰鏈嶅姟鍣ㄧ鍙戝嚭鐨勫搷搴斿己鍔犱笂榪欎釜鎶ュご錛屼互闃插叾涓嶆槸text/xml綾誨瀷銆?/p>
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');涓嬩竴姝ュ氨鏄綘鏉ュ喅瀹氬湪鏈嶅姟鍣ㄥ浣犵殑璇鋒眰浣滃嚭鍝嶅簲鍚庯紝浣犲噯澶囧仛浠涔堛傝繖涓闃舵錛屼綘鍙渶瑕佸憡璇塇TTP璇鋒眰瀵硅薄錛圚TTP request object錛夌敤鍝竴涓狫avaScript鍑芥暟鏉ュ鐞嗚繖涓鍝嶅簲銆傝繖涓姝ョ敤璁劇疆璇ュ璞?code>onreadystatechange灞炴т負(fù)鐩稿簲鐨凧avaScript鍑芥暟鍚嶆潵瀹炵幇錛?/p>
http_request.onreadystatechange = nameOfTheFunction;娉ㄦ剰錛屽湪鍑芥暟鍚嶅悗闈㈡病鏈夋嫭鍙楓傚彟澶栧涓嬪畾涔夊鐞嗗搷搴旂殑鍑芥暟錛?/p>
http_request.onreadystatechange = function(){
// 澶勭悊鍝嶅簲
};鎺ヤ笅鏉ワ紝鏃㈢劧浣犲凡緇忓０鏄庝簡(jiǎn)鍦ㄦ帴鍒板搷搴斿悗騫蹭粈涔堬紝浣犲氨闇瑕佸幓鍙戝嚭璇鋒眰銆備綘闇瑕佽皟鐢℉TTP璇鋒眰綾葷殑open()鍜?code>send()鏂規(guī)硶錛?/p>
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);open()鏂規(guī)硶鐨勭涓涓弬鏁版槸HTTP璇鋒眰鐨勬柟寮忊斺擥ET銆丳OST銆丠EAD鎴栬呬換浣曞叾瀹冧綘鎯充嬌鐢ㄧ殑錛屼綘鐨勬湇鍔″櫒鏀寔鐨勬柟寮忋傛柟寮忕殑鍚嶇О瑕佸ぇ鍐欙紝鍚﹀垯鏈変簺嫻忚鍣紙濡侳irefox錛夊彲鑳藉氨涓嶄細(xì)澶勭悊璇鋒眰銆傚彲浠ュ幓 W3C specs鑾峰彇鏇村鐨勪綘鍙互浣跨敤鐨凥TTP璇鋒眰鏂瑰紡鐨勪俊鎭?- 絎簩涓弬鏁版槸浣犳墍璇鋒眰欏甸潰鐨刄RL銆?
- 絎笁涓弬鏁版槸鐢ㄦ潵璁劇疆璇鋒眰鏄惁涓哄紓姝ョ殑銆傚鏋滄槸
TRUE錛屽垯鍦ㄦ湇鍔″櫒灝氭湭榪斿洖鍝嶅簲鐨勬椂鍊欙紝JavaScript鐨勫嚱鏁頒細(xì)緇х畫鎵ц銆傝繖涔熷氨鏄疉JAX涓殑A鐨勫惈涔夈?/li>
send()鏂規(guī)硶鐨勫弬鏁板彲浠ヤ嬌浠諱綍浣犲笇鏈涗紶閫掔粰鏈嶅姟鍣ㄧ殑鏁版嵁錛屾暟鎹簲璇ヤ負(fù)濡備笅鏍煎紡鐨勬煡璇覆錛?/p>
name=value&anothername=othervalue&so=on絎簩姝ワ細(xì)澶勭悊鏈嶅姟鍣ㄥ搷搴?/h3>
璁頒綇錛屽綋浣犲悜鏈嶅姟鍣ㄥ彂鍑轟簡(jiǎn)涓涓姹傦紝浣犱篃灝卞彂鍑轟簡(jiǎn)涓涓璁捐鐢ㄦ潵澶勭悊鍝嶅簲鐨凧avaScript鍑芥暟鐨勫悕瀛椼?/p>
http_request.onreadystatechange = nameOfTheFunction;
鎴戜滑鏉ョ湅鐪嬭繖涓嚱鏁伴兘搴旇鍋氫簺浠涔堛傞鍏堬紝鍏墮渶瑕佹鏌ヨ姹傜殑鐘舵侊紝濡傛灉鐘舵佺殑鍊間負(fù)4錛岄偅涔堝氨鎰忓懗鐫鍏ㄩ儴鐨勬湇鍔″櫒鍝嶅簲閮藉凡鎺ュ彈瀹屾瘯錛屼綘鍙互緇х畫鏉ュ鐞嗕簡(jiǎn)銆?/p>
if (http_request.readyState == 4) {
// 涓鍒囧氨緇紝鐩告槧宸叉帴鍙楀畬鎴?br />} else {
//灝氭湭灝辯華
}readyState鍏ㄩ儴鍊肩殑鍒楄〃濡備笅錛?
- 0錛堟湭鍒濆鍖?uninitialized錛?
- 1錛堟鍦ㄥ姞杞?loading錛?
- 2錛堝姞杞藉畬姣?loaded錛?
- 3錛堜氦浜?interactive錛?
- 4錛堝畬鎴?complete錛?/li>
涓嬩竴姝ユ槸媯(gè)鏌TTP鏈嶅姟鍣ㄥ搷搴旂殑鎯呭喌浠ｇ爜銆傛墍鏈夊彲鑳界殑浠ｇ爜閮借鍒楀湪浜?a title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" >W3C鐨勭綉绔?/a>涓娿傜洰鍓嶏紝鎴戜滑鍙200 OK鍝嶅簲鎰熷叴瓚ｃ?/p>
if (http_request.status == 200) {
// 媯掓瀬浜?jiǎn)锛?br />} else {
// 璇鋒眰鍑轟簡(jiǎn)浜涢棶棰橈紝
// 姣斿鍝嶅簲鍙兘鏄?04(Not Found)錛屾湭鎵懼埌
// 鎴栬?00錛屽唴閮ㄦ湇鍔″櫒閿欒
}鍦ㄤ綘媯(gè)鏌ュ畬璇鋒眰鐨勭姸鎬佸拰HTTP鍝嶅簲鎯呭喌鍚庯紝浣犲氨鍙互鑷繁鍐沖畾瀵規(guī)湇鍔″櫒鍙戦佺粰浣犵殑鏁版嵁浣滀粈涔堟牱鐨勫鐞嗕簡(jiǎn)銆備綘鏈変袱縐嶉斿緞鏉ヨ闂繖浜涙暟鎹細(xì)
http_request.responseText灝嗕細(xì)鎶婃湇鍔″櫒鐨勫搷搴斾綔涓轟竴涓枃鏈覆榪斿洖http_request.responseXML灝嗘妸鍝嶅簲浣滀負(fù)涓涓?code>XMLDocument瀵硅薄榪斿洖錛屼綘鍙互鐢↗avaScript鐨勬枃妗ｅ璞℃ā鍨嬶紙DOM錛夌殑鍑芥暟鏉ュ鐞?/li>
絎笁姝ワ細(xì)涓涓畝鍗曠殑渚嬪瓙
鎴戠幇鍦ㄦ潵鍋氫竴涓畝鍗曠殑HTTP璇鋒眰銆傛垜浠殑JavaScript鑴氭湰灝嗕細(xì)璇鋒眰涓涓狧TML鏂囨。錛?code>test.html錛屽叾鍖呭惈浜?jiǎn)涓孌墊枃鏈斺斺滆繖鏄竴涓祴璇曘傗濃斺旂劧鍚庢垜浠細(xì)alert() test.html鐨勫唴瀹廣?/p>
<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up聽:( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.html')">
鍙戝嚭璇鋒眰
</span>鍦ㄨ繖涓緥瀛愪腑錛?
- 鐢ㄦ埛鍦ㄦ祻瑙堝櫒閲岀偣鍑燴滃彂鍑?guó)櫙锋眰鈥濓紙make a request錛夛紱
- 榪欎細(xì)璋冪敤
makeRequest()鍑芥暟錛屽茍涓旈檮鏈夊弬鏁?code>test.html錛屼竴涓嚜闃垮悓涓鐩綍涓嬬殑HTML鏂囨。鐨勫悕瀛椼? - 璇鋒眰琚彂鍑猴紝鐒跺悗錛?code>onreadystatechange錛夋搷浣滆浼犻掔粰
alertContents()錛? alertContents()媯(gè)鏌ュ搷搴旀槸鍚﹁鎺ユ敹鍜屾槸鍚︾姸鎬佷負(fù)鈥淥K鈥濓紝鐒跺悗alert() test.html鏂囦歡鐨勫唴瀹廣?/li>
浣犲彲浠ュ湪榪欓噷嫻嬭瘯榪欎釜渚嬪瓙錛屽茍涓斿彲浠ュ湪榪欓噷鐪嬭嫻嬭瘯鏂囦歡銆?/p>
涓嶺ML鍝嶅簲鍗忓悓宸ヤ綔
鍦ㄤ笂涓緥瀛愪腑錛屽湪HTTP鍝嶅簲琚帴鏀跺畬姣曞悗錛屾垜浠拰浣跨敤浜?jiǎn)璇锋眰瀵硅薄鐨?code>responseText灞炴э紝鍏跺寘鍚簡(jiǎn)test.html鏂囦歡鐨勫唴瀹廣傜幇鍦紝璁╂垜浠瘯璇?code>responseXML灞炴с?/p>
璁╂垜浠幇鍦ㄥ氨鍒涘緩涓涓湁鏁堢殑XML鏂囨。錛岃繖涓枃妗ｇ◢鍚庝細(xì)琚垜浠姹傘傛枃妗ｏ紙test.xml錛夊寘鎷細(xì)
<?xml version="1.0"聽encoding="utf-8"聽?>
<root>
榪欐槸涓祴璇?
</root>...
onclick="makeRequest('test.xml)">
...鐒跺悗鍦?code>alertContents()閲屾妸alert()琛屾浛鎹㈡垚alert(http_request.responseText);錛屽茍涓旓紝鍦ㄥ叾涓婃柟鍐欎笅錛?pre>var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);榪欐牱錛屾垜浠幏鍙栦簡(jiǎn)responseXML涓殑XMLDocument瀵硅薄錛屽茍涓旂敤DOM鏂規(guī)硶鏉ヨ闂簡(jiǎn)XML鏂囨。涓墍鍖呭惈鐨勬煇浜涘唴瀹廣備綘鍙互鍦?a title="http://www.w3clubs.com/mozdev/test.xml" >榪欓噷嫻忚鍒?code>test.xml錛屾洿鏂板悗鐨勮剼鏈彲浠ュ湪榪欓噷寰楀埌銆?/p>
鍙互鍘?a title="http://www.mozilla.org/docs/dom/" s DOM implementation鑾峰彇鏇村鐨凞OM鏂規(guī)硶銆?/p>