ajax的原理：（原生ajax）

AJAX全称(Async Javascript and XML) 即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页.
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象

const xhr = new XMLHttpRequest()

通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接

  xhr.open(method, url, [async][, user][, password])

• method：表示当前的请求方式，常见的有获取GET、添加POST、修改PUT
• url：服务端地址
• async：布尔值，表示是否异步执行操作，默认为true
• user: 可选的用户名用于认证用途；默认为`null
• password: 可选的密码用于认证用途，默认为`null

通过 XMLHttpRequest 对象的 send() 方法，将客户端页面的数据发送给服务端

 xhr.send([body])
 /*如果使用GET请求发送数据的时候，需要注意如下：
    将请求数据添加到open()方法中的url地址中
    发送请求数据中的send()方法中参数设置为null*/

绑定onreadystatechange 事件用于监听服务器端的通信状态，主要监听的属性为XMLHttpRequest.readyState
原生简单ajax

<script>
  //封装一个ajax请求
  function ajax(options) {
    //创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest()

    //初始化参数的内容
    options = options || {}
    options.type = (options.type || 'GET').toUpperCase()
    options.dataType = options.dataType || 'json'
    const 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.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        let status = xhr.status
        if (status >= 200 && status < 300) {
          options.success && options.success(xhr.responseText, xhr.responseXML)
        } else {
          options.fail && options.fail(status)
        }
      }
    }
  }
</script>