Ajax基础详解

AJAX简介：

AJAX是一种前后端交互的技术，通过AJAX能够使用js向服务端发送携带或不携带信息的请求，返回的响应体中会有服务端根据发送的请求报文处理后的结果，这些结果在在前端使用。

AJAX全名：

async javascript and XML(异步JavaScript和XML)

- 什么是同步请求？(false)

定义：发送一个请求后，必须等待该请求的响应返回，才能继续发送下一个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。客户端向服务器端发送请求，必须等待结果返回，才能向服务器端发送下一次请求。
优点：
简单直观
结果即时可见
缺点：
在网络延迟或处理时间长时效率低下
占用较多系统资源

也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

- 什么是异步请求？(默认:true)

定义：发送请求后，无需等待响应即可继续执行其他任务。响应通过回调函数、事件监听等方式处理。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。客户端向服务器端发送请求，必须等待结果返回，才能向服务器端发送下一次请求。

说明：异步交互就是第二次请求不需要等待第一次请求结束之后就可以开始。

优点：
支持高效并发处理
提高资源利用率
提升用户体验，减少等待时间
缺点：
实现相对复杂
错误处理较为困难
增加开发和维护成本

默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，

Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
原文链接：https://blog.csdn.net/m0_63031773/article/details/144769652

AJAX的使用：

对于纯新手来说刚开始学习AJAX可能不太理解，但使用后再看相关的技术讲解就简单许多，下面直接开始简单使用的教程(原生js中的ajax__原生js就是啥也没加的原版js)：

需要掌握的基本知识：

HTML、CSS、JS、JSON(知道JSON字符串的格式和两个方法就可以了)

AJAX对象的创建：

在 js 中有内置的构造函数来创建 ajax 对象
创建 ajax 对象以后，我们就使⽤ ajax 对象的方法去发送请求和接受响应
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
创建的格式：

AJAX对象具有的方法：

这些方法可以用来配置请求报文所包含的信息，使用时要根据服务端要求和发送数据的要求来定。

AJAX对象属性：

这些属性主要用来设置接收响应时对响应的判断，处理响应报文。

AJAX使用流程：

1.使用open方法建立对服务端的调用：

参数：1、请求方法,包含：get delete put post 等，get 和post较为常用，使用时要根据接口的要求来定使用哪种请求方式。

2、请求路径，可以位绝对路径，也可以位相对路径，也是根据需求来定。

举例：如果请求是要发送给一个服务端接口，那么url就是接口的地址。

注意：对于get请求来说，url路径如果要发送给服务端一个或多个key:value键值对(即传递的信息，如name:"张三")，是直接拼接到url后面，用?隔开，各个键值对之间用&隔开

例如：

3、是否异步，默认位true(异步)。

2.发送请求：

参数：1、对于get请求来说不设置参数

2、对于post请求来说是写要传递的信息

javascript">var add_JSON = JSON.stringify({
                "name": name,
                "description": description,
                "type": "note"
            });
            console.log(add_JSON);
            xhr_add.open("post", "url", true);
            xhr_add.setRequestHeader('Content-Type', 'application/json');
            xhr_add.setRequestHeader('Authorization', `Bearer ${token}`);
            xhr_add.send(add_JSON);

传进send的参数就是add_JSON；

3.请求头设置：

对于不同的需求来说，请求头的设置各为不同

如上面的 xhr_add.setRequestHeader('Content-Type', 'application/json');是设置发送请求的信息类型为JSON类型 ;xhr_add.setRequestHeader('Authorization', `Bearer ${token}`);是设置token

get一般不设置请求头，如有需要就设置

4.响应体处理：

欲想处理响应，先知道如下三个东西：

1、onreadystatechange() //ajax对象的一个事件，当state改变时触发

2、readystate //ajax对象的一个属性,记录的是请求的状态：

                 readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行
                 readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后
                 readyState === 2 : 表示 send 方法已经执行完成
                 readyState === 3 : 表示正在解析响应内容
                 readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

3、status //ajax对象的一个属性，记录http状态码：

                1xx - 信息提示

                2xx - 成功

                3xx - 重定向

                4xx - 客户端错误
使用如下：
javascript">xhr_add.onreadystatechange = function () {
      try {
          if (xhr_add.readyState === 4) {
              var response = JSON.parse(xhr_add.responseText);
              if (xhr_add.status >= 200 && xhr_add.status < 300) {
                       处理    
              } else if (xhr_add.status === 400) {
                       处理  
              }
          }
      } catch (error) {
             处理
      }
};