前端校招准备--Ajax原理及其实现

前言

 咱们在请求数据的时候，每每会使用到ajax，并且通常都是经过引入jQuery库，再使用。可是，若是咱们想直接使用ajax怎么办呢，这个时候就能够本身写一个ajax，刚一听可能会以为很难，可是看完个人文章后你确定就会以为原来这么简单~

正文

Ajax介绍

 想象一个场景，你在淘宝上看中一件物品，想加入购物车，可是呢，你点击添加购物车后，整个页面刷新了，你以前看的物品记录也没有了，这样是否是很烦（这是由于没有使用ajax更新数据时，会请求整个页面的数据，从新渲染）。

 碰到这种状况，ajax就出场了，有了它，咱们能够在点击添加商品后，只更新购物车中的物品数量就能够了，根本就不须要更新整个页面，用官方一点的话来讲，就是能够控制网页的局部刷新。

 ajax实现局部刷新的原理是经过XmlHttpRequest对象来向服务器发送异步请求，经过js操做相应的DOM来更新页面。

Ajax实现过程

 ajax实现异步请求的过程能够分为如下几个步骤：

1. 建立XmlHttpRequest对象
2. 初始化参数
3. 发送信息
4. 接收信息

 从上面的介绍能够看出，ajax请求的核心在于XmlHttpRequest对象,因此了解了XmlHttpRequest的机制就至关于知道了ajax的执行过程。

 在Chrome,Firefox,Opera,Safari以及IE7+都内建了XmlHttpRequest对象，可是IE5和IE6是使用ActiveX对象。

 方法：

• abort(): 取消如今的链接，能够将XmlHttpRequest对象的状态值重置为0
• open(): 初始化http的请求参数，可是不发送请求
• send(): 发送http请求
• setRequestHeader()：给一个打开可是未发送的请求设置参数

 属性：

• onreadystateChange: 状态改变触发的回调函数
• reposeText: 从服务器返回数据的字符串格式
• reposeXML: 从服务器返回兼容DOM的文档数据对象
• status: 从服务器返回的状态码
• statusText: 伴随状态码返回的信息，如status=200时，statusText='OK'

• readyState: 对象状态值

  0表示XmlHttpRequest对象已建立或者已经被abort()方法重置
    1表示对象已经初始化，可是请求还未发送（调用了open()方法，send()方法尚未调用）
    2表示请求已经发送，没有接收到响应信息（sed()方法已经被调用）
    3表示已经接收到了全部的响应头，响应体开始接收但未完成
    4表示响应信息已经所有接收

问题: http状态码（status）和对象的状态值(readyState)有什么区别？

回答：http状态码是指服务器接收到请求后返回的一个状态码，其中比较常见的是200（请求成功），404（请求失败），500（服务器发生错误），更多参考这里；而对象状态值，是针对XmlHttpRequest对象的，前面已经解释了每一个状态值表明的含义；它们俩之间的联系就是只有当请求过程所有完成后，才能够根据服务器返回的状态码调用不一样的函数。

Ajax请求过程的代码实现

//封装一个ajax请求
    function ajax(options){
      //建立XMLHttpRequest对象
      if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest
      }else{
        var xhr = new ActiveXObject()
      }

      //初始化参数的内容
      options = options ||{}
      options.type = (options.type ||'GET').toUpperCase()
      options.dataType = options.dataType || 'json'
      var params = options.data

      //发送请求
      if(options.type == 'GET'){
        xhr.open('GET',options.url + '?' + params,true)
        xhr.send(null)
      }else if(options.type == 'POST'){
        xhr.open('POST',options.url,true)
        xhr.send(params)
        // xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded")//规定输出为键值对的形式
      }

      //接收请求
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          var status = xhr.status
          if (status >= 200 && status < 300){
            options.success && options.success(xhr.responseText,xhr.responseXML)
          }else{
            options.fail &&options.fail(status)
          }
        }
      }  
    }

    ajax({
      type: 'post',
      dataType: 'json',
      data: {},
      url: 'https://www.easy-mock.com/mock/5bbd92e0004caf3b6a68db6f/example/api/countEventsLevel',
      success: function(text,xml){//请求成功后的回调函数
        console.log(text)
      },
      fail: function(status){////请求失败后的回调函数
        console.log(status)
      }
    })

总结

 其实与ajax请求相关的知识点不少，好比它的核心XmlHttpRequest对象，跨域问题等。因为本文中的重点在于手动实现ajax请求，因此这些内容暂时先不涉及，不过我会在文后将参考连接奉上，感兴趣的能够看看。

参考文章

同源策略及其规避方法
XmlHttpRequest详解
ajax技术原理