Alax技术兑现的基本原理——XMLHttpRequest对象的使用

Alax技术实现的基本原理——XMLHttpRequest对象的使用

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

 

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

 

    虽然JQuery提供了对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

    }

}