Ajax封装(jQuery风格)

• AJAX原理：

ajax利用XMLHttprequest()方法创建一个对象，之后利用open()方法进行请求属性得设置，通过onReadystateChange()方法中redystate()的属性值及status的状态码判断请求是否成功，之后同归responseText获取响应内容，send()方法进行请求，非get方式请求send可传参

• open方法

open方法的三个参数

• method:请求方式，默认：'get'
• url:请求路径
• async:同/异步,默认'true'异步

• readystate属性值

五个值

• 0: 未初始化，open未调用
• 1:启动，open方法调用，send未调用
• 2 发送，send调用，未收到响应
• 3:接收，收到response响应
• 4:完成，接收到全部可调用数据

• status

• 成功：200<=status<300
• 失败

• Ajax封装(JQ版本）

let ajax=({
  url,
  method:'get',//默认"get"
  data:{}，
  header，
  async:'true',//默认‘true’
  success,
  fail
})=>{
    let get_method_url=method==='get'?this.add_url(url,data):url;//method为get时，需要url与data数据拼接,非get无需拼接，直接在send中传参即可
    let send_data=method==='get'?'null':data;//当非get请求方式时把data赋给一个变量 
 /*
  * 封装url和data拼接方法：
  *  当method为get时，并且data也有值，
  *  则url和get需要拼接一下，非若get方式或param为则无需拼接
  **/
    let add_url=(url,param)=>{//拼接url和data
      if(param&&Object.keys(param).length){
         url+=(url.indexOf('?')==-1?'?':'&');
           Object.keys(param).map((key)=>{
              url+=key+'='+param[key]
          })
      }
        return url  
    }
  /**
   *ajax请求
   **/
  let xhr=new XMLHttpRequest();//创建XMLHttpRequest对象
  xhr.open(method,get_method_url,async)
  if(header&&Object.keys(header).lenght){//判断header是否存在
    Object.keys(header).map(key=>{
      xhr.setRequestHeader(key,header[key])//设置header
    })
  }
  xhr.onReadystateChange=()=>{
      if(xhr.readystate===4&&/^2\d{2}/.text(xhr.status)){
          let response_data=xhr.responseText;
           success(response_data)
      }else{
           let res=xhr.status+xhr.statusText
          fail(res)
      }
  }
  xhr.send(send_data)
 }