一、原生 Ajax

  1. var url = "http://192.168.4.18:8000/"
  2. var xhr = new XMLHttpRequest();
  3. xhr.open("get", url, true);
  4. xhr.send();
  5. xhr.onreadystatechange = function () {
  6.   if (xhr.readyState == 4 && xhr.status == 200) {
  7.     var result  = JSON.parse(xhr.responseText);
  8.     console.log(result)
  9.   }
  10. }

二、封装过的Ajax

封装函数

  1. function ajax({
  2.   url,
  3.   method="get",
  4.   success
  5. }) {
  6.   var xhr = new XMLHttpRequest();
  7.   xhr.open(method, url, true);
  8.   xhr.send();
  9.   xhr.onreadystatechange = function () {
  10.     if (xhr.readyState == 4 && xhr.status == 200) {
  11.       var result = JSON.parse(xhr.responseText);
  12.       success(result)
  13.     }
  14.   }
  15. }

调用

  1. ajax({
  2.   url,
  3.   method,
  4.   success:res=>{
  5.     console.log(res)
  6.   }
  7. })

三、jQuery - Ajax

$.ajax({
  url:"http://192.168.4.18:8000/",
  type:"get",
  dataType:"json",
  success:res=>{
    console.log(res)
  }
})

四、封装过的 jQuery - Ajax

封装

function http({url,type="get",success}){
  $.ajax({
    url,
    type,
    dataType:"json",
    success:res=>{
      success(rs)
    }
  })
}

五、promise 封装函数

将纵向嵌套的ajax,变成横向的了,结构稍微清晰了一点。

function http(url){
  return new Promise((resolve,reject)=>{
    $.ajax({
      url,
      type:"get",
      success:res=>{
        resolve(res)
      },
      error:err=>{
        reject(err);
      }
    })
  })
}