【ASP.NET】——AJAX简介

最新推荐文章于 2025-10-05 10:15:11 发布

原创最新推荐文章于 2025-10-05 10:15:11 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

61 篇文章

订阅专栏

本文详细介绍了AJAX（异步JavaScript和XML）的概念及其工作原理，包括如何使用XMLHttpRequest对象进行异步数据请求，以及在不同浏览器中创建和使用该对象的方法。同时，文章提供了具体的示例代码，展示了如何设置请求参数、发送请求以及处理服务器响应。

AJAX:”Asynchronous JavaScript and XML” 中文意思：异步JavaScript和XML。指一种创建交互式网页应用的网页开发技术。 AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。

不是指一种单一的技术，而是有机地利用了一系列相关的技术： web标准( Standards-Based Presentation )XHTML+CSS的表示, 使用 DOM( Document Object Model )进行动态显示及交互, 使用 XML 和 XSLT 进行数据交换及相关操作, 使用 XMLHttpRequest 进行异步数据查询、检索. 简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端的集合.

网页请求回执过程(请求响应模式)

AJAX优点

Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新) 与服务器之间的沟通，完全是透过Javascript 来实行
使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

XMLHTTPRequest

Ajax应用程序的核心就是它。

XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

简而言之：它可以异步从服务器端获取txt或者xml数据

创建XMLHTTPRequest对象

使用XMLHttpRequest对象按照下面模式，可以同步地XMLHttpRequest对象：

创建对象； - new (叫助手过来)

创建请求； - open (告诉他要去做的事情)

发送请求； - send (去吧)

一、

先来创建XMLHttpRequest对象、Firefox、safari和Opera中创建该对象的JavaScript代码为：

 var xhr = new XMLHttpRequest();

在IE5/6中代码为：

var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

注意，JavaScript区分大小写。

二、

为XMLHttpRequest对象设置请求参数

1.GET方式：

1.1设置参数

xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);

1.2GET方式请求可以设置浏览器不使用缓存

xhr.setRequestHeader("If-Modified-Since", "0");

1.3发送:

xhr.send(null);//GET方式

2.POST方式：

2.1设置参数：

xhr.open("POST", "GetAreasByAjax.aspx", true);

2.2添加请求头：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

2.3发送：

xhr.send("isAjax=1&na=123");//POST方式

设置回调函数

异步使用XMLHttpRequest对象

异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。

使用模式应该是：

创建该对象；-new
设置readystatechange事件触发一个回调函数; -onreadystatechagne
打开请求；-open
发送请求；-send

注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。
如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
如果已经准备好，就继续往下执行；

XMLHttpRequest常用方法
方法	说明
abort	取消请求
open	需要使用多个参数，第一个设置方法属性，第二个设置目标URL，第三个指定是同步(false)还是异步(true)发送请求
send	发送请求到服务器
setRequestHeader	添加自定义HTTP头到请求
getAllResponseHeaders	获取HTTP响应头的整个列表
getResponseHeader	仅获取指定的HTTP响应头

【编写回调函数】

1.在xhr.send之前添加设置回调函数代码：

xhr.onreadystatechange = watching;

2.回调函数

function watching() {
       if (xhr.readyState == 4) {
           if (xhr.status == 200) {
               var msg = xhr.responseText; //服务器返回的字符串
           } else alert("服务器错误!" + ajaxH.status);
       }
}

异步对象常用的属性
属性	说明
onreadystatechange	返回或设置异步请求的事件处理程序
readyState	返回状态码：0：未初始化；1：打开；2：发送；3：正在接收；4：已加载
responseText	使用字符串返回HTTP响应
responseXML	使用XML DOM对象返回HTTP响应
status	返回HTTP状态码

【异步对象readyState属性】

readyState属性

readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。

0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；

1：已打开。对象已经创建并初始化，但还未调用send方法；

2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；

3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；

4：已加载。所有数据接收完毕

AjaxDemo.aspx

    <title></title>
    <script src="../Js/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGetDate").cli(function () {
                //开始通过Ajax向服务器发送请求
                var xhr;
                if (XMLHttpRequest) {//表示用户使用的高版本IE，谷歌，狐火等浏览器
                    xhr = new XMLHttpRequest();
                } else {// 低IE
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("get", "GetDate.ashx", true);
                xhr.send();//开始发送
                //回调函数:当服务器将数据返回给浏览器后，自动调用该方法。
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {//表示服务端已经将数据完整返回，并且浏览器全部接受完毕。
                        if (xhr.status == 200) {//判断响应状态码是否为200.
                            alert(xhr.responseText);
                        }

                    }
                }
            });
        });

    </script>

<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" value="获取服务端时间" id="btnGetDate" />
        </div>
    </form>
</body>

GetDate.ashx.cs

context.Response.ContentType = "text/plain";
context.Response.Write(DateTime.Now.ToString());

xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true);

context.Response.Write(context.Request.QueryString["name"]);

<title></title>
    <script src="../Js/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGetDate").click(function () {
                //开始通过Ajax向服务器发送请求
                var xhr;
                if (XMLHttpRequest) {//表示用户使用的高版本IE，谷歌，狐火等浏览器
                    xhr = new XMLHttpRequest();
                } else {// 低IE
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true);
                xhr.send();//开始发送
                //回调函数:当服务器将数据返回给浏览器后，自动调用该方法。
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {//表示服务端已经将数据完整返回，并且浏览器全部接受完毕。
                        if (xhr.status == 200) {//判断响应状态码是否为200.
                            alert(xhr.responseText);
                        }

                    }
                }
            });
        });

    </script>

<input type="button" value="获取服务端时间" id="btnGetDate" />

context.Response.Write(context.Request.Form["name"]);
//或者context.Response.Write(context.Request["name"]);
//让他自己判断是queryString还是form