【转】Ajax的核心：XMLHttpRequest

来源：互联网发布：邮箱域名注册编辑：程序博客网时间：2024/06/06 05:11

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

</head>
<bodyonload="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状态码的相应文本。