1.选择数据传输方式
（1）请求数据
-
XHR
- 可以异步和同步发送和接受数据，可以在请求中添加头部信息，并读取响应报文所有头信息，以及响应文本
- 可以监听readyState,确定响应信息正在传输中
- 不能从外域请求数据
- 经GET请求的数据会被缓存起来（需要服务段添加expires头部信息）
- GET请求参数长度接近和超过2048个字符，才使用POST请求
-
JSONP
- 能跨域请求数据，本质为动态加载脚本，运行脚本中的回调函数
- 只能发送GET请求，不能设置请求报文头部信息，不能访问响应头部信息
- 响应消息作为js执行，并非字符串，解析速度相当快
- 安全问题
-
Multipart XHR
- 客户端用一个Http请求，从服务端详客户端传输多个资源，服务端将资源打包成一个约定字符串分割的长字符串，再用js代码处理这个长字符串
- 获取的资源无法被浏览器缓存
- 减少HTTP请求数量能提升页面性能
（2）发送数据
- XHR
- 发送到服务其是重要数据时，在失败时重试
xhr.onerror=function(){
fail(xhr.status);
//发送重要数据时重试
setTimeout(function(){
xhrPost(url,param,success,fail);
},1000);
};
- 发送数据时，GET方式更快，只用发送一个数据包，而POST方式，至少要发送两个数据包，一个装载头信息，另一个装载POST正文，POST更适合发送大量数据到服务器
2.选择数据格式
- 数据格式越轻量级越好，一般使用JSON，有极好的通用性
- 数据集较大且对解析时间有要求可以采用
- JSONP，是可执行js而不是字符串，解析速度极快，可以跨域使用，不可传输敏感数据，任何人都可以获取到
- 字符分割的自定义格式，用split解析，解析速度相当快，且通常文件尺寸更小
3.ajax性能优化
最快的ajax请求就是没有请求：
- 设置HTTP头信息
使用GET请求，在服务端添加Expires头部信息，告知浏览器资源要缓存响应多久，通过浏览器缓存 - 本地数据存储
手动缓存资源，可以手动操作缓存，且在移动设备上浏览器缓存较小
//手动缓存区
var cache={};
function xhrGet(url,success,fail){
if(cache[url]){
return success(cache[url]);
}
var xhr=new XMLHttpRequest();
xhr.onerror=function(){
fail(xhr.status);
};
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if((xhr.status>=200 && xhr.status<300)|| xhr.stauts===304){
cache[url]=xhr.responseText;
success(xhr.status,xhr.responseText);
}
else{
fail(xhr.status);
}
}
};
xhr.open('GET',url,true);
xhr.send(null);
}
4.其他优化
- 减少请求数，合并js和css文件，或使用MXHR
- 缩短页面加载时间，页面主要内容加载完成后，用ajax获取那些次要的文件
- 确保代码错误不会输出给用户，在服务端做好异常处理
- 使用成熟的ajax类库
