再深入一点ajax

最新推荐文章于 2024-04-27 14:59:38 发布

weixin_30525825

最新推荐文章于 2024-04-27 14:59:38 发布

阅读量235

点赞数

原文链接：http://www.cnblogs.com/JhoneLee/p/3619106.html

版权

1.建立兼容性强的XHR对象有那么复杂么？

看过一些书，书上为了写针对低版本IE和其他非IE浏览器需要写一大串兼容函数，典型的就是JS高级程序上的。

可是在现实开发中，为了兼容IE6/IE7，只需要这样创建一个XHR对象： var XHR=new ActiveXObject('Microsoft.XMLHTTP');就足够了。

而IE8以上是支持XMLHttpRequest对象的。

2.ajax修改HTTP请求头和获取HTTP响应头

无论是ActiveX对象还是XMLHttpRequest对象，都会支持以下几种方法：

xhr.setRequestHeader('key','value');

xhr.getResponseHeader('key');

xhr.getAllResponseHeaders();

区分一下：在xhr对象的方法中，我们只能设置http请求头，而不能获取http请求头。相反：我们只能获取响应头，而不能设置响应头。（原因嘛，稍微有点BS常识的人都知道）

不过这三种方法中常用的只有setRequestHeader方法，可以用来设置请求报头，典型的就是GET请求缓存和post方式模拟提交表单数据的请求，必须需要设置http响应头的Control-Type属性值为：application/x-www-form-urlencoded，而设置头的顺序也是有讲究的，1.先open 2.设置头 3.再send(data); 否则会报 ‘未指明错误’ 的异常

剩下的两种，除非你要做响应进度条，否则没啥用（至少初级水平的前端开发人员在大多数情况下是用不到的）。利用的是响应头中的Content-length

3.ajax的CORS策略

所谓的CORS其实就叫跨域资源共享，说白了就是Ajax跨域。

ajax跨域不是剃头挑子一头热就能解决的，肯定需要目标资源那边的服务器支持，否则无法达成跨域

设置响应报头方法

js高级程序设计上说的很清楚，我只是简单的提一下：

不同域服务器要做的事：给HTTP的响应报头添加如下属性： Access-Control-Allow-Origin：ajax请求域域名

发起ajax请求域要做的事：XMLHttpRequest已经支持了对不同域资源的解析，所以这边我们不需要做什么改动。至于ActiveObject,由于我在用两个同域名不同端口的VS2010项目做的实验，即使不设置响应头也能“跨域”，所以现在不确定。

综合上述提到得内容，我们可以编写一个通用的ajax方法：

function ajax(url, method, funcSucc, funcFail, data, contentType) {
    var xhr = null;
    if (window.ActiveXObject) {
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    else {
        xhr = new XMLHttpRequest();
    }
    
    if (data) {
        if (method == 'post' || method == 'POST') {
            xhr.open(method, url, true);
            try{
                xhr.setRequestHeader('Content-Type', contentType);
            }
            catch (e) {
                alert(e);
            }
        }
        else {
            var arr = url.split('?');
            if (arr[1]) {
                url = arr[0] + '?' + arr[1] + '&' + +data;
            }
            else {
                url += '?' + data;
            }
            xhr.open(method, url, true);
        }
    }
    
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == '200') {
                if (funcSucc) {
                    funcSucc(xhr.responseText);
                }
                else {
                    return xhr.responseText;
                }
            }
            else {
                if (funcFail) {
                    funcFail();
                }
                else {
                    alert('错误状态：' + xhr.status);
                }
            }
        }
    }
    if (method == 'post' || method == 'POST') {
        xhr.send(data);
    }
    else {
        xhr.send(null);
    }
}

4.如何提升ajax的性能

a.设法缓存请求到得responseText

方法有两种：1是设置请求报头，添加 Expires字段的过期时间，时间格式是格林尼治时间。而且只适用于get方法的请求；

2是设置本地缓存，用全局对象存储responseText，这种方法比较简单，而且适用于移动端。

b.将数段内容的responseText分段处理

通过判断xhr对象的readyState==3时的状态，可以一段一段的获取responseText，这样可以避免处理长的回文。

req.onreadystatechange = function() {
if (req.readyState === 3) { // 只有当二次请求之后的所有请求的状态为3时，才能获取上次请求发回的responseText，这里是对上次的处理.
var dataSoFar = req.responseText;
...
}
else if (req.readyState === 4) { // 又一段请求回文被获取
var data = req.responseText;
...
}
}