AJAX入門必讀與執行個體（仿google的拖動）

??????绔??劇ず浠ｇ??锛?璇鋒敞???ョ???

AJAX?ㄧО涓衡??Asynchronous JavaScript and XML??锛?寮?姝?avaScript??XML锛?锛?????涓?绉???寤轟氦浜?寮?缃?椤靛??ㄧ??缃?椤靛?????????

涓昏?????浜?浠ヤ???绉?????锛?

Ajax锛?Asynchronous JavaScript + XML锛???瀹?涔?

?轟?web????锛?standards-based presentation锛?XHTML+CSS??琛ㄧず锛?

浣跨??DOM锛?Document Object Model锛?杩?琛??ㄦ???劇ず??浜や?锛?

浣跨??XML ?? XSLT 杩?琛??版??浜ゆ?㈠???稿?蟲??浣?锛?

浣跨??XMLHttpRequest 杩?琛?寮?姝ユ?版???ヨ????妫?绱??

浣跨??JavaScript 灏???????涓?瑗跨?瀹??ㄤ?璧楓??

? 浼?缁???web搴??ㄥ??璁哥?ㄦ?峰～??琛ㄥ??(form)锛?褰???浜よ〃???跺氨??web???″?ㄥ????涓?涓?璇鋒??????″?ㄦ?ユ?跺苟澶???浼??ョ??琛ㄥ??锛??跺??杩???涓?涓??扮??缃?椤點??杩?涓???娉?娴?璐逛?璁稿?甯??斤???涓哄?ㄥ????涓や釜椤甸??腑??澶ч?ㄥ??HTML浠ｇ??寰?寰????稿???????變?姣?娆″??ㄧ??浜や??介??瑕??????″?ㄥ????璇鋒?锛?搴??ㄧ????搴??堕?村氨渚?璧?浜????″?ㄧ????搴??堕?淬??杩?瀵艱?翠??ㄦ?風???㈢????搴?姣????闆??ㄦ?㈠?澶???

? 涓?姝や???锛?AJAX搴??ㄥ??浠ヤ??????″?ㄥ????骞跺????蹇??????版??锛?瀹?浣跨??OAP???跺??涓?浜??轟?XML??web service?ュ?ｏ?骞跺?ㄥ?㈡?風??????avaScript澶????ヨ?????″?ㄧ????搴?????涓哄?ㄦ???″?ㄥ??娴?瑙??ㄤ??翠氦?㈢???版??澶ч????灏?锛?缁?????浠?灏辮?界???闆??搴??村揩??搴??ㄣ?????跺?澶???澶???宸ヤ???浠ュ?ㄥ???鴻?鋒???瀹㈡?風???哄?ㄤ?瀹???锛???浠?eb???″?ㄧ??澶????堕?翠???灏?浜???

Ajax搴??ㄧ?搴???浼??垮?ㄤ?锛?

1. ??杩?寮?姝ユā寮?锛?????浜??ㄦ?蜂?楠?

2. 浼???浜?娴?瑙??ㄥ?????″?ㄤ??寸??浼?杈?锛???灏?涓?蹇?瑕????版??寰?杩?锛???灏?浜?甯??藉????

3. Ajax寮????ㄥ?㈡?風??杩?琛?锛??挎??浜?涓??ㄥ?????ョ?辨???″?ㄦ?挎????宸ヤ?锛?浠?????灏?浜?澶х?ㄦ?烽??涓??????″?ㄨ?杞姐??

**************************************************************************************************

xmlhttp??灞??э?

onreadystatechange ? ??瀹?褰?readyState灞??ф?瑰???剁??浜?浠跺????ユ??锛????? ??

readyState ? ? 杩???褰???璇鋒????舵??锛???璇彙??

responseBody ? ? 灏???搴?淇℃??姝ｆ??浠?nsigned byte?扮?褰㈠?杩???锛???璇?

responseStream ? ? ? 浠?do Stream瀵矽薄??褰㈠?杩?????搴?淇℃??锛???璇???

responseText ? ? ? 灏???搴?淇℃??浣?涓哄??绗?覆杩???锛???璇???

responseXML ? ? ? 灏???搴?淇℃???煎???涓?ml Document瀵矽薄骞惰???锛???璇???

status ? ? ? ? 杩???褰???璇鋒???http?舵????锛???璇???

statusText ? ? ? 杩???褰???璇鋒?????搴?琛??舵??锛???璇???

xmlhttp???規?锛?

abort ? ? ? ? ??娑?褰???璇鋒?

