1 _AJAX内置对象的创建及使用

最新推荐文章于 2023-04-25 20:01:44 发布

xinglu

最新推荐文章于 2023-04-25 20:01:44 发布

阅读量430

点赞数

分类专栏： AJAX 文章标签： Ajax 浏览器 Firefox JavaScript Microsoft ViewUI

AJAX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

AJAX的原理：利用浏览器内置的XMLHttpRequest对象同步或者异步的获得和显示来自服务器的数据，也是利用HTTP协议为载体，和普通点击网页链接发送请求的区别就是，AJAX不会刷新页面。这个特性可以弥补BS架构装载页面慢的缺点。

由于IE6/IE5.5都将XMLHttpRequest对象实现为一个ActiveX对象，所以在javascript中需要依靠条件判断代码来创建XMLHttpRequest对象。

创建AJAX对象的模板代码：

var xhr = false;

if (window.XMLHttpRequest) {
    //在IE7+，firefox，Mozilla浏览器中被支持
    xhr = new XMLHttpRequest();
} else {
    //在IE5.5,IE6中被支持
    if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

if (xhr) {
    //注册回调函数
   xhr.onreadystatechange = method;
    xhr.open("", url, true);
    xhr.send(null);
} else {
    alert("浏览器不支持AJAX，请升级");
}
//回调函数
function method() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            //这里就可以利用XMLHttpRequest对象提供的方法进行操作
     }
    }
}

之所以要先判断window.XMLHttpRequest属性而不是window.ActiveXObject，是因为在IE7+中也开始和AJAX标准靠拢支持XMLHttpRequest，并且现在用IE7+的人越来越多。

在上述代码中，window.XMLHttpRequest返回的是一个对象或者null，if语句会把调用结果转换成ture或者false。

if (xhr)语句判断xhr对象是否已经被创建，如果没有则会alert一个提示框说明浏览器不支持AJAX。

如果xhr对象被创建，则这里需要三步来完成和服务器的数据交互：

xhr.onreadystatechange = method();设置xhr对象的onreadystatechange事件监听函数，每当xhr.readyState属性值发生变化时，就会触发该事件。readyState属性值会从0-4，所以method函数一共可以被触发5次。
xhr.open("", url, true);该方法做向Server发送请求的参数准备，第一个参数中说明HTTP请求的方法，"GET","POST"或者"HEAD"，第二个参数请求的URL，相当于FORM表单提交中的action属性，第三个参数说明method的调用是同步(false)还是异步(true)。若是同步，则在send方法后等待服务器的响应完成才能进行操作，在等待期间浏览器不能响应用户输入，若是异步，则浏览器继续响应用户输入，同时后台等待服务器的响应。建议尽量使用异步，例如在用户填写表单验证的时候，用户填写的同时，浏览器在后台进行与服务器的表单验证，此时不会打断用户的输入，如果某个表单字段验证失败，则用户可以马上得到通知，这样就大大节省了用户的时间，也降低了Server的负载，因为Server不必重新返回整个页面，而只要进行验证并且返回验证信息。
xhr.send(null);发送上面创建的请求，如果在步骤2中设置的是POST方式，则send方法需要一个参数指明post 的发送参数。

xhr.readyState属性==4代表了和服务器交互已经完成。

xhr.status则说明了从服务器返回的响应中的状态码，熟悉HTTP协议的人都知道code是200时代表正常响应(404代表请求的url资源不存在)，这时就可以利用xhr对象的方法处理从Server返回的数据了。