ASP.NET知识总结（8.AJAX异步）

原创于 2015-03-10 15:55:17 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

ASP.NET 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了AJAX的工作原理、特点、XMLHttpRequest对象的使用方法，包括异步请求的基本步骤、创建XMLHttpRequest对象、编写回调函数、异步对象readyState属性、XMLHttpRequest对象属性与常用方法，以及在实际应用中的注意事项。

AJAX:” Asynchronous JavaScript and XML” 中文意思：异步JavaScript和XML。指一种创建交互式网页应用的网页开发技术。

不是指一种单一的技术，而是有机地利用了一系列相关的技术：简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端的集合

AJAX特点

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

XMLHttpRequest对象

简而言之：它可以异步从服务器端获取txt或者xml数据老版本IE: new ActiveXObject("Microsoft.XMLHTTP"); 新版本浏览器： new XMLHttpRequest();

异步请求基本步骤

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

创建对象； - new (叫助手过来) 创建请求； - open (告诉他要去做的事情) 发送请求； - send (去吧)

主要方法及操作步骤： <1>获取对象：构造方法 <2>建立连接：方法open(method（采用HTTP协议请求方式GET POST）,url(网址地址),isAsync（是否异步 true---同意异步）) <3>配置获取反馈：属性onreadystatechange（状态变化的监听） <4>发送消息：方法send

创建XMLHttpRequest对象

先来创建XMLHttpRequest对象在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为： var xhr = new XMLHttpRequest(); 在IE5/6中代码为： var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”); 注意，JavaScript区分大小写。

编写回调函数

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); } } 判断时注意，要：xhr.readyState == 4&&xhr.status == 200，不要xhr.status == 200&&xhr.readyState == 4

异步对象readyState属性

readyState属性 readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。 0：未初始化。new完后; 1：已打开。对象已经创建并初始化，但还未调用send方法 2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回； 3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整； 4：已加载。所有数据接收完毕

XMLHttpRequest对象属性

一、 onreadystatechange属性，设置回调函数。二、 readyState属性，获取当前XMLHttpRequest对象执行的状态： 1> 0表示以创建XMLHttpRequest对象，但是还没有初始化，即没有调用open()方法设置XMLHttpRequest对象。 2>1表示创建了XMLHttpRequest对象，并且调用了open()方法进行初始化，但是还没有调用send()方法。 3>3表示浏览器正在接受服务器的响应数据。 4>所有数据已经被接受完毕。三、 status属性，服务器返回的http状态码。（>=200 and <300、304未修改，读取缓存。都表示成功）四、 statusText属性，服务器返回的状态码对应的友好的文字说明，比如200对应的OK. 五、 responseText属性，以字符串方式获取服务器对客户端的响应。六、 responseXml属性，当请求的是一个xml文件时，或者响应头中Content-Type为：text/xml或application/xml时，返回一个XmlDocument对象（Dom节点对象），支持标准的dom的成员，比如：childNodes、documentElement、firstChild、lastChild、nextSibling、nodeName、nodeType、nodeValue、parentNode、doctype等。

XMLHttpRequest对象常用方法

一、 open("get","url",true)初始化，如果第三个参数为false,则js等待请求完毕后才会继续执行。二、 setRequestHeader("","")增加http请求头信息。在open()之后，send()之前调用。三、 send(null);发送请求。send()方法的参数表示为在请求报文体中发送的数据内容。为了最大化的浏览器兼容问题，如果没有请求报文体就传递null。get请求没有请求报文体，所以一般为null。使用post请求时才需要设置报文体。四、 getResponseHeader("Content-Type"),根据响应的报文头获得报文内容。五、 getAllResponseHeaders();获取所有的响应报文头内容。六、 abort();取消当前的http请求，取消之后如果要重新发起请求，建议重新创建一个XMLHttpRequest对象。

XMLHttpRequest常用方法

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

XMLHttpRequest常用属性

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

Ajax使用注意

xhr只能向同一个域中的相同端口号、相同协议的url发起请求，不能跨域,否则会引起错误。为了浏览器兼容,get请求时最好为send()传递null参数。在创建了xhr对象后立刻设置onreadystatechange事件，这样就能监视到所有的状态。如果不需要监视其他状态只监视readyState==4的状态则可以在send()之后设置。 get请求时，请求中的QueryString的参数名称与参数值最好使用encodeURIComponent()进行编码。否则在某些浏览器下无法获取该值，比如IE. post请求时，为了像表单那样提交数据需要设置请求的Content-Type为：application/x-www-form-urlencoded。send("键=值&键=值") 解析json格式时eval("("+json+")")。但有安全性问题。

-》使用注意 -》示例2：使用post方式提交 需要设置头信息：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); -》如果中文乱码的解决：在客户端使用window.encodeURIComponent()进行编码在服务器端使用Server.UrlDecode()进行解码

<!DOCTYPE html> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>

//--------GET------------- ////1.创建对象 //var xhr = new XMLHttpRequest(); ////2.打开连接 //xhr.open('get', 'GetTime.ashx?title=xlb', true); ////3.配置 //xhr.onreadystatechange = function () { // //如果成功返回则展示 // if (xhr.readyState==4) {//通信成功 // if (xhr.status == 200)//成功返回信息 // { // var showTime = document.getElementById('showTime'); // showTime.innerHTML = xhr.responseText; // } // } //}; ////4.发送 //xhr.send(null);//当使用GET请求时，最好设置为null

//-----------POST--------------

var showTime = document.getElementById('showTime'); showTime.innerHTML = '<img src="images/loading.gif" />';

//1.创建对象 var xhr = new XMLHttpRequest(); //2.打开连接 xhr.open('post', 'GetTime.ashx', true); //3.配置 xhr.onreadystatechange = function () { //如果成功返回则展示 if (xhr.readyState == 4) {//通信成功 if (xhr.status == 200)//成功返回信息 { var showTime = document.getElementById('showTime'); showTime.innerHTML = xhr.responseText; } } }; //4.发送 //以post请求发送请求 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send('title=yg');

}

} </script>

</head> <body> <input type="button" id="btnGetTime" value="获取当前时间" /> <div id="showTime">

</div> </body> </html>

--------GetTime.ashx----------

using System; using System.Collections.Generic; using System.Linq; using System.Threading; using System.Web;

namespace t1_HelloWorld { /// <summary> /// GetTime 的摘要说明 /// </summary> public class GetTime : IHttpHandler {

public void ProcessRequest(HttpContext context) {

Thread.Sleep(5000);

string title = context.Request["title"]; context.Response.ContentType = "text/plain"; context.Response.Write(DateTime.Now.ToString()+"---"+title); }

public bool IsReusable { get { return false; } } } }

=======================================================

使用jquery完成异步操作 -》参考文档介绍提供的异步api url：请求地址 type：请求方式，主要是get、post data:{}：请求的数据 dataType:返回值的类型，主要有xml、text、json、script、html success:function(data){...}成功的回调函数（4，200）