AJAX 上手篇
出自 MozTW Wiki
scvo edinburgh celeb porn brigham young university logos page video pelvic exam saw palmetto berry villains kimbo slice vs. sean gannon video page radiostationen premium sporting event tickets anime conan torrent adipex vs phentermine organic flaxseed idautomation crack sexy latina video argentina from male nudity video damsels in danger oakstone academy columbus tetanic partnership accounting index paul valery le cimetiere marin louisiana offshore fishing sailor scouts www.loliti.com free flash games appetizers britney thong a list of harrison fords movie rmtshutdown crack moldy mice ev nova crack mac anime cat girl galleries surfing girls massachusetts therapist western river past video perspective 5.0.2 tight fit wine storage cabinet map head shot top50 photography latina movie clips adderall weight search for audio and video zithromax allergy warranty services real movie live linux software for windows southern bells movie
éç¯æç« èªªæ AJAX ç¸éæè¡çåºç¤ï¼ä¸¦æä¾å¯¦ä¾ä¾æ¨ä¸æã
內容大綱
第ä¸æ¥ â 說è²ãè«ã ï¼å稱çºãæ麼ç¼åº XMLHttpRequestãï¼
çºäºç¨ JavaScript å°ä¼ºæå¨ç¼é HTTP è¦æ±ï¼å¿
é å
以ç¸éçé¡å¥ï¼classï¼è£½åºå¯¦é«ï¼instanceï¼ãInternet Explorer é¦å
以 ActiveX ç©ä»¶æ¹å¼æä¾ XMLHTTP
é¡å¥ï¼è MozillaãSafari åå
¶ä»ç覽å¨åé¨å¾ä»¥ XMLHttpRequest
é¡å¥æ¯æ´æ¤ ActiveX ç©ä»¶ä¸çé¡å¥å屬æ§ã
å æ¤ï¼å¦ææ³è·¨ç覽å¨ï¼é£éº¼å¯ä»¥é麼寫ï¼
if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); }
(ç±æ¼é段ç¨å¼å ä¾èªªæï¼æ以æ¯æ¡æç°¡æ¹å¼å¯«åºãæ¬æ第ä¸æ¥ä¸æå¦ä¸ç¨®æåæ¯è¼å¸¸ç¨ç寫æ³ã)
æäºçæ¬ç Mozilla ç覽å¨å¨ä¼ºæå¨éåçè³ææªå« XML mime-type æªé ï¼headerï¼ææåºé¯ãçºäºé¿å
éååé¡ï¼ä½ å¯ä»¥ç¨ä¸åæ¹æ³è¦å¯«ä¼ºæå¨å³åçæªé ï¼ä»¥å
å³åçä¸æ¯ text/xml
ã
http_request = new XMLHttpRequest(); http_request.overrideMimeType('text/xml');
æ¥ä¸ä¾æ¯è¦æ±ºå®ä¼ºæå¨å³åè³æå¾çèçæ¹å¼ï¼æ¤æä½ åªè¦ä»¥ onreadystatechange
éå屬æ§ææè¦èçå³åå¼ç JavaScript å½å¼å稱å³å¯ï¼ä¾å¦ï¼
http_request.onreadystatechange = nameOfTheFunction;
注æï¼æå®çå½å¼å稱å¾ä¸å æ¬èä¹æ²æåæ¸ãé¤äºæå®å½å¼å稱å¤ï¼ä½ ä¹è½ç¨ Javascript å³æå®ç¾©å½å¼çæ¹æ³ä¾å®ä¸åæ°çèçå½å¼ï¼å¦ä¸ï¼
http_request.onreadystatechange = function(){ // åäºäº };
決å®èçæ¹å¼ä¹å¾ä½ å¾ç¢ºå¯¦ç¼åº requestï¼æ¤æéå«ç¨ HTTP request é¡å¥ç open()
å send()
æ¹æ³ï¼å¦ä¸ï¼
http_request.open('GET', 'http://www.example.org/some.file', true); http_request.send(null);
open()
ç第ä¸ååæ¸æ¯ HTTP request çæ¹æ³ï¼ä¹å°±æ¯å¾ GETãPOSTãHEAD ä¸æä¸ä½¿ç¨ï¼äº¦å¯ç¨ä½ 主æ©ä¸æ¯æ´çæ¹å¼ãçºéµå¾ª HTTP æ¨æºï¼è«è¨å¾éäºæ¹æ³é½æ¯å¤§å¯«ï¼ä¸ç¶æçç覽å¨ï¼å¦ Firefoxï¼æ許ä¸æçä½ ãå ¶ä» HTTP request å¯ä»¥æ¯æ´çæ¹æ³å表è«åè W3C è¦æ ¼æ¸ã- 第äºååæ¸æ¯ç®æ¨ URLãåºæ¼å®å
¨èéï¼ä½ ä¸è½å«ç¨å網å以å¤ç網é ãå¦æ網åä¸åï¼åå«ç¨
open()
ææåºç¾ãæ¬éä¸è¶³ï¼æçµååãé£é¡çé¯èª¤ãé常大夥æç¯çé¯èª¤å¤çºå¨ domain.tld 網ç網ç«ä¸å¼å« www.domain.tld ä¸ç網é ï¼å æ¯ä¸é»é»å·®å¥é½ä¸è¡ã - 第ä¸ååæ¸æ±ºå®æ¤ request æ¯å¦ä¸åæ¥é²è¡ï¼å¦æè¨å®çº
TRUE
åå³ä½¿ä¼ºæå¨å°æªå³åè³æä¹æç¹¼çºå·è¡å ¶é¤çç¨å¼ï¼éä¹å°±æ¯ AJAX ä¸ç¬¬ä¸å A 代表çæ義ã
send()
çåæ¸å¨ä»¥ POST ç¼åº request æå¯ä»¥æ¯ä»»ä½æ³å³çµ¦ä¼ºæå¨çæ±è¥¿ï¼èè³æå以æ¥è©¢å串çæ¹å¼ååºï¼ä¾å¦ï¼
name=value&anothername=othervalue&so=on
ä¸éå¦æä½ æ³è¦ä»¥ POST æ¹å¼å³éè³æï¼åå¿ é å å° MIME åæ æ¹å¥½ï¼å¦ä¸ï¼
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
å¦å伺æå¨å°±ä¸æçä½ å³éä¾çè³æäºã
第äºæ¥ â ãå°±ä¸å©ï¼ãï¼å稱çºãèç伺æå¨å³åçè³æãï¼
å³åº request æå¿ é æä¾èçå³åå¼çå½å¼å稱ã
http_request.onreadystatechange = nameOfTheFunction;
é£éº¼ä¾ççéåå½å¼è©²åäºä»éº¼ãé¦å ï¼å®å¿ é æª¢æ¥ request ç®åççæ ï¼å¦æçæ å¼çº 4 代表伺æå¨å·²ç¶å³åææè³è¨äºï¼ä¾¿å¯ä»¥éå§è§£ææå¾è³è¨ã
if (http_request.readyState == 4) { // ä¸å ok, ç¹¼çºè§£æ } else { // éæ²å®æ }
readyState
ææå¯è½çå¼å¦ä¸ï¼
- 0 (éæ²éå§)
- 1 (è®åä¸)
- 2 (å·²è®å)
- 3 (è³è¨äº¤æä¸)
- 4 (ä¸åå®æ)
æ¥ä¸ä¾è¦æª¢æ¥ä¼ºæå¨å³åç HTTP çæ
碼ãææçæ
碼å表å¯æ¼ W3C 網ç«ä¸æ¥å°ï¼ä½æåè¦ç®¡çæ¯ 200 OK
é種çæ
ã
if (http_request.status == 200) { // è¬äºå ·å } else { // ä¼¼ä¹æé»åé¡ï¼æ許伺æå¨å³åäº 404 (æ¥ç¡æ¤é ) æè 500 (å §é¨é¯èª¤) ä»éº¼ç }
檢æ¥å³åç HTTP çæ 碼å¾ï¼è¦æ麼èçå³åçè³æå°±ç±ä½ 決å®äºãæå ©ç¨®ååè³æçæ¹å¼ï¼
http_request.responseText
â é樣ææå³åå¼ç¶å串ç¨http_request.responseXML
â é樣ææå³åå¼è¦çºXMLDocument
ç©ä»¶ï¼èå¾å¯ç¨ JavaScript DOM ç¸éå½å¼èç
第ä¸æ¥ - è¬äºä¿±å - ç°¡å®ç¯ä¾
好ï¼æ¥èå°±åä¸æ¬¡ç°¡å®ç HTTP ç¯ä¾ï¼æ¼ç¤ºæ¹æçåé
æå·§ãé段 JavaScript æå伺æå¨è¦ä¸ä»½è£¡é æãI'm a test.ãå樣ç HTML æ件(test.html
)ï¼èå¾ä»¥ alert()
å°æ件å
§å®¹ååºã
<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')"> Make a request </span>
å¨æ¤ç¯ä¾ä¸ï¼
- é¦å 使ç¨è æä¸ãMake a requestã
- é麼ä¸ä¾å°±æå¼å«
makeRequest()
å½å¼ï¼äº¦å³å ¥åæ¸å¼test.html
(ä¹å°±æ¯é£ä»½ HTML æªçå稱ï¼æ¾å¨åç®éä¸) - æ¥èç¼åº requestï¼èå¾æå°ä¸»å°æ¬äº¤çµ¦
onreadystatechange
æå®çalertContents()
å½å¼ alertContents()
檢æ¥åææ¯å¦æ£å¸¸ï¼èå¾ä»¥alert()
å°test.html
çå §å®¹ååº
ä½ å¯ä»¥ç±æ¤æ¸¬è©¦æ¬ä¾ï¼ä¹å¯ä»¥åè測試æªæ¡ã
第åæ¥ â ãX æªæ¡ãï¼å稱çºãèç XML åæå¼ãï¼
åé¢çä¾åä¸ï¼å¨æ¶å° HTTP å³åå¼å¾æå以ç©ä»¶ç reponseText
屬æ§ä½¿ç¨ test.html
æªæ¡çå
§å®¹ï¼æ¥èä¾è©¦è©¦ responseXML
屬æ§çæ¹æ³ã
é¦å
ï¼æåå¾ååæ ¼å¼æ£ç¢ºç XML æ件ï¼ä»¥ä¾¿ç¨å¾åç¨ãæ¤æªåå test.xml
ï¼å
§å®¹å¦ä¸ï¼
<?xml version="1.0" ?> <root> I'm a test. </root>
å¨ç¨å¼ä¸ï¼æåå«ç¨æªæ¡çå°æ¹åªé ç¥äºä¿®æ¹å¦ä¸ï¼
... onclick="makeRequest('test.xml')"> ...
æ¥èå¨ alertContents()
ä¸ï¼æåå¿
é å° alert(http_request.responseText);
æ¹æé樣ï¼
var xmldoc = http_request.responseXML; var root_node = xmldoc.getElementsByTagName('root').item(0); alert(root_node.firstChild.data);
é樣ä¸ä¾æå便å¯åå¾ responseXML
æå³åç XMLDocument
ç©ä»¶ï¼èå¾ä»¥ DOM ç¸éçæ¹æ³åç¨ XML æ件å
§å®¹ãä½ å¯ä»¥åè test.xml
çåå§ç¢¼ 以åä¿®æ¹éå¾ç測試ç¨å¼ã
å ¶ä»è DOM ç¸éçæ¹æ³ï¼è«åè Mozilla DOM æ件ã