高性能javascript学习笔记系列(6) -ajax

参考 高性能javascript 

       javascript高级程序设计

ajax基础  ajax技术的核心是XMLHttpRequest对象(XHR),经过XHR咱们就能够实现无需刷新页面就能从服务器端读取数据  

var xhr = new XMLHttpRequest(); //只支持IE7以及更高的版本
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4) {
      if( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) {
        //成功
      } else {
          //失败
      }
  }
}；
xhr.open("get","test.html",false);  //第三个参数表明发送同步请求仍是异步请求 false表明同步  true表明异步  open方法选择请求的类型 请求的URL 是否发送异步请求
xhr.send(null);

上面是一个简单的建立XHR对象 而且发送get请求的例子

readyState属性  表示请求/响应过程的当前活动阶段

• 0：初始化阶段 还没有调用open方法
• 1：启动  已经调用open()方法 还没有调用send方法
• 2：发送  已经调用send方法，可是未收到响应
• 3：接收 已经接收到部分的响应数据
• 4: 完成  已经接收到所有的响应数据，并且能够在客户端使用

在接收到响应后，响应的数据会自动的填充XHR对象的属性 

responseText 做为响应主体被返回的文本

status 响应的HTTP状态

statusText HTTP状态的说明

请求数据

  （1）XHR   缺点XHR没法从外域请求数据  get请求的数据数据会被浏览器缓存起来

   （2）动态脚本注入(jsonp)  在页面中建立一个脚本标签而且设置它的src属性 而后将它添加到页面中  它能够从外域请求数据，可是动态脚本控制提供的控制是有限的，不能设置头信息，参数传递的方式也只能GET方式,不能设置请求的超时处理或者重试 响应的消息必须是可执行的js代码 也就是你想请求的任何格式的数据都必需要封装在一个回调函数中

   (3) Multipart XHR (MXHR) 容许客户端只用一个HTTP请求就能够从服务端向客户端传送多个资源，经过在服务端将资源打包成双方约定的字符串分割的长字符串发送给客户端，而后在客户端去处理这个长字符串，根据提供它的mime-type类型和其余信息解析出每一个资源  可是经过这种方式获取的数据没法被浏览器缓存，可是这种方式能很好的减小http请求

发送数据

  (1)XHR  能够选择post 和 get两种方式向服务端发送数据  get请求是将请求信息包含在url中  post请求将请求信息包含在请求体中，下面是一个简单的发送post请求的函数

function xhrPost(url,params,callback) {
  var req = new XMLHttpRequest();

  req.onerror = function(){
      setTimeout(function(){
          xhrPost(url,params,callback);
      },1000);
  }    //请求失败

  req.onreadystatechange = function() {
      if(req.readyState == 4) {
        if(callback && typeof callback === 'function') {
            callback();
        }    
      }
  }
  req.post("POST",url,true);
  req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  //数据返回服务器的编码类型时url编码  服务器端知道如何解析数据
  req.setRequestHeader("Content-Length",params.length); 
  req.send(params.join('&'));
}

（2）Beacons   经过js建立一个新的Image对象，并把src属性设置为服务器上的脚本url(url中包含着须要向服务器端传送的数据)    可是这种方式只能发送get请求，而且在服务端接收到数据想要获取响应信息的方式也有限 

提升ajax性能

  缓存数据

   （1）客户端发送响应的请求头确保响应会被浏览器缓存起来

在请求头中设置expires字段  规定在特定的时间以前 访问该url使用缓存

    （2）在客户端将获取的信息缓存到本地，从而避免再次的发起请求

经过将url和请求的数据作成键值对的方式存储在本地

var localCache = {}

function xhrRequest(url,callback) {
  if(localCache[url]) {
      callback.success(localCache[url]);
      return;
  }    

  var req = new XMLHttpRequest();
  req.onerror = function() {
      callback.error();
  }

  req.onreadystatechange = function() {
    if(req.readyState == 4 ) {
      if(req.responseText == "" || req.status == '404') {
          callback.error();
          return;
      }
      localCache[url] = req.responseText;
      callback.success(req.responseText);
    }
  }
  req.open("GET",url,true);
  req.send(null);
}