AJAX（二）

AJAX的所有功能

---

• 客户端的JS发起请求(浏览器上)
• 服务端的JS发送响应(node.js上)
• JS可以设置任意请求header
  • 设置请求的第一部分 request.open('get','/xxx')
  • 设置请求的第二部分 request.setHeader('content-type,'x-www-form-urlencoded')
  • 设置请求的第四部分 request.send('a=1&b=2')
• JS可以获取任意响应header
  • 获取响应的第一部分 request.staus/request.statusText
  • 获取响应的第二部分 request.getResponseHeader()/request.getAllResponseHeaders()
  • 获取响应的第四部分 request.responseText

原生JS实现AJAX

---

myButton.addEventListener('click', (e)=>{
  let request = new XMLHttpRequest()
  request.open('post', '/xxx') // 设置请求头
  request.setRequestHeader('frank','18')  // 设置请求的第二部分
  request.setRequestHeader('Content-Type','x-www-form-urlencoded')  // 设置请求的第二部分
  request.send('我偏要设置request第四部分')//  设置请求第四部分
  request.onreadystatechange = ()=>{
    if(request.readyState === 4){
      console.log('请求响应都完毕了')
      console.log(request.status)
      console.log(request.statusText)
      if(request.status >= 200 && request.status < 300){
        console.log('说明请求成功')
        console.log(request.responseText)
        let string = request.responseText
        let object = window.JSON.parse(string)  // 把符合 JSON 语法的字符串string转换成 JS 对应的值object
        // JSON.parse 是浏览器提供的
      }else if(request.status >= 400){
        console.log('说明请求失败') 
      }

    }
  }
})

复制代码

自己封装一个jQuery.ajax

---

window.jQuery.ajax = function({url,method,body,successFn,failFn,headers}){ // ES6解构赋值
  let request = new XMLHttpRequest()
  request.open(method,url) //设置请求的第一部分
  for(let key in headers){  // 设置请求的第二部分
    let value = headers[key]
    request.setRequestHeader(key,value)
  }
  request.onreadystatechange = ()=>{ //处理请求的结果
    if(request.readyState === 4){
      if(request.status >= 200 && request.status < 300){
        successFn.call(undefined,request.responseText) // 如果返回的状态码为200~300之间，执行函数successFn
      }else if(request.status >= 400){
        failFn.call(undefined,request) //如果返回的状态码大于400,执行函数failFn
      }
    }
  }
  request.send(body)// 设置请求的第四部分
}
复制代码

使用它

myButton.addEventListener('click',(e)=>{
  window.jQuery.ajax({
    url: '/xxx', //设置请求第一部分路径
    method: 'get', // 设置请求第一部分动词
    headers: {
      'content-type': 'application/x-www-form-urlencoded',
      'frank': '18'
    }, // 设置请求第二部分
    successFn: (x)=>{
      console.log(x)
    }, // 设置成功回调函数
    failFn: (x)=>{
      console.log(x)
      console.log(x.status)
      console.log(x.responseText)
    } // 设置失败回调函数
  })
})
复制代码