XMLHttpRequest对象的使用

很久之前就听说Ajax技术，但一直对其只是一知半解，只知道它可以提供客户端的数据不比完全提交的服

务器上的“半刷新”效果。现在想好好好学习一下。

    虽然提供了对Ajax的封装，但明白其中的基本原理是那么的重要。可以使用最基础的javascript代码

实现Ajax效果。

 

1.创建XMLHttpRequest对象

   

不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。

Internet Explorer 使用 ActiveXObject。

其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

要克服这个问题，可以使用这段简单的代码：

var XMLHttp=null;

if (window.XMLHttpRequest){

     XMLHttp=new XMLHttpRequest()

}else if (window.ActiveXObject){

    XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

此时XMLHttp.readyState = 0
 

2.设置回调函数

XMLHttp.onreadystatechange = function(){......};
 

3.设置和服务器交互的连接属性

XMLHttp.open("发送方式：get或者post等", url, true或者false);

其中第三个参数：true表示异步执行，意味着send() 立即返回等待服务器相应的同时，前端页面代码还可以

                            继续执行下去

                            false表示同步执行，意味着send()方法会阻塞并不会返回，直到 readyState 为 4 并且服

                            务器的响应被完全接收，客户端页面会滞留在send()方法

此时XMLHttp.readyState = 1
 

4.向服务器发送请求

XMLHttp.sendI(null)

此时XMLHttp.readyState = 2

当所有的 HTTP 响应头部已经接收，send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange

事件句柄。如果响应较长，send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄：这可以

作为一个下载进度指示器。最后，当响应完成，send() 或后台线程把 readyState 设置为 4，并最后一次触发

事件句柄。
 

5.回调函数

用于接受服务器的响应信息

if(XMLHttp.readyState == 4){

    //表示响应完成

    if(XMLHttp.status == 200){

     //表示http响应完成

       //使用respinseText和respinseXML

    }

}