Ajax概念、状态码、请求四部曲和请求方式

💻 🏠专栏：Ajax
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

Ajax 概念、状态码、请求四部曲和请求方式

一. 概念

AJAX （ Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

注：前后端交互只能使用字符串

AJAX 的优势

1. 不需要插件的支持，原生 js 就可以使用。
2. 用户体验好（不需要刷新页面就可以更新数据）。
3. 减轻服务端和带宽的负担。

最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

缺点： 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到。

二. Ajax 请求的步骤

Ajax 四部曲与后端进行交互：

1. 创建XMLHttpRequest实例对象;
2. 配置请求信息，使用open方法与服务器建立链接;
3. 向服务器发送数据，进行解析;
4. 在回调函数中针对不同的响应状态进行处理;

1. 创建XMLHttpRequest对象

const xhr = new XMLHttpRequest();
console.log(xhr); // XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}

2. 配置请求信息，使用open方法与服务器建立链接

语法：

xhr.open(method, url, async);

• 第一个参数：请求方式（get、post、put、delete…）常用的是get和post

• 第二个参数：请求地址

• 第三个参数：是否异步（true:异步（默认），false:同步）

  XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true

// eg:
xhr.open('GET', 'http://localhost:8888/test/first', true);

3. 向服务器发送数据，进行解析

xhr.send();

4. 在回调函数中针对不同的响应状态进行处理

xhr.onload = function(){} // onload页面加载完成，相当于AJAX的状态码：readState === 4时

XMLHttpRequest.responseText： 在一个请求被发送后，从服务器端返回文本。

readystatechange事件：当就绪状态码发生改变时触发

xhr.onreadystatechange = function () {
    if (xhr.readyState === 1){
        console.log(xhr.responseText)
    }
    else if (xhr.readyState === 2) {
        console.log(xhr.responseText)
    }
    else if (xhr.readyState === 3) {
        console.log(xhr.responseText)
    }
    else if (xhr.readyState === 4) {
        console.log(xhr.responseText)
    }
}

三. Ajax 状态码

语法：xhr.readyState：就绪状态码，通过数字表达解析过程是否完成。

• readyState === 0：请求未初始化

  也就是XMLHttpRequest对象创建成功，但open()方法还没有执行

• readyState === 1：配置本次请求信息成功

  也就是服务器连接已建立(已调用open方法，但还未调用send)

• readyState === 2：请求已接收(已调用send方法)

  也就是请求已经成功，响应数据还没有解析好

• readyState === 3：请求处理中(请求已到达服务端，正在处理)

  也就是浏览器正在解析本次响应，还没有完成

• readyState === 4：请求已完成，且响应已就绪

  也就是浏览器解析响应完成，可以使用responseText（可以在客户端使用了）

注：readyState === 2\3\4 都可以认为是请求成功

四. Ajax 请求方式

(1) 常见的请求方式

• GET 偏向于获取的语义
• POST 偏向于发送的语义
• PUT 偏向于提交的语义（提交保存）
• PATCH 偏向于提交的语义（提交修改）
• DELETE 偏向于删除的语义
• HEAD 偏向于获取响应头信息
• OPTIONS 偏向于获取服务器的信息
• CONNECT 保留方式
• …

最常见的请求方式：

• GET
• POST

(2) GET和POST区别

1. 携带参数的位置

   get：直接写地址栏后面

   post：在请求体中书写

2. 携带参数的大小

   get：2kb左右

   post：原则上没有大小限制，服务器可以限制

3. 携带参数的格式

   get：只允许携带查询字符串格式

   post：原则上不限制格式，但是要在请求报文（content-type）中约定

4. 安全

   get：明文发送，相对不安全

   post：暗文发送，相对安全

五. 同步和异步

javascript是单线程的，只有一个主线程，一次只能执行一个任务，同步和异步指的就是在线程上面执行代码的顺序。

1. 同步：阻塞模式，后一个任务必须等到前一个任务完成才执行，顺序执行，主线程上面的任务。
2. 异步：非阻塞模式，异步任务先进入队列等候，等到主线程上面的任务完成，才被通知执行。定时器就是异步的。

Ajax的异步操作

准确的说：定时器异步指的是定时器里面的回调函数。

console.log(1); //同步
let xhr = new XMLHttpRequest();
console.log(2); //同步
xhr.open('get', 'http://localhost:8888/goods/list', true);
console.log(3); //同步
xhr.send();
console.log(4); //同步
xhr.onload = function () { //异步
    console.log(5);
    if (xhr.readyState === 4) {
        // console.log(xhr.responseText);
        console.log(6);
    }
};
console.log(7); //同步
// 上述的代码依次输出的结果为：1 2 3 4 7 5 6
// 上面的代码证明ajax监听事情是异步的，第四步是异步的。

所以在平时使用时经常将第三步和第四步进行位置的调换：

// eg:
let xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:8888/goods/list', true);
xhr.onload = function() { //异步,最后
    if (xhr.readyState === 4) {
        console.log(xhr.responseText);
    }
};
xhr.send();

这样交换之后就可以不用判断请求是异步还是同步了。

六. 案例测试

接口文档：

2.1 测试请求1
  2.1.1 请求地址
  > `/test/first`
  2.1.2 请求方式
  > `get`
  2.1.3 携带参数
  > 无
  2.1.4 响应数据
  > 哇塞, 你已经成功使用 ajax 发送给我了一个请求, 这是我给你的回应, 我是一个字符串类型 ^_^ !

// eg:
const xhr = new XMLHttpRequest();
xhr.open('GET', "http://localhost:8888/test/first", true);
console.log(xhr.readyState);
xhr.onreadystatechange = function () {
    console.log('状态码', xhr.readyState);
    if (xhr.readyState === 2) {
        console.log(xhr.responseText);
    }
    else if (xhr.readyState === 3) {
        console.log(xhr.responseText);
    }
    else if (xhr.readyState === 4) {
        console.log(xhr.responseText);
    }
}
xhr.send(); // 哇塞, 你已经成功使用 ajax 发送给我了一个请求, 这是我给你的回应, 我是一个字符串类型 ^_^ !
// }

七. 案例中本地服务器分享

上述的案例中需启动这个分享的本地服务器，才能得到相应的结果。并且在之后的Ajax案例分享中也会使用到这个服务器。

下载链接：本地服务器文件下载

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