[ASP.NET]创建XMLHttpRequest对象

前言：上一篇博客说道提高用户体验度的Ajax,这篇博客和大家分享一下Ajax中的主角XMLHttpRequest。

（一）简介

1.XMLHttpRequest简介

XMLHttpRequest是Ajax应用程序的核心。
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

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

2.XMLHttpRequest常用方法

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

（二）创建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以GET方式 发送

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

2.POST方式：

1.1设置参数：

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

1.2添加请求头

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

1.3以POST方式发送

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

(三)回调函数

一、设置回调函数

1.异步使用XMLHttpRequest对象

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

2.使用模式应该是：

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

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

二、编写回调函数

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);
       }
}

三、异步对象readyState属性

1.异步对象常用属性

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

3.XMLHttpRequest对象会经历5种不同的状态。

2.readyState属性

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

0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
1：已打开。对象已经创建并初始化，但还未调用send方法；
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕

总结：本编博客主要内容是创建XMLHttpRequest对象，后面的博客会分享一下JSON，欢迎大家浏览评论~