JS学习笔记10_Ajax
1.Ajax概述
Asynchronous JavaScript + XML,支持js与服务器通信。在不unload页面的前提下从服务器获取新数据,以实现更好的用户体验(与传统的单击-等待交互不同的体验)。
IE5最先提供了支持,在MSXML库中新增了XHR对象(XMLHttpRequest),可以通过new ActiveXObject(str)的方式创建XHR对象,虽然不是很方便,但至少是原生支持
2.XHR对象
XMLHttpRequest,[IE6-]对XHR对象的实现与其它浏览器不同,但可以通过对象检测来创建跨浏览器的XHR对象,具体代码如下:
/*获取HttpRequest对象,可以兼容各个浏览器 包括IE5.5+*/ function getHttpObject(){ if(typeof XMLHttpRequest == "undefined"){//如果该对象未定义,则自定义该对象 XMLHttpRequest = function(){ try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }catch(e){} try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }catch(e){} try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){} try{//老版本的 Internet Explorer (IE5 和 IE6) return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} return false; } } return new XMLHttpRequest(); }
XHR对象的属性如下:
-
responseText:响应体
-
responseXML:如果响应内容是”text/xml”或者”application/xml”,这个属性会保存响应数据的XML DOM文档
-
status:响应的HTTP状态(404, 200之类的)
-
statusText:HTTP状态说明,不可靠,因为各个浏览器不一样,直接用status状态码最可靠
-
readyState:多用于异步请求,虽然同步请求也能用,但没什么意义,readyState的5个值如下:
-
0:为初始化。还没调用open方法
-
1:启动。调用了open没调用send
-
2:发送。调用了send还没收到响应
-
3:接收。拿到了部分响应数据
-
4:完成。拿到了所有数据,并且数据已经可用了
-
3.用XHR对象实现执行回调函数
var xhr = getHttpObject(); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){//本来只用检测200成功和304不变但有些浏览器会把200错报成204 //执行callback } else{ //请求失败 } } }
注意:必须在open函数之前设置readystatechange事件处理器,以保证全浏览器兼容
4.用XHR对象实现get/post请求
//get请求 xhr.open(‘get‘, url, false/true);//初始化,false/true ~ 同步/异步 xhr.send(null);//发送请求,null是为了兼容性 //post请求 xhr.open(‘post‘, url, false/true);//同上 xhr.send(str); /* 可以在open后send前设置请求头,比如添加cookie信息 xhr.setRequestHeader(strHeader, strValue); */
注意:服务器对post请求和提交web表单的请求处理方式不一致,但可以通过修改HTTP头来模拟表单提交
但如果要发送表单数据的话,send的参数str必须是经过序列化的表单数据。此时需要模拟实现序列化函数,比较麻烦,JQuery提供了序列化支持,可以直接$(‘#mForm’).serialize()序列化表单
5.终止请求
xhr.abort();可以在响应返回前终止请求,abort之后不会再触发事件,不允许再访问xhr的响应相关属性
注意:终止请求后应该解除XHR对象的引用,不建议重用XHR对象(由于内存原因)
6.用post还是用get?
post请求消耗的资源多,数据传输速率也比get请求慢很多
但get请求不安全,而且IE对URI的长度有限制(不超过2048个字节),所以尽量用get,不行再用post
7.CORS概述
Cross-Origin Resource Sharing,跨源资源共享,Ajax受同源策略限制,通过一些CORS技术可以打破同源策略限制。例如IE8的XDR对象
其它浏览器通过增强XHR对象实现了对CORS的原生支持:把open函数的url参数设置为绝对URL就好了
所以为了消除歧义,应该在访问本地资源时用相对URL,访问远程资源时用绝对URL
8.其它跨域技术
-
图像Ping
var img = new Image(); img.onload = img.onerror = function(){ //响应返回,执行回调函数 } img.src = url;//一旦设置了src属性,就会立即请求(加载)图片,而不是把img元素插入DOM树后才开始
只能发送get请求,且无法访服务器的响应文本,多用于跟踪用户点击页面或动态广告曝光次数
-
JSONP
JSON with Padding,支持浏览器与服务器进行双向通信,且能够直接访问响应文本,但需要服务器端代码的配合,不易确定请求失败与否,而且从其它域加载代码执行,会存在安全问题
有一篇很不错的介绍跨域技术的博文
9.CSRF攻击
Cross-Site Request Forgery,跨站请求伪造,向页面直接插入Ajax代码,不存在同源策略限制,从而伪造请求访问敏感数据。
防范方法有:
-
要求用SSL连接访问资源
-
要求每次请求必须附带上特殊算法计算得到的验证码
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。