(二十一) Ajax

1. Ajax的核心技术是 XMLHttpRequest ( XHR) ，Ajax 无需刷新页面就可以从服务器取得数据

2. 手写ajax

<script>
    // 手写Ajax 没兼容ie
    function createXHR () {
      if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest() // 创建XHR
        // open 第一个参数 请求方式 第二个参数 接口名
        xhr.open('get', 'https://jz-amp.daojia-inc.com/mock/789/clean/seller/order/myList') // 启动准备
        // send 方法发送请求，并接受一个可选参数
        // 当请求方式为 post 时，可以将请求体的参数传入 id=12&test=1 类型这种
        // 当请求方式为 get 时，可以不传或传入 null, 参数拼接在地址栏上
        // 不管是 get 还是 post，参数都需要通过 encodeURIComponent 编码后拼接
        xhr.send(null)
        // 设置超时时间 超时时间单位为毫秒
        xhr.timeout = 1000
        // 当请求超时时，会触发 ontimeout 方法
        xhr.ontimeout = () => console.log('请求超时')
        // 监听请求结果 readyState 作为监听标准
        // 0: 未调用open()方法 未初始化
        // 1: 已初始化open 但未发送 未send()
        // 2: 已发送 还未响应 
        // 3: 接受到部分响应数据
        // 4: 接受全部响应数据 响应完成
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) { // 响应完成 并且状态为200
              console.log(xhr.responseText) // 返回结果 responseText 里
            } else {
              console.log('error,status is : ', xhr.status)
            }
          }
        }
      }
    }
    createXHR()
  </script>

下面封装一个简易版的ajax 结合Promise~

<script>
    // 手写Ajax 没兼容ie
    function ajax (object) {
      if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest()
        const methods = object.methods.toLocaleLowerCase() || 'get'
        var url = object.url
        if (typeof url !== 'string') {
          throw new Error('接口地址格式不正确')
        }
        const data = object.params || null
        // encodeURIComponent 参数 并拼接好
        var encodeParams = [];
        if (data instanceof Object) {
          for (key in data) {
            encodeParams.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
          }
          var encodeParamsString = encodeParams.join('&')
        }
        // 如果get 请求 参数拼接地址栏
        if (methods === 'get') {
          if (url.indexOf('?') > -1) {
            url += '&' + encodeParamsString
          } else {
            url += '?' + encodeParamsString
          }
        }
        xhr.open(methods, url)
        // 如果是 post 参数通过send(test=1&id=2) 传递
        if (methods === 'post') {
          xhr.send(encodeParamsString)
        } else {
          xhr.send()
        }
        xhr.timeout = object.timeout || 1000
        xhr.ontimeout = () => {
          throw new Error('请求超时')
        }
        return new Promise ((resolve, reject) => {
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText))
              } else {
                reject('error,status is : ', xhr.status)
              }
            }
          }
        })
      } else {
        throw new Error('当前浏览器不支持ajax')
      }
    }
    // 使用
    ajax({
      methods: 'post',
      url: 'https://jz-amp.daojia-inc.com/mock/789/clean/seller/order/myList',
      params: {
        test: 1,
        id: 2,
        name: '在'
      }
    }).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  </script>

get ： 

post: 

 

打印台返回值：