Ajax #

全称为 Asynchronous JavaScript And XML，并非编程语言，仅仅组合了浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）和 JavaScript 和 HTML DOM（显示或使用数据），ajax 其实是一个容易误导人的名称。因为目前更流行前后端分离，所以较少使用 XML 来传输数据，更多地使用 JSON 和 formdata，ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面

Ajax和XMLHttpRequest的关系 #

ajax 是一种技术方案，但并不是一种新技术 ajax 最核心的依赖是浏览器提供的 XMLHttpRequest 对象 所以用一句话来总结两者的关系：使用 XMLHttpRequest 对象来发送一个Ajax请求

fetch #

fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案

fetch 不是 ajax 的进一步封装，而是原生 js，没有使用 XMLHttpRequest 对象

需要先返回一次，第二次才是想要的结果

fetch('http://localhost:3000/test/select', {
  method: 'POST'
})
  .then(function (response) {
    return response
  })
  .then(function (res) {
    if (res.status == 200) {
      console.log(11)
      return
    }
    console.log(222)
  })

fetch('http://localhost:3000/test/select', {
  method: 'POST'
})
  .then(function (response) {
    return response
  })
  .then(function (res) {
    if (res.status == 200) {
      console.log(11)
      return
    }
    console.log(222)
  })

短/长轮询 #

短轮询 #

定义：其实就是普通的轮询。指在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。

应用场景：传统的web通信模式。后台处理数据，需要一定时间，前端想要知道后端的处理结果，就要不定时的向后端发出请求以获得最新情况。

优点：前后端程序编写比较容易。

缺点：请求中有大半是无用，难于维护，浪费带宽和服务器资源；响应的结果没有顺序（因为是异步请求，当发送的请求没有返回结果的时候，后面的请求又被发送。而此时如果后面的请求比前面的请 求要先返回结果，那么当前面的请求返回结果数据时已经是过时无效的数据了）。 实例：适于小型应用。

前端实现：

var xhr = new XMLHttpRequest();    
  setInterval(function(){        
    xhr.open('GET','/user');        
    xhr.onreadystatechange = function(){  
      ajax()    
     };       
    xhr.send();    
  },1000)

var xhr = new XMLHttpRequest();    
  setInterval(function(){        
    xhr.open('GET','/user');        
    xhr.onreadystatechange = function(){  
      ajax()    
     };       
    xhr.send();    
  },1000)

长轮询 #

定义：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

优点：在无消息的情况下不会频繁的请求，耗费资源小。

缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。

实例：WebQQ、Hi网页版、Facebook IM。

前端实现：

function ajax(){        
   var xhr = new XMLHttpRequest();
   xhr.open('GET','/user');        
   xhr.onreadystatechange = function(){              
   ajax();        
   };        
   xhr.send();    
}

function ajax(){        
   var xhr = new XMLHttpRequest();
   xhr.open('GET','/user');        
   xhr.onreadystatechange = function(){              
   ajax();        
   };        
   xhr.send();    
}