JS学习笔记10_Ajax

摘抄自：https://www.cnblogs.com/ayqy/p/4434216.html

 

---

 

 

1.Ajax概述

 

Asynchronous JavaScript + XML，支持js与服务器通信。在不unload页面的前提下从服务器获取新数据，以实现更好的用户体验（与传统的单击-等待交互不同的体验）。

 

IE5最先提供了支持，在MSXML库中新增了XHR对象（XMLHttpRequest），可以通过new ActiveXObject(str)的方式创建XHR对象，虽然不是很方便，但至少是原生支持

 

2.XHR对象

 

XMLHttpRequest，[IE6-]对XHR对象的实现与其它浏览器不同，但可以通过对象检测来创建跨浏览器的XHR对象，具体代码如下：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/*获取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对象实现执行回调函数

 

1 2 3 4 5 6 7 8 9 10 11

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请求

 

1 2 3 4 5 6 7 8 9

//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.其它跨域技术

 

1. 图像Ping

   1 2 3 4 5

   var img = new Image(); img.onload = img.onerror = function(){   //响应返回，执行回调函数 } img.src = url;//一旦设置了src属性，就会立即请求（加载）图片，而不是把img元素插入DOM树后才开始

   只能发送get请求，且无法访服务器的响应文本，多用于跟踪用户点击页面或动态广告曝光次数

2. JSONP

 

JSON with Padding，支持浏览器与服务器进行双向通信，且能够直接访问响应文本，但需要服务器端代码的配合，不易确定请求失败与否，而且从其它域加载代码执行，会存在安全问题

 

有一篇很不错的介绍跨域技术的博文

 

9.CSRF攻击

 

Cross-Site Request Forgery，跨站请求伪造，向页面直接插入Ajax代码，不存在同源策略限制，从而伪造请求访问敏感数据。

 

防范方法有：

 

1. 要求用SSL连接访问资源

2. 要求每次请求必须附带上特殊算法计算得到的验证码