AJAX在ASP.NET中的应用（一）——原始的AJAX

最新推荐文章于 2019-05-16 18:34:00 发布

NewClass

最新推荐文章于 2019-05-16 18:34:00 发布

阅读量690

点赞数

分类专栏： ASP.Net 文章标签： ajax AJAX Ajax asp.net ASP.NET Asp.Net ASP.Net Asp.net ASP.net xmlhttprequest xmlHttpRequest XMLHttpRequest

本文链接：https://blog.csdn.net/mlcactus/article/details/8459698

版权

ASP.Net 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

首先说说到底什么是AJAX。其实关于AJAX的概念很简单，概括为异步更新页面，我个人的理解是，客户在网页上的操作需要更新该网页上的内容，而一般情况下，页面内需要更新的部分往往只是局部，甚至可能非常小的一个DIV内的一些文本而已。传统的页面更新方式是通过提交表单(页面中的form标签内的所有input标签)形式更新的（其实APS.NET的实现机制就是这种方式，这是后话），客户的一些输入信息（包括鼠标和键盘的操作）通过form表单提交给服务器，由服务器接收表单数据，根据这些数据生成一个新的页面并返回给浏览器。在浏览器提交表单后，它就傻傻地等待服务器的响应，假如因为一些原因(包括传输原因、数据库原因Whatever)导致服务器响应过慢，那么浏览器就像死机了一样，也不能进行任何页面上的操作，直到服务器已返回新的页面。AJAX技术真是应对这种现象而开发出来的一套更新页面的技术，浏览器只需要向服务端传输必须的数据，而不是整个表单（所以现在很多页面上根本就没有form标签了），然后只获取需要的返回数据，整个过程使用XML数据进行传输，浏览器接收到返回数据后用JavaScript对页面的局部进行更新。因此，浏览器在整个过程中都是可响应的，它传输了必要的数据后立即返回，用户可以进行其他操作。

前面说的是AJAX的基本概念，而所谓“原始”的AJAX其实只是没有经过任何包装的（像Jquery之类），只使用各个浏览器支持的AJAX对象（XMLHttpRequest）来进行AJAX操作的AJAX技术（有点绕）。这里需要说明的是，各个浏览器厂商为了能够支持AJAX，必须提供专门用于AJAX的XMLHttpRequest，这个对象是个已经“基本标准化”的对象，所谓“基本标准化”是没有经过正式标准化，但是各个厂商支持的标准都八九不离十，这些标准可能来自专业标准化机构(如W3C)的标准化草案，也可能其中一个较早开发该技术的公司的方案。虽然各个巨头之间会“谁也不服谁”，但总归进行相互磨合，最后达到一个平衡。对于XMLHttpRequest也是如此，现在的绝大部分浏览器都支持，使用方法也一致，只是存在一些细微的差别而已，这方面Web开发者想必都比较痛恨IE6。

创建一个XMLHttpRequest的方法为（从网上COPY而来）：

var xmlhttp;
if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//为了兼容IE6而设定的
}

XMLHttpRequest的常用方法、属性和事件：

1，open(method,url,async)：相当于一次AJAX的基本参数设置，其中method请求类型，” Post” 还是”Get”； url为请求的文本在服务器上的位置，当然这里的文本可以为静态的也可以为动态的。Async指示此次请求是否为异步，默认为true，关于这个参数设置在事件onreadystatechange中讲解。

2，setRequestHeader(header,value)：这个方法用的不多，但是非常重要，作用在于设定提交一次请求的HTTP头文件内容，如页面的编码，页面的可接受类型等等。有时候用AJAX发出的请求需要附加一些特殊的标识，而这些标识就是通过这个方法附加的，一般在method请求类型为“Post”时用到，下面的截图就是我用IE浏览器执行一次简单的AJAX操作时发送的HTTP头文件内容，如需对这些参数进行更改，就需要调用该方法了。

3，send()，这个方法很明确，就是设定好各个参数后开始发送请求。

4，readyState属性：存有 XMLHttpRequest 的状态，其值可能为0: 请求未初始化、1: 服务器连接已建立、2: 请求已接收、3: 请求处理中、4: 请求已完成，且响应已就绪

5，status：本次请求状态，下面列出几个基本常用状态：

100 - Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。

200 - OK 一切正常，对GET和POST请求的应答文档跟在后面。

400 - Bad Request 请求出现语法错误。

6，onreadystatechange事件：当请求状态发生变化时发生。这个事件只有当open方法中的参数async为true是才有效，即只有异步请求才会动态记录请求状态的变化，若非异步，就只有请求结束后才继续执行下面的操作。

这里需要强调的一点是，无论参数async为true还是false，都不影响AJAX的本质功能，即刷新局部页面。

说了那么多下面给出一次典型的AJAX异步方法如下：

    functionAJAXTest() {
        varxmlhttp;
        if(window.XMLHttpRequest) { xmlhttp =newXMLHttpRequest(); }
        else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
        xmlhttp.open("Get","AjaxGetText.txt",true);                             //异步请求
        xmlhttp.send();                                                                    //开始异步请求
        xmlhttp.onreadystatechange = function () {                           //给请求状态变化事件绑定方法，所以这个function每当请求状态发生变化时都会执行一遍，但我们一般只需捕捉成功的状态
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {     //readyState属性为4且status为200表示此次Ajax请求成功！
                document.getElementById("label_test").innerHTML =xmlhttp.responseText;
            }
        }
     }

一次典型的AJAX的非异步方法如下：

functionAJAXTest() {
     varxmlhttp;
     if(window.XMLHttpRequest) { xmlhttp =newXMLHttpRequest(); }
     else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
     xmlhttp.open("Get","AjaxGetText.txt",false);                            //非异步请求
     xmlhttp.send();                                                                    //因为是非异步请求，所以请求之后，线程就卡在这里了，直到成功后返回再执行后续的代码
     document.getElementById("label_test").innerHTML= xmlhttp.responseText;
}

这里是我为这篇文章配置的简单测试代码，点击下载

其实可以发现，如果需求不复杂，使用这种原始的(或者说传统的)的Ajax来实现其实并不难，对象就那么一个，属性方法两只手的手指头就数的过来。然而，为了提高代码可用性，也为了提高整洁度，我们根本没必要每次请求都先实现创建一个XMLHttpRequest对象，然后循规蹈矩给它绑上状态变化事件的方法，完全可以对相似的过程进行封装，比如将封装一个方法返回XMLHttpRequest对象，再如封装一个方法开始一个请求，XMLHttpRequest需要设定的各个属性通过方法参数进行传入。如果你对自己的编程技术很自信或者你不喜欢像个"傻瓜“样地只会用别人的东西，你完全可以自己封装一套实现Ajax请求的对象和方法；当然，技术牛人就是喜欢做这样的事情，比如Jquery团队就在Jquery中封装了实现Ajax的一系列方法，个人认为做的非常好，因此在平常的项目中用的也比较多，所以，下一篇文章就专门介绍Jquery-Ajax。