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