getAllResponseHeaders ? ?峰????搴???????http澶?

getResponseHeader ? 浠???搴?淇℃??涓??峰????瀹???http澶?

open ? ? ? ? ??寤轟?涓??扮??http璇鋒?锛?骞舵??瀹?姝よ?鋒????規???URL浠ュ??楠?璇?淇℃??(?ㄦ?峰??/瀵???) //甯哥??send ? ? ? ? ????璇鋒???ttp???″?ㄥ苟?ユ?跺??搴? //甯哥??setRequestHeader ? ??????瀹?璇鋒?????涓?http澶?

璇?娉?锛?

onreadystatechang ??瀹?褰?readyState灞??ф?瑰???剁??浜?浠跺????ユ??锛?????

xmlHttpObj.onreadystatechange=a;

function a(){

? if(xmlHttpObj.readyState==4){

? ? if(xmlHttpObj.stateus==200){

? ? ? ? alert(xmlHttpObj.responseText);

? ? }else{

? ? ? ? alert("??杞藉け璐ワ?/n????锛?"+xmlHttpObj.stateText);

? ? }

? }

}

readyState 杩???褰???璇鋒????舵??锛???璇彙??

xmlHttpObj.readyState;

??瑙??芥??;

readyState锛???????瀹?涔?濡?涓?锛?

0 (????濮???) ? ? ? 瀵矽薄宸插緩绔?锛?浣???灏?????濮???锛?灏???璋???pen?規?锛?

1 (??濮???) ? ? ? 瀵矽薄宸插緩绔?锛?灏???璋???end?規?

2 (?????版??) ? ? ? send?規?宸茶????浣???褰??????舵????http澶存????

3 (?版??浼???涓?) ? ? ? 宸叉?ユ?堕?ㄥ???版??锛???涓哄??搴???http澶翠????杩??堕??杩?responseBody??responseText?峰???ㄥ???版??浼??虹?伴??璇?锛?

4 (瀹???) ? ? ? ?版???ユ?跺??姣?,姝ゆ?跺??浠ラ??杩???杩?responseBody??responseText?峰??瀹??寸????搴??版??

responseText 灏???搴?淇℃??浣?涓哄??绗?覆杩???锛???璇???

xmlHttpObj.responseText;

responseBody ,responseStream ,responseText ,responseXML 涓?涔??鎬技

responseXML??浠ヨ???涓?涓???妗ｆ??(DOM)锛???浠ヤ嬌??ocument.getElementsByTagName,document.getElementsByTagNameNS,document.getElementById绛?瀵瑰?舵??浣?

stateus 杩???褰???璇鋒???http?舵????锛???璇???

xmlHttpObj.stateus;

??瑙??芥??;

?挎?村艦????http?舵????锛?瀹?涔?濡?涓?锛?

??? ??杩?100 ? Continue

101 ? Switching protocols

200 ? OK

201 ? Created

202 ? Accepted

203 ? Non-Authoritative Information

204 ? No Content

205 ? Reset Content

206 ? Partial Content

300 ? Multiple Choices

301 ? Moved Permanently

302 ? Found

303 ? See Other

304 ? Not Modified

305 ? Use Proxy

307 ? Temporary Redirect

400 ? Bad Request

401 ? Unauthorized

402 ? Payment Required

403 ? Forbidden

404 ? Not Found

405 ? Method Not Allowed

406 ? Not Acceptable

407 ? Proxy Authentication Required

408 ? Request Timeout

409 ? Conflict

410 ? Gone

411 ? Length Required

412 ? Precondition Failed

413 ? Request Entity Too Large

414 ? Request-URI Too Long

415 ? Unsupported Media Type

416 ? Requested Range Not Suitable

417 ? Expectation Failed

500 ? Internal Server Error

501 ? Not Implemented

502 ? Bad Gateway

503 ? Service Unavailable

504 ? Gateway Timeout

505 ? HTTP Version Not Supported

statusText 杩???褰???璇鋒?????搴?琛??舵??

xmlHttpObj.stateText;

?????芥??;

open ??寤轟?涓??扮??http璇鋒?锛?骞舵??瀹?姝よ?鋒????規???URL浠ュ??楠?璇?淇℃??

xmlHttpObj.open(Method,URL[,Async][,User][,PassWord]);

[]琛ㄧず????

???幫?

Method:POST|GET(澶у???涓?????)

URL:璇鋒???URL?闆??锛???浠ヤ負缁?瀵瑰?闆??涔???浠ヤ負?稿?瑰?闆????

