ajax的使用和注意事项

ajax

1-async javascript and xml(异步请求代码)是js和后端的交互手段
2-有点:可局部刷新,无需更新整个页面
3-面向对象开发
4语法:
1 创建一个ajax对象,可进行前后端交互
let xhr = new XMLHttpRequest()
2 配置请求信息
xhr.open(请求方式,请求地址,是否异步)默认是异步true
3 发送
xhr.send()
4 配置一个接收返回信息的事件
xhr.onload = function() { }
执行时机:在本次ajax请求,后端返回的信息到达浏览器后执行
拿到后端返回的信息:
ajax对象xhr的responseText属性存储后端返回的信息
4.1接收后端返回的信息如何才算接收成功
① 请求响应的状态码(status)为200的时候;
② ajax状态码(readyState)为4
readyState == 0 (ajax对象已创建)
readyState == 1 (open调用完毕)
readyState == 2 (send调用完毕)
readyState == 3 (已接收后端的信息,正在解析中)
readyState == 4 (已接收后端的信息,解析完毕)
ajax的onreadystatechange事件在ajax状态码变化的时候触发
xhr.onreadystatechange = function(){
// 当ajax状态码为4且请求响应状态码为200的时候,可使用后台信息
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText)
}

      //  1 创建一个ajax对象,可进行前后端交互
      let xhr = new XMLHttpRequest()
      // 2 配置请求信息
      xhr.open('get','http://localhost:8888/test/first')
      // 3 发送
      xhr.send()
      // 4 配置一个接收返回信息的事件(onload这种方式不适用低版本ie)
      // xhr.onload = function(){
      //   console.log(xhr.responseText);
      // }
      // 4.1 使用xhr的onreadystatechange函数
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
          console.log(xhr.responseText);
        }else{
          console.log('failed');
        }
      }