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;...}}
c.回文类型的选择
建议选用jsonp方式处理请求,或者自定义回文结构类型。jsonp的方式使得回文内容被当做JavaScript对象处理,省去了对象转换的繁琐。而自定义回文结构,则可以用更好的解析方法解析responseText;