高性能Ajax

XMLHttpRequest javascript

---

高性能的Ajax应该考虑数据传输技术和数据格式，以及其他的如数据缓存等优化技术。

 

一、请求数据

请求数据的常用技术有XHR，动态脚本注入、Multipart XHR、iframes、Comet五种，其中前三种比较常见，后两种往往在比较极端的情况下使用。

 

1、XMLHttpRequest

这个是首选技术，有两种方式，post和get， 
GET：一般针对那些不会改变服务器状态，只获取数据的请求，GET请求的数据会被缓存起来，对于需要多次请求同一数据的情况，有助于提升性能。 
缺点：请求的url加上参数长度接近或超过2048字符时，会导致URL被截断（在IE中，IE限制url长度,IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。），这时需要使用post。 
POST:理论上POST没有限制，可用于较大量的数据传输。 
注：通过XHR请求数据时，无法访问外域数据

 

2、动态脚本注入

克服了XHR的限制：能够跨域请求数据 
通过创建script标签，将src指向不同域的url即可。 
与XHR相比： 
(1) 动态脚本注入无法设置头信息， 
(2) 只能使用get方式，不能使用post方式， 
(3) 不能访问请求的头信息，也不能将响应消息作为字符串来处理，响应消息一般是可执行的javascript脚本（其他待返回的XML、JSON或其他格式的数据都要封装在一个回调函数中）

 

3、Multipart XHR

MXHR允许客户端只用一个HTTP请求从服务器端向客户端传送多个资源。它通过在服务器端将多个资源（css文件、HTML片段、js代码、base64编码的图片）打包成一个由双方约定的特定字符分割的长字符串发送到客户端。然后，在客户端根据那个特定的字符将这个长字符串解析成各个资源。 
例如：

 

1. $dataArr=array();
2. $images=array('1.jpg','2.jpg','3.jpg');
3. foreach($images as $img){
4. $file=fopen($img,'r');
5. $imgdata=fread($file,filesize($img));
6. $imgdata=base64_encode($imgdata);
7. fclose($file);
8. array_push($dataArr,$imgdata);
9. }
10. $newchar=chr(1);
11. echo implode($newchar,$dataArr);//使用一个不会出现在base64中的一个字符将各个图片的base64编码连成一个长字符串

数据到达客户端后，再进行解析

 

1. function splitImage(imgstring){
2. var imgdata=imgstring.split(\u0001'); //将字符串分割
3. var img=document.createElement('img');
4. for(var i=0,len=imgdata.length;i<len;i++){
5. var tmpimg=img.cloneNode();
6. tmpimg.src="data:image/jpeg;base64,"+imgdata[i];
7. document.getElementById('div1').appendChild(tmpimg);
8. }
9. }

由于一次性请求的资源多，所以不必等待所有资源都返回在进行处理，可以根据readyState状态值监测响应状态，当readyState为3时，就对接收到的部分数据进行处理。 
优点：一次可以请求多个资源，提升性能 
缺点：获取的资源不能被浏览器缓存（以为资源是以字符串形式返回的） 
IE7以下版本不支持readyState为3的状态

 

二、发送数据

 

1、XHR

GET方式受浏览器的最大URL尺寸限制，当上传数据量较大时，用POST方式。 
对于少量数据，GET方式会更快，因为一个GET请求往服务器只发送一个数据包，而一个POST请求，至少要发送两个数据包，一个装载头信息，一个装载 
POST正文。

 

2、Beacons 信标

Beacons和动态脚本注入类似，先创建一个image对象，把src指向服务器上脚本的url，该url包含了通过get方式向服务器上传的键值对数据。

 

1. var params=["namme=lc","id=1"];
2. var url="/test.php";
3. var beacons=new Image();
4. beacons.src=url+"?"+params.join("&");
5. //注：并没有将它插入DOM中 所以图片是不显示的

服务器端接收到数据后，无需向客户端返回回馈信息。但是也可以在服务端做出不同的响应，比如返回1px宽的空白图片代表成功接收，2px宽的空白图片代表接收失败。

 

1. beacons.onload=function (){
2. if(this.width==1){
3. //成功
4. }else if(this.width==2){
5. //失败
6. }
7. }

使用信标，是向服务器回传数据最快最有效的方式，服务器无需返回任何响应正文。 
缺点：无法使用POST方式，上传数据量有限制，服务器的响应类型很有限。 
所以，如果要往客户端返回大量数据，只能用XHR 
如果只关心发送数据到服务器（可能要返回少量信息），可以使用图片信标。

Beacons方法很巧妙，比如它可以利用image对象的src属性，浏览器创建一个新的image对象会去加载它的src属性值，如果把我们要传递给服务器的参数使用&连接起来组成GET方式的URL，然后赋给src，那么浏览器在发出请求的时候就可以把我们要传递的参数传递给服务端。我们可以在服务端做出不同的响应，比如返回1px宽的空白图片代表成功接收，2px宽的空白图片代表接收失败。这种传递数据的方法一般用于统计用户行为等非必须完成的请求。

补充： 
POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。参考：http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html

 

3、数据格式

服务器端与客户端进行数据传输时，数据的格式会影响其下载速度和解析速度，一般来说JSON形式和字符分隔的自定义格式是最好的。XML、HTML一般会增加数据量，解析较慢。 
大数据量且要求解析时间的话，可以选择： 
a、JSON-P数据，使用动态脚本获取，把数据当做js脚本运行而不是字符串，解析速度极快，能跨域使用，涉及敏感数据时不应使用 
b、自定义数据，用XHR或动态脚本注入获取，通过split解析，比JSON-P略快

 

4、数据缓存技术

一是，在服务器端，设置HTTP头信息，使用浏览器缓存 
一是，在客户端，把获取的信息存储到本地，避免再次请求 
设置HTTP头信息

 

1. $lifetime=7*24*60*60;
2. header('Expires'.gmdate('D,d M Y H:i:s',time()+$lifetime).'GMT');

客户端实现： 
把响应信息保存到一个本地对象中