Ajax的核心：XMLHttpRequest
http://space.itpub.net/?uid-100788-action-viewspace-itemid-369113
第一步（在頁面上創建“輸入”和“輸出”區域）Default.aspx:
<form. id="form1" runat="server">
<div>
輸入：<input id="A" type="text" value="0"οnkeyup="Count();"/>
輸入：<input id="B" type="text" value="0"οnkeyup="Count();"/>
輸出：<input id="C" type="text" value="0" />
</div>
</form>
第二步（創建XMLHttpRequest對象）Default.aspx:
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
第三步（創建發佈請求的方法）Default.aspx:
function Count()
{
url = "Handler.ashx?A=" + document.getElementById('A').value + "&B=" + document.getElementById('B').value;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=doUpdate;
xmlHttp.send();
return false;
}
第四步（創建更新頁面的方法）Default.aspx:
functiondoUpdate()
{
if(xmlHttp.readyState==4)
{
document.getElementById('C').value=xmlHttp.responseText;
}
}
第五步（創建後臺處理請求）Handler.ashx:
public void ProcessRequest(HttpContext context)
{
int a = 0;
int b = 0;
if (context.Request.QueryString["A"] != null)
{
a = Convert.ToInt16(context.Request.QueryString["A"].ToString());
}
if (context.Request.QueryString["B"] != null)
{
b = Convert.ToInt16(context.Request.QueryString["B"].ToString());
}
context.Response.Write(a + b);
}
前臺Default.aspx完整代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax的核心</title>
<script. type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function Count()
{
url = "Handler.ashx?A=" + document.getElementById('A').value + "&B=" + document.getElementById('B').value;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=doUpdate;
xmlHttp.send();
return false;
}
function doUpdate()
{
if(xmlHttp.readyState==4)
{
document.getElementById('C').value=xmlHttp.responseText;
}
}
</script>
</head>
<bodyοnlοad="createXMLHttpRequest();">
<form. id="form1" runat="server">
<div>
輸入：<input id="A" type="text" value="0" nkeyup="Count();" />
輸入：<input id="B" type="text" value="0" nkeyup="Count();" />
輸出：<input id="C" type="text" value="0" />
</div>
</form>
</body>
</html>
後臺Handler.ashx完整代碼：
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int a = 0;
int b = 0;
if (context.Request.QueryString["A"] != null)
{
a = Convert.ToInt16(context.Request.QueryString["A"].ToString());
}
if (context.Request.QueryString["B"] != null)
{
b = Convert.ToInt16(context.Request.QueryString["B"].ToString());
}
context.Response.Write(a + b);
}
public bool IsReusable
{
get
{
return true;
}
}
}
XMLHttpRequest對象方法：
abort():停止當前請求。
getAllResponseHeaders():將HTTP請求的所有響應首部作爲鍵/值對返回。
getResponsHeader("headerLabel"):返回指定首部的字符串值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]):建立對服務器的調用，method可以是GET POST PUT URL可以是相對URL或絕對URL。3個可選參數爲：1.asyncFlag：是否非同步標記2.userName：用戶名 3.password：密碼。
send(content):向服務器發出請求
setRequestHeader("label","value"):把指定首部設置爲所提供的值，在調用該方法之前必須先調用open方法。
XMLHttpRequest對象屬性：
onreadystatechange:狀態改變的事件觸發器，每個狀態改變都會觸發事件觸發器。
readyState:對象狀態，0＝未初始化，1＝正在加載，2＝已加載，3＝交互中，4＝完成。
responseText:服務器的響應，字符串。
responseXML:服務器的響應，XML。該對象可以解析爲一個DOM對象。
status：服務器返回的HTTP狀態碼。
statusText:HTTP狀態碼的相應文本。