用XMLHttpRequest对象实现局部更新

最新推荐文章于 2021-08-05 17:29:40 发布

Andy__Huang

最新推荐文章于 2021-08-05 17:29:40 发布

阅读量848

点赞数

分类专栏： JavaScript & CSS .NET程序

本文链接：https://blog.csdn.net/hdhai9451/article/details/39494663

版权

.NET程序同时被 2 个专栏收录

72 篇文章 1 订阅

订阅专栏

JavaScript & CSS

25 篇文章 0 订阅

订阅专栏

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" οnkeyup="AddNumber();" value="0" />
            +<input id="num2" style="width: 95px" type="text" οnkeyup="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;
            }
        }
    }
}