<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>xmlhttprequest ajax demo</title>
<script type ="text/javascript" language ="javascript" >
var req; //定義變量,用來(lái)創(chuàng)建xmlhttprequest對(duì)象
function creatReq() // 創(chuàng)建xmlhttprequest,ajax開(kāi)始
{
var url="ajaxServer.aspx"; //要請(qǐng)求的服務(wù)端地址
if(window.XMLHttpRequest) //非IE瀏覽器及IE7(7.0及以上版本),用xmlhttprequest對(duì)象創(chuàng)建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)瀏覽器用activexobject對(duì)象創(chuàng)建,如果用戶瀏覽器禁用了ActiveX,可能會(huì)失敗. {
req=new ActiveXObject("Microsoft.XMLHttp");
}
if(req) //成功創(chuàng)建xmlhttprequest
{
req.open("GET",url,true); //與服務(wù)端建立連接(請(qǐng)求方式post或get,地址,true表示異步)
req.onreadystatechange = callback; //指定回調(diào)函數(shù)
req.send(null); //發(fā)送請(qǐng)求
}
}
function callback() //回調(diào)函數(shù),對(duì)服務(wù)端的響應(yīng)處理,監(jiān)視r(shí)esponse狀態(tài)
{
if(req.readystate==4) //請(qǐng)求狀態(tài)為4表示成功
{
if(req.status==200) //http狀態(tài)200表示OK
{
Dispaly(); //所有狀態(tài)成功,執(zhí)行此函數(shù),顯示數(shù)據(jù)
}
else //http返回狀態(tài)失敗
{
alert("服務(wù)端返回狀態(tài)" + req.statusText);
}
}
else //請(qǐng)求狀態(tài)還沒(méi)有成功,頁(yè)面等待
{
document .getElementById ("myTime").innerHTML ="數(shù)據(jù)加載中";
}
}
function Dispaly() //接受服務(wù)端返回的數(shù)據(jù),對(duì)其進(jìn)行顯示
{
document .getElementById ("myTime").innerHTML =req.responseText;
}
</script>
</head>
<body>
<div id="myTime"></div>
<input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
</body>
</html>
對(duì)于Ajax需要注意執(zhí)行 的 順序
對(duì)于input 類型為text的 動(dòng)作有 onChange() onPropertyChange() 后者比前者的反應(yīng) 更加的敏感,有可能onChange()不會(huì)隨著里面的改變而改變,但是onPropertyChange()肯定會(huì)隨著value的值 改變而改變。
對(duì)于返回的值,要把結(jié)果寫(xiě)在最后的條件都符合的情況下,就是注意函數(shù)的位置。
操作xml的時(shí)候 用到的方法 和以前操作xml的是一樣的,如getElementsByTagName(),還有.firstChild.data,nodeValue.
Ajax執(zhí)行的順序是open,onreadystatechange,send 都是基于流的形式傳輸。
對(duì)于servlet里面 注意 都是 用流的形式進(jìn)行 傳輸和取值。resp.setContentType(),里面得相應(yīng)的設(shè)置方式。
本文來(lái)自CSDN博客,轉(zhuǎn)載請(qǐng)標(biāo)明出處:http://blog.csdn.net/zuowangxi/archive/2009/12/30/5104036.aspx