原生ajax

1、什么是ajax

　　ajax是Asynchronous Java and XML的缩写，是一种异步请求数据的web开发技术，在不需要重新刷新页面的情况下，ajax通过异步请求加载后台数据，并在网页上呈现出来

2、ajax使用场景

　　异步请求：登录、列表页、详情页、搜索下拉框……页面中涉及到数据的都用到ajax去请求后端数据

3、ajax原理

　　①浏览器让xhr去服务器要点儿数据

　　②浏览器接着干别的事

　　③xhr去服务器请求数据

　　④服务器放回数据给xhr

　　⑤xhr通知浏览器数据拿回来了

　　⑥浏览器就收到xhr请求的数据渲染页面，整个过程中页面在没有刷新的情况下完成

4、readyState状态码和status状态码

　　readyState：返回当前文档的载入状态

　　　　0：未初始化，还没有调用 send() 方法

　　　　1：载入，已调用 send() 方法，正在发送请求

　　　　2：载入完成，send() 方法执行完成，已经接收到全部响应内容

　　　　3：交互，正在解析响应内容

　　　　4：完成，响应内容解析完成，可以在客户端调用了

　　

　　status：http状态码

　　　　1xx：信息性状态码，表示接收的请求正在处理

　　　　2xx：成功状态码，表示请求正常处理

　　　　3xx：重定向状态码，表示需要附加操作来完成请求

　　　　4xx：客户端错误状态码，表示服务器无法处理请求

　　　　5xx：服务器错误状态码，表示服务器处理请求出错

5、get和post传参

    // get请求时参数接在地址栏后面
    let xhr=new XMLHttpRequest()
    xhr.open('GET','http://xxxxx/list?page=5')
    xhr.send()
    // post请求时参数在send()中传递
    let xhr=new XMLHttpRequest()
    xhr.open('POST','http://xxxxx/list')
    xhr.send('page=5&pageSize=10')

6、原生js封装ajax

    function ajax(options) {
      options = options || {}  // 调用函数时如果options没有指定，就给它赋值{},一个空的Object
      options.type = (options.type || 'GET').toUpperCase() // 请求格式GET、POST，默认为GET
      options.dataType = options.dataType || 'json' // 响应数据格式，默认json
      var params = formatParams(options.data) // options.data请求的数据
      var xhr
      //考虑兼容性
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else if (window.ActiveObject) {//兼容IE6以下版本
        xhr = new ActiveXobject('Microsoft.XMLHTTP')
      }
      xhr.addEventListener('load', handleFn) // Firefox 支持 load 事件
      xhr.addEventListener('readystatechange', handleFn) // IE 支持 readystatechange 事件
      //启动并发送一个请求
      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.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') // Content-type数据请求的格式
        xhr.send(params)
      }
      // 设置有效时间
      setTimeout(function () {
        if (xhr.readySate != 4) {
          xhr.abort()
        }
      }, options.timeout)
      // 接收
      function handleFn() {
        if (xhr.readyState == 4) {
          var status = xhr.status
          if (status >= 200 && status < 300 || status == 304) {
            options.success && options.success(xhr.responseText, xhr.responseXML) // options.success成功之后的回调函数    xhr.responseText,xhr.responseXML  获得字符串形式的响应数据或者XML形式的响应数据
          } else {
            options.error && options.error(status) // options.error失败后的回调函数
          }
        }
      }
    }

    //格式化请求参数
    function formatParams(data) {
      var arr = []
      for (var name in data) {
        arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]))
      }
      arr.push(('v=' + Math.random()).replace('.', ''))
      return arr.join('&')
    }

使用：

    ajax({
      url: 'https://api.apiopen.top/getJoke',
      type: 'get',
      data: {
        // username:'username',
        // password:'password'
      },
      dataType: 'json',
      timeout: 5000,
      // contentType: 'application/json',
      success: function (data) {
        console.log(data)
      },
      error: function (e) {
        console.error(e)
      }
    })

 

7、promise封装简易版ajax

      function ajax(url) {
        const promise = new Promise((res, rej) => {
          const xhr = new XMLHttpRequest()
          xhr.open('get', url, true) // true表示为异步请求
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                res(JSON.parse(xhr.responseText))
              } else {
                rej(new Error('请求失败'))
              }
            }
          }
          xhr.send(null)
        })
        return promise
      }

　　使用：

　　　　同目录下新建data.json

{
  "name": "xx",
  "age": 18
}

　　　　调用函数，then方法中接收

      const url = './data.json'
      ajax(url).then((data) => {
        console.log(data)
      })

 　　　　使用async/await

      const fn = async () => {
        const url = 'https://api.apiopen.top/getJoke'
        const { code, message, result } = await ajax(url)
        console.log(code, message, result)
      }
      fn()