js基础知识——ajax相关知识

一、实现一个ajax请求

    // 1.创建一个ajax对象
        const xhr = new XMLHttpRequest()

    // 2.配置ajax对象  xhr.open('请求方式','请求地址','一个布尔值')
        xhr.open('get','http://localhost:8888/test/first',true)

    // 3.发送请求
        xhr.send()

    // 4.接受响应
        xhr.onload = function(){
          // console.log('现在后端已经给我们返回了 我们想要的数据');
          console.log(xhr.responseText);
    }

二、ajax的异步问题

• ajax是否为异步为第二部配置问题的第三个参数决定的，也就是那个布尔值

  • 默认为true 代表开启异步，若传递的是false代表关闭异步开启同步

• 同步和异步的差别：

  1. 创建一个ajax对象 （同步代码）
  2. 配置对象 （同步代码，但第三个参数决定了下一步是否为异步）
  3. 发送请求 (根据上一步的配置，才能看出是否为异步)
  4. 接受响应 (同步代码)

• 如果传递的是true 或者没有传递，那么为异步，此时的运行流程（1234/1243 都行）

  1. 创建一个对象
  2. 配置对象
  3. 发送请求
  4. 接收响应
  5. 响应完成

• 如果传递的是false 那么为同步，此时的运行流程：(不能正常执行，需要将3 4 步骤 反过来)

  1. 创建一个对象
  2. 配置对象
  3. 发送一个请求，等待请求完成后，开始执行后面的代码
  4. 接收响应(前面三步已经把这个请求完全的运行结束了，所以此时不能再触发这个函数)

• 如果传递的是false 那么为同步，此时的运行流程：(可以正常执行)

  1. 创建一个对象
  2. 配置对象
  3. 接收响应，等待请求完成后的时候，会触发
  4. 发送一个请求，等待请求完成后，开始执行后面的代码

  所以在开发时，为了方便起见，一般书写都为1243    
  

    // 1.创建一个ajax对象
    const xhr = new XMLHttpRequest()

    // 2.配置ajax对象  xhr.open('请求方式','请求地址','一个布尔值')
    xhr.open('get','http://localhost:8888/test/first',false)

    // 4.接受响应
    xhr.onload = function(){
      // console.log('现在后端已经给我们返回了 我们想要的数据');
      console.log(xhr.responseText);
    }

    // 3.发送请求
    xhr.send() 

三、ajax的状态码

• 通过一个数字，表明ajax当前运行到哪一步

  0.表示ajax创建成功
  1.表示当前ajax 配置成功
  2.表示当前 ajax 发送成功
  3.表示当前浏览器正在解析服务端返回给我们的内容
      如果返回的内容少这一步基本能接受完
      如果返回的内容很多 这一步是接受不完整的
  4.表明浏览器已经把服务端返回的内容 全部都解析完毕
  

  //  1.创建一个ajax对象
      const xhr = new XMLHttpRequest()
      console.log(xhr.readyState); //0

  // 2.配置ajax对象
      xhr.open('get','http://localhost:8888/test/first')
      console.log(xhr.readyState);  //1
  // 4.配置接收响应的函数
      xhr.onload = function(){
        console.log(xhr.responseText);
      }
  // 3.发送请求
      xhr.send()
      // console.log(xhr.readyState);

      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 2) {
      //     console.log('当前请求发送成功');
      //   } else if (xhr.readyState === 3) {
      //     console.log('浏览器正在解析返回的数据，可能没完成',xhr.responseText);
      //   } else if (xhr.readyState === 4) {
      //     console.log('当前浏览器已经完全解析完毕，返回的数据',xhr.responseText);
      //   }
      // }