博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
再深入一点ajax
阅读量:5344 次
发布时间:2019-06-15

本文共 3108 字,大约阅读时间需要 10 分钟。

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;

转载于:https://www.cnblogs.com/JhoneLee/p/3619106.html

你可能感兴趣的文章
【原创】.Net WebForm Calendar 日历控件常用方法
查看>>
对javascript中的匿名函数的理解
查看>>
noip模拟赛 道路分组
查看>>
【Python web 开发】django 从请求到响应经历了什么?
查看>>
移动端调试痛点?——送你五款前端开发利器
查看>>
贴心小棉袄
查看>>
关于this在不同使用情况表示的含义
查看>>
汇编实现: C库常见函数,串操作指令作用
查看>>
python中lambda表达式应用
查看>>
spring集成mongodb jar包版本问题
查看>>
ajax
查看>>
周赛Problem 1025: Hkhv love spent money(RMQ)
查看>>
[opencv] cv::Mat_类有时候可以替代cv::Mat类
查看>>
【BZOJ1257】【CQOI2007】余数之和sum
查看>>
(转)Thoughts on TypeScript——JavaScript大师Nicholas C. Zakas
查看>>
Spring Data JPA 实例查询
查看>>
写的第一个简单表格
查看>>
C# Datatable.Select()用法简介
查看>>
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-refresh...
查看>>
114. Flatten Binary Tree to Linked List
查看>>