JQuery——Ajax之XMLHTTPRequest对象

XMLHTTPRequest对象简介

1、XMLHttpRequest对象是整个Ajax开发的基础；

2、能够向服务器发送请求；

3、能够接收服务器返回的数据；

4、提供客户端和服务器异步通信的能力；

5、最早出现在IE，随着应用的广泛，渐渐推广到其他浏览器中。

XMLHttpRequest对象的创建

>不同的浏览器创建的方法不同;

>所有现代浏览器均內建XMLHttpRequest对象

        IE7+、Firefox、Chrome、Safari

        语法：variable=new XMLHttpRequest();

>老版本的Internet Explorer使用ActiveX对象

        IE5、IE6

        语法：variable=new ActiveXObject("Microsoft.XMLHTTP");

>为了应对所有的现代浏览器，在创建XMLHttpRequest对象时要分别处理。

XMLHttpRequest对象的方法

abort：取消当前的HTTP请求；

getResponseHeader：获得响应内容的HTTP头信息；

open：初始化一个HTTP请求，指定请求方法，URL，身份验证信息等。

send：发送一个HTTP请求到服务器；

setResponseHeader：设置HTTP请求的头信息。

为何要用到setRequestHeader?

通常在HTTP协议里，客户端向服务器取得某个网页的时候，必须发送一个HTTP协议的头文件，告诉服务器客户端要下载什么信息以及相关的参数。而XMLHTTP
就是通过HTTP协议取得网站上的文件数据的，所以也要发送HTTP头给服务器。
但是XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里，这时当我们需要修改或添加这些参数时就用到了

CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式是URL编码

CONTENT-TYPE:multipart/form-data

getResponseHeader

在实际程序中，有时需要从服务器获取一些信息。通过读取首部信息，可以获取到Content-Type（内容类型）、Content-Length（内容长度），甚至Last-Modify（最后一次修改）的日期。

用open方法创建一个请求：

open(method,URL,asynchronous)

method：请求类型，get或post

url：请求地址，可以使用绝对地址，相对地址，地址可以附带查询字符串

asynchronous：可选参数，请求同步还是异步。默认为true（异步）

open方法的get请求类型：

如果使用"get"方式发送请求，可以用下述办法

xhr.open("get","/Ajax/servlet/ServletName?sName=" +
sName);

xhr.send(null);

get请求的特点：

get请求的数据会附在URL之后，以?分隔URL和传输数据，参数之间以&相连

get方式提交的数据长度受浏览器限制，一般是1024字节。

open方法的post请求类型：

如果使用"post"方式发出请求，可以用下述办法

xhr.open("post","/Ajax/servlet/ServletName");

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

xhr.send("sName=" +
sName);

用send方法发送一个请求：

send(parameter)

parameter为参数，表示发送至服务器的数据，格式为查询字符串格式

例：parameter="sName=abc"

同步还是异步：

如果使用同步方法，执行完send方法后阻塞，直到请求完成或超时才执行下一语句；

如果使用异步方法，执行完send方法，JavaScript无需等待服务器的响应。

XMLHttpRequest对象的属性



XMLHttpRequest对象的常用属性：

xhr.onreadystatechange=getStatusCallback;

function getStatusCallback(){

  if(xhr.readyState == 1){

  alert("正在加载");

  }elseif(xhr.readyState == 2){

  alert("已加载");

  }elseif(xhr.readyState == 3){

  alert("交互中");

  }elseif(xhr.readyState == 4){

  alert("完成");

  if(xhr.status == 200){

  alert(xhr.responseText);

  }elseif(xhr.status == 404){

  alert(404);

  } 
}}

XMLHttpRequest对象处理响应

使用onreadystatechange事件捕获请求的状态变化

xhr.onreadystatechange=function(){

  //事件处理代码

}

xhr.open();

xhr.send();

事件绑定代码必须先于open和send代码，否则可能引起事件代码无法得到执行

使用responseText获得返回的文本

responseText可以获得以文本形式返回的数据结果

使用responseXML获得返回的XML文档

使用该方法确定服务器端返回的是XML格式文档

responseXML可以获得以XML形式返回的数据结果，其中，该XML文档已经解析完毕

响应responseXML

function handleResponse() {

   if (xmlHttp.readyState == 4) {

       if (xmlHttp.status == 200) {

            varretElement =
xmlHttp.responseXML;

            varuserid =
getNodeValue(retElement, "userid");

            var username =
getNodeValue(retElement,"username");

            var online =
getNodeValue(retElement, “online");

            …

       }   }}