手动封装ajax

原始ajax

写一个ajax就需要5步，也就是5个单词，这就是一个ajax的流程

new

open

setRequestHeader(post)

onreadystatechange

send

const xhr = new XMLHttpRequest()
xhr.open("GET", "/api", true) // 参数: 请求方式，请求地址，是否异步
// 如果是post方法，需要设置请求头
// xhr.setRequestHeader('Content-Type: application/x-www-form-urlencoded; charset = utf8')
xhr.onload = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null) // 如果是post方法，则应该写入要传的信息

xhr.readyState 的各个状态

  • 0 - （未初始化）还没调用send()方法
  • 1 - （载入）已调用send()方法，正在发送请求
  • 2 - （载入完成）send()方法执行完成，已经接受到全部响应内容
  • 3 - （数据传输） 正在解析响应内容
  • 4 - （完成）响应内容解析完成，可以在客户端调用

手动封装ajax

ajax = function (obj) {
  // 设置必要的默认行为
  var o = {
    method: obj.method, // 请求方式 必填
    url: obj.url, // 请求地址 必填
    data: obj.data || {}, // 上送数据 默认为空对象
    async: obj.async || true, // 是否异步 默认为 是
  }
  // 处理get请求的上送数据 将JSON对象转换成字符串的形式
  var _data = ""
  for (key in o.data) {
    _data += "&" + key + "=" + o.data[key]
  }
  // 拼接url
  var _url = o.url + "?_v=" + new Date().getTime() + _data
  // 1.创建对象
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
  // 2.建立连接
  // 3.发送请求
  xhr.open(o.method, _url, o.async)
  if(o.method==="POST" || o.method === "post"){
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded") 
    xhr.send(o.data)
    }else {
    xhr.send(null)
  }
  // 4.接收请求
  xhr.onreadystatechange = function () {
    // 判断状态
    if (xhr.readyState == 4 && xhr.status == 200) {
      var result
      var dataType = xhr.getResponseHeader("content-type") //datetype有三种数据类型响应处理，分别判断
      // 处理返回数据
      if (dataType.indexOf("xml") > -1) {
        result = xhr.responseXML
      } else if (dataType.indexOf("json") > -1) {
        result = JSON.parse(xhr.responseText)
      } else {
        result = xhr.respinseText
      }
      obj.success(result)
      // 用回调函数将数据返回
    }
  }
}


ajax({
  method: "GET", // 设置请求形式
  url: "./json.json", // 接口路径
  data: {}, // 需要上送的对象,不传默认为{}
  success: function (ev) {
    // ev 返回数据
    console.log("新数据：", ev)
  }
})