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

Posted 2020-07-24 noodle

参考 高性能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);
}