Async:[true|fase] ??????姝ワ?榛?璁や負true??

User:濡??????″?ㄩ??瑕?楠?璇?锛?姝ゅ???瀹??ㄦ?峰??锛?濡???????瀹?锛?褰????″?ㄩ??瑕?楠?璇??訛???浼?寮瑰?洪??璇?绐??ｃ??

Password锛?楠?璇?淇℃??涓???瀵????ㄥ??锛?濡????ㄦ?峰??涓虹┖锛???姝ゅ?煎?琚?蹇界?ャ??

send ????璇鋒???ttp???″?ㄥ苟?ユ?跺??搴?

xmlHttpObj.send([Text]);

???幫?

Text:瑕????????版??锛?榛?璁や負绌?null);

************************************************************************************************************

涓?涓?渚?瀛?锛?

??寤轟?涓?xmlhttp瀵矽薄锛??闆?ㄧ??缁?瀵瑰??版?瑙??ㄩ?藉???浜?瀵?mlHttp??????锛?IE涓?浣跨??ctiveXObject?瑰???寤?mlHttp瀵矽薄锛??朵?娴?瑙??ㄥ?锛?Firefox??Opera??NetScape绛???杩?window.XMLHttpRequest?ュ??寤?mlhttp瀵矽薄??

var xmlhttp;

function new_xmlHttp(){

? var a=null;

? if(window.ActiveXObject){//IE(姝ゅ???IE娉?????????E???哥??娴?瑙????涓???)

? ? a=new ActiveXObject("Msxml2.XMLHTTP");

? ? if(!a){

? ? ? ? a=new ActiveXObject("Microsoft.XMLHTTP")

? ? }

? }else if(window.XMLHttpRequest){//Mozilla(FireFox,NS)

? ? a=new XMLHttpRequest()

? }

? return a;

}

xmlhttp=new_xmlhttp();

xmlhttp.open("GET","http://localhost/xmlfile.xml",false);//??寤轟?涓??扮??HTTP璇鋒?锛?骞舵??瀹?URL

xmlhttp.send();//????

xmlhttp.onreadystatechange=function(){

? if(xmlhttp.readyState==4){

? ? if(xmlhttp.stateus==200){

? ? ? ? alert(xmlhttp.responseText);

? ? }else{

? ? ? ? alert("??杞藉け璐ワ?/n????锛?"+xmlhttp.stateText);

? ? }

? }

}

涓?涓?绠???瀹??寸??XMLHTTP渚?瀛?锛?

灏?浠ヤ?浠ｇ??淇?瀛?涓烘????TML??浠跺??浣跨??

CODE: <!--begin-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"[url]http://www.w3.org/TR/html4/loose.dtd[/url]">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>涓?涓?绠?????XMLHTTP渚?瀛?</title>

</head>

<body>

<script>

var oDiv

var xh

function getXML()

{

oDiv = document.all.m

oDiv.innerHTML = "姝ｅ?ㄨ?杞芥?????版??锛?璇風?渚?......."

oDiv.style.display= ""

xh = new ActiveXObject("Microsoft.XMLHTTP")

xh.onreadystatechange = getReady

xh.open("GET",a.value,true)

xh.send()

}

function getReady()

{

if(xh.readyState==4)

{

if(xh.status==200)

{

? oDiv.innerHTML = "瀹???"

}

else

{

? oDiv.innerHTML = "?辨??锛?瑁?杞芥?版??澶辮觸??????锛?" + xh.statusText

}

}

}

</script>

<body>

xmlhttp寮?姝ョ??渚?瀛?:

URL:<input name=a value="[url]http://s041149.stu.cdut.edu.cn/xml/myxmltest.xml[/url]" style="width:600px">

<input 慰nclick="getXML()" type="button" value="寰??版?浠ｇ??">

<input 慰nclick="if(xh && xh.responseText) {alert(xh.responseText);oDiv.innerHTML=xh.responseText}" type="button" value="?劇ず婧?浠ｇ??">

<div id=m></div>

</body>

</html>

<!--end--> [Copy to clipboard]

渚?瀛?锛?

浠?OOGLE涓??у??涓婚〉?????ㄥ苟淇?瀛?瀹?浣?, http://s041149.stu.cdut.edu.cn/xml/myxmltest.xml涓轟?瀛??稿?逛?缃???XML??浠訛?璇鋒敞?????ㄥ??????????

http://s041149.stu.cdut.edu.cn/xml/锛?缁?????棰???E-MAIL:hktx[at]163[dot]com锛?