XMLHttpRequestAjax 實例簡介一、XMLHttpRequest 對象的方法與屬性
方 法
描 述
abort()
停止當(dāng)前請求
getAllResponseHeaders()
把HTTP請求的所有響應(yīng)首部作為鍵/值對返回
getResponseHeader("header")
返回指定首部的串值
open("method", "url")
建立對服務(wù)器的調(diào)用。method參數(shù)可以是GET、POST或PUT。url參數(shù)可以是相對URL或絕對URL。這個方法還包括3個可選的參數(shù)
send(content)
向服務(wù)器發(fā)送請求
setRequestHeader("header", "value")
把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用open()
屬 性
描 述
onreadystatechange
每個狀態(tài)改變時都會觸發(fā)這個事件處理器，通常會調(diào)用一個JavaScript函數(shù)
readyState
請求的狀態(tài)。有5個可取值：0 = 未初始化，1 = 正在加載，2 = 已加載，3 = 交互中，4 = 完成
responseText
服務(wù)器的響應(yīng)，表示為一個串
responseXML
服務(wù)器的響應(yīng)，表示為XML。這個對象可以解析為一個DOM對象
status
服務(wù)器的HTTP狀態(tài)碼（200對應(yīng)OK，404對應(yīng)Not Found（未找到），等等）
statusText
HTTP狀態(tài)碼的相應(yīng)文本（OK或Not Found（未找到）等等）
二、使用XMLHttpRequest 實現(xiàn)ajax效果
這里我們用客戶端通過XMLHttpRequest 請求服務(wù)端獲取當(dāng)前系統(tǒng)時間，實現(xiàn)異步交互！
客戶端myAjax.html代碼
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>xmlhttprequest ajax demo</title>
<script type ="text/javascript" language ="javascript" >
var req; //定義變量，用來創(chuàng)建xmlhttprequest對象
function creatReq() // 創(chuàng)建xmlhttprequest,ajax開始
{
var url="ajaxServer.aspx"; //要請求的服務(wù)端地址
if(window.XMLHttpRequest) //非IE瀏覽器及IE7(7.0及以上版本)，用xmlhttprequest對象創(chuàng)建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)瀏覽器用activexobject對象創(chuàng)建,如果用戶瀏覽器禁用了ActiveX,可能會失敗.
{
req=new ActiveXObject("Microsoft.XMLHttp");
}
if(req) //成功創(chuàng)建xmlhttprequest
{
req.open("GET",url,true); //與服務(wù)端建立連接(請求方式post或get，地址,true表示異步)
req.onreadystatechange = callback; //指定回調(diào)函數(shù)
req.send(null); //發(fā)送請求
}
}
function callback() //回調(diào)函數(shù)，對服務(wù)端的響應(yīng)處理，監(jiān)視response狀態(tài)
{
if(req.readystate==4) //請求狀態(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 //請求狀態(tài)還沒有成功，頁面等待
{
document .getElementById ("myTime").innerHTML ="數(shù)據(jù)加載中
";
}
}
function Dispaly() //接受服務(wù)端返回的數(shù)據(jù)，對其進(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>
服務(wù)端ajaxServer.aspx代碼 (不需要HTML代碼,只需服務(wù)端處理返回數(shù)據(jù),也可用ashx文件來處理)
public partial class ajaxServer : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000); //為了看到ajax效果，將當(dāng)前線程延時1000毫秒
Response.Write(DateTime .Now .ToString ()); //輸出當(dāng)前時間
}
}
運(yùn)行效果：
