ajax：实现前端向后端发请求接收数据的过程、前后端交互

• ajax ：async JavaScript and xml
• async：异步
• xml：闭合标签

1、向后端发起请求的步骤：

（1）向后端发起请求，第一步：创建一个XMLHttpRequest构造函数，

//向后端发请求
//1.创建对象XHR 用new创建，new XMLHttpRequest
let xhr = new XMLHttpRequest()//具体实现ajax的一个构造函数，方法
console.log(xhr)

结果：

• 结果返回一个XMLHttpRequest对象，对象里面有很多方法；

（2）配置 ：open（）方法

• open（请求方式、请求地址、是否异步）
• 请求方式分为：GET、POST等
• GET方式：是用来从服务器上获取数据；
• POST方式：是用来向服务器传递数据，是携带数据信息的；
• 请求地址：这里我们以向后端获取1.txt文件为例，下面是1.txt文件地址获取方式；
• 是否异步：不写就是异步；

1.txt文件地址获取方式：

因为txt文件不能通过VScode在浏览器直接打开，但是同一个文件夹下的ajax.html文件可以打开，所以我们可以先将ajax.html打开，然后发现这个地址后面就是ajax：文件夹名，ajax.html：文件名，因为1.txt文件和ajax.html在同一个目录下，所以我们直接将地址后面的ajax.html换成1.txt，然后按回车，就打开了。图示如下：

1.txt和ajax.html在同一个目录下：ajax目录

ajax.html的地址：

将ajax.html更改为1.txt后，1.txt文件的地址： 

//2.配置 open(请求方式、请求地址、是否异步)
xhr.open("GET","http://127.0.0.1:5500/ajax/1.txt")

• 地址解释：
• 地址===http协议+域名+端口号+详细地址；
• http：传输数据要遵循的协议，还有：https：是数据加密协议；
• 127.0.0.1：指的是本机的ip地址，因为地址有时候可能记不住，所以我们可以用localhost代替；
• localhost：指的是本机域名；
• 5500：端口号；

另外的表示方法：

//2.配置 open(请求方式、请求地址、是否异步)
xhr.open("GET","http://localhost:5500/ajax/1.txt")

✍​​​​​​​ 请求地址也是可以“传参的”： 

比如地址：http://localhost:3000/user

地址内容是：

• 想请求里面的第一条数据就可以写成：

xhr.open("GET","http://localhost:3000/user?username=hhh")

• 在user后面加上“？”和请求的具体内容； 

（3）发送请求：send（）

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

（4）接收后端发过来的数据，注册一个事件 

【1】事件readystatechange：

//4.接收数据，注册事件
//onreadystatechange事件是只要跟后端接到头了，就会自动执行function函数
xhr.onreadystatechange = function(){
     console.log("111")
}

结果：

• readystatechange事件不用自己手动触发，这个事件是只要跟后端接到头了，它就会自动触发，执行function函数；
• 但是结果发现这个function函数执行了3次，这就跟readystate关键字有关了；
• 下面就介绍一下readystate关键字的作用：

readystate关键字的作用：

• readystate：ajax状态码
• 是用来表示一个ajax请求的全部过程中的某一个状态；
• readystate == 0：表示未初始化完成，也就是open方法还没有执行；
• readystate == 1：表示配置信息已经完成，也就是执行完open之后；
• readystate == 2：表示send方法已经执行完成；
• readystate == 3：表示正在解析相应内容；
• readystate == 4：表示响应内容已经解析完毕，可以在客户端使用了；
• 这个时候我们就会发现，当一个ajax请求的全部过程中，只有当readystate == 4的时候，我们才可以正常使用服务端给我们的数据；

✍ 为什么会打印三次“111”的原因：

xhr.onreadystatechange = function(){
        console.log("111")
        console.log(xhr.readyState)   
    }

结果：

• 我们在输出“111”的后面再输出一下状态码，发现状态码从“readystate == 2” 以后就开始跟后端接上头了，就开始执行function函数，但是到响应内容已经解析完毕，即“readystate == 4”还有两个状态要经过，所以就出现了打印3次“111”的情况。

✍所以如果你不想让它执行3次，可以限制一下条件：

//4.接收数据，注册事件
//onreadystatechange事件是只要跟后端接到头了，就会自动执行function函数
xhr.onreadystatechange = function(){
     // console.log("111")
     // console.log(xhr.readyState)
     //加上一个限制状态的条件即可
     if(xhr.readyState===4){
          console.log("数据解析完成")
      }
  }

• 限制 xhr.readyState===4状态等于4的时候再打印数据；

✍最终，前面都铺垫完了，该拿后端给的数据了：

//4.接收数据，注册事件
//onreadystatechange事件是只要跟后端接到头了，就会自动执行function函数
xhr.onreadystatechange = function(){
    // console.log(xhr.readyState)
    //加上一个限制状态的条件即可
    if(xhr.readyState===4){
         console.log("数据解析完成",xhr.responseText)
      }
  }

结果：

• 接收后端的数据：xhr.responseText

✍如果接收数据异常，该如何处理：

• 但是如果接收数据时异常，xhr.responseText也就是返回了异常值，但是我们不想让异常值返回，想让他跳转的一个异常页面--“404页面”，这就涉及到Status状态码的问题了；
• 下面介绍Status状态码；

Status状态码：

• 一个ajax对象中有一个成员叫做：xhr.status：http状态码；
• http的状态码显示正常的状态码范围：200~299；
• 但一般正常的状态码都是：200；
• 错误的状态码也有很多，但界面加载错误状态码是：404；
• 所以不仅要满足xhr.readyState===4，而且同时要满足信息正确加载：xhr.status===200，当两个条件都满足的时候，才是本次请求正常完成，才能拿到后端数据； 

http状态码显示位置：

代码：

//4.接收数据，注册事件
//onreadystatechange事件是只要跟后端接到头了，就会自动执行function函数
xhr.onreadystatechange = function(){
     // console.log(xhr.readyState)
     //加上一个限制状态的条件即可
     if(xhr.readyState===4 && xhr.status===200){
           console.log("数据解析完成",xhr.responseText)
 
           document.write(xhr.responseText)//在页面上输出接收的信息
      }else if(xhr.readyState===4 && xhr.status===404){
           console.error("没有找到这个页面")
      }
 }

【2】事件load：只有在xhr.readyState===4的时候才会执行：

xhr.onload = function(){
      if(xhr.status===200){
            console.log("数据解析完成",xhr.responseText)
      }else if(xhr.status===404){
            console.error("没有找到这个页面")
      }
  }

• 这个load事件，只有在readystate状态码等于“4”的时候才会执行函数，所以比上面的readystatechange要简单一点；

✍更改json格式：

• 我们最后从后端拿的其实是json文件，那我们把之前的1.txt文本改为1.JSON文件，里面的字符串都是json格式的：

• xhr.responseText从后端给的json文件里拿出来的内容是字符串格式的，我们要把它转化为json格式的数据：JSON.parse()；

JSON.parse(xhr.responseText)

//4.接收数据，注册事件
//onreadystatechange事件是只要跟后端接到头了，就会自动执行function函数
 xhr.onreadystatechange = function(){
    // console.log(xhr.readyState)
    //加上一个限制状态的条件即可
    if(xhr.readyState===4 && xhr.status===200){
        console.log("数据解析完成",JSON.parse(xhr.responseText))
 
        document.write(xhr.responseText)//在页面上输出接收的信息
     }else if(xhr.readyState===4 && xhr.status===404){
         console.error("没有找到这个页面")
     }
}

结果：

最终完整代码：( 前端请求--后端发送数据--前端接收到数据 )