用XMLHttpRequest对象实现局部更新

来源：互联网发布：厨房清洁剂知乎编辑：程序博客网时间：2024/06/07 19:37

XmlHttp是什么？

      最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

XmlHttp对象的属性:

XmlHttp对象的方法:

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

Test.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Erp.WebReportReport.Test" %><!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></title>    <script language="javascript" type="text/javascript">        var xmlHttp;        function createXMLHttpRequest() {            if (window.ActiveXObject) {                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            }            else if (window.XMLHttpRequest) {                xmlHttp = new XMLHttpRequest();            }        }        function AddNumber() {            createXMLHttpRequest();            var url = "AddHandler.ashx?num1=" + document.getElementById("num1").value + "&num2=" + document.getElementById("num2").value;            xmlHttp.open("GET", url, true);            xmlHttp.onreadystatechange = ShowResult;            xmlHttp.send(null);        }        function ShowResult() {            if (xmlHttp.readyState == 4) {                if (xmlHttp.status == 200) {                    document.getElementById("sum").value = xmlHttp.responseText;                }            }        }    </script></head><body>    <form id="form1" runat="server">    <div>        <div style="text-align: center">            <br />            无刷新求和示例<br />            <br />            <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>    </div>    </form></body></html>

AddHandler.ashx：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;namespace Erp.WebReport{    /// <summary>    /// $codebehindclassname$ 的摘要说明    /// </summary>    [WebService(Namespace = "http://tempuri.org/")]    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]    public class AddHandler : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            int a = Convert.ToInt32(context.Request.QueryString["num1"]);            int b = Convert.ToInt32(context.Request.QueryString["num2"]);            int result = a + b;            context.Response.Write(result);        }        public bool IsReusable        {            get            {                return false;            }        }    }}

0 0