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