代码改变世界

XMLHttpRequest对象无刷新技术

2008-04-25 00:33  Leason Li  阅读(1584)  评论(19)  编辑  收藏  举报

      今天是我在博客园这个软件开发大牛级人物众多的园子里写的第一篇技术文章,确切的说不是我的原创,我只是对相关知识的整理,放在这里以便自己知识的积累.当然希望我的整理能帮到跟我一样在路上的更多的软件开发人员.废话不多说,现在把我晚上整理的东西贴出.
 一: XMLHttpRequest是什么?
    最为通俗的定义他就是脚本语言例如javascript,Jscript,VBscript等通过HTTP协议传送或者接受XML数据及其他数据的一套API.
二:XMLHttpRequest对象的属性:

三:XMLHttpRequest对象的方法:

四:发送一个请求的步骤:
      最简单的请求是,不以查询参数或提交表单的方式向服务器发送任何信息.使用XmlHttpRequest对象发送请求的基本步骤:
      ● 为得到XmlHttpRequest对象实例的一个引用，可以创建一个新的XmlHttpRequest的实例。
      ● 告诉XmlHttpRequest对象,那个函数回处理XmlHttpRequest对象的状态的改变.为此要把对象的
         onreadystatechange属性设置为指向JavaScript的指针.
      ● 指定请求属性.XmlHttpRequest对象的Open()方法会指定将发送的请求.
      ● 将请求发送给服务器.XmlHttpRequest对象的send()方法将请求发送到目标资源.
五:源码

1:前台.aspx代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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>
      <script type="text/javascript">
      var xmlHttp;
     function createXMLHttpRequest() //创建一个XMLHttpRequest对象，AJAX开始
     {
        if(window.ActiveXObject)//假如为IE浏览器
        {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)//非IE浏览器
        {
          xmlHttp = new XMLHttpRequest();
       }
    }
     function AddNumber()
    {
        createXMLHttpRequest();
        var url= "Handler.ashx?num1="+document.getElementById("num1").value+"&num2="+document.getElementById("num2").value;//指定请求的服务器端地址并传参数
        xmlHttp.open("GET",url,true);//与服务器端建立连接，有POST和GET两种形式，true表示异步操作，这个地方信息已经发到缓存。
        xmlHttp.onreadystatechange=ShowResult;//表示请求发到服务器的状态反馈，也就是监视response的状态
        xmlHttp.send(null);//发送请求
    }
       function ShowResult()//定义回调函数，自己定义错误处理
     {
         if (xmlHttp.readyState == 1)  
        {
        document.getElementById("flag").innerHTML = "正在加载连接对象";
        } 
        if (xmlHttp.readyState == 2)  
        {
        document.getElementById("flag").innerHTML = "连接对象加载完毕。";
        } 
        if (xmlHttp.readyState == 3)  
        {
        document.getElementById("flag").innerHTML = "数据获取中";
        } 
        if (xmlHttp.readyState == 4) 
        {
           if (xmlHttp.status == 200)
            {
              alert("Server is done!服务器已收到,");
              document.getElementById("sum").value=xmlHttp.responseText;//返回响应信息
            }
         }
         else if (xmlHttp.status == 404)
         { 
             alert("Request URL does not exist,发送的地址错了,没有此页面");
         } 
         else if (xmlHttp.status == 403) 
         {
             alert("Access denied.无权访问");
         }
         else 
         {
             alert("Error: status code is " + xmlHttp.status);
         }
      }
      </script>
</head>
<body>
    <div style="text-align: center">
        <br />无刷新求和示例<br />
        <br />
        <div id="flag"></div>
        <input id="num1" style="width: 107px" type="text" onkeyup="AddNumber();" value="0"  />
        +<input id="num2" style="width: 95px" type="text"  onkeyup="AddNumber();" value="0"  />
        =<input id="sum" style="width: 97px" type="text" /></div>
</body>
</html>


二:后台Handler.ashx代码

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        int a = int.Parse(context.Request.QueryString["num1"]);
        int b = int.Parse(context.Request.QueryString["num2"]);
        context.Response.Write(a+b);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}