当前位置:首页 > Ajax的核心:XMLHttpRequest

Ajax的核心:XMLHttpRequest

点击次数:1247  更新日期:2010-12-30
\n

第一步(在页面上创建“输入”和“输出”区域)Default.aspx:
<form id=”form1″ runat=”server”>
<div>
输入:<input id=”A” type=”text” value=”0″ onkeyup=”Count();” />
输入:<input id=”B” type=”text” value=”0″ onkeyup=”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:
function doUpdate()
{
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” %>


\n

<!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>


\n

<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>


\n

</head>
<body onload=”createXMLHttpRequest();”>
<form id=”form1″ runat=”server”>
<div>
输入:<input id=”A” type=”text” value=”0″ onkeyup=”Count();” />
输入:<input id=”B” type=”text” value=”0″ onkeyup=”Count();” />
输出:<input id=”C” type=”text” value=”0″ />
</div>
</form>
</body>
</html>


\n

后台Handler.ashx完整代码:
<%@ WebHandler Language=”C#” Class=”Handler” %>


\n

using System;
using System.Web;


\n

public class Handler : IHttpHandler
{


\n

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);
}


\n

public bool IsReusable
{
get
{
return true;
}
}


\n

}


\n

\n

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状态码的相应文本。


\n

来源:http://www.cnblogs.com/ecngs

\n