前言

Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用于创建快速动态Web页面的技术。它允许在不刷新整个页面的情况下更新部分页面内容，从而提高用户体验和网站的交互性和灵活性。Ajax通过使用JavaScript和XMLHttpRequest对象来实现异步通信。

在传统的Web应用程序中，页面的请求和响应是同步的，这意味着当用户执行某些操作时，整个页面必须重新加载。这会导致页面变慢、响应时间变长，用户体验大大降低。而通过使用Ajax，页面可以在后台向服务器发送请求并接收响应，而不必刷新整个页面，这样就可以实现更快的响应时间和更好的用户体验。

Ajax的核心是XMLHttpRequest对象，该对象允许在不刷新页面的情况下发送HTTP请求和接收响应。通过使用JavaScript，可以使用XMLHttpRequest对象来发送异步请求，并在响应可用时更新页面内容。此外，Ajax还使用了一些其他技术，例如DOM操作、CSS、HTML和JSON等。

ajax的使用

1.AJAX请求的五个步骤

ini 复制代码

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

javascript 复制代码

  let xhr = new XMLHttpRequest()
                xhr.open('GET', 'http://192.168.31.26:3000/top/song?type=7', true)   // 第一个参数  get
                xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
                 console.log(xhr.responseText);
            })
              xhr.send()

接下来我一句一句解析代码

var xhr = new XMLHttpRequest();:创建一个名为 xhr 的新XMLHttpRequest对象。这个对象用于在浏览器和服务器之间进行HTTP通信。
xhr.open("GET", "http::/xxxx", true);:使用open方法初始化请求。第一个参数是HTTP请求的方法，第二个参数是要请求的URL，第三个参数表示请求是否异步（true表示异步，false表示同步）
if (xhr.readyState == 4 && xhr.status == 200) { ... }:在回调函数内，检查xhr对象的readyState（就绪状态）和status（HTTP状态码）属性，以确定请求是否已经完成且成功。readyState 为4表示请求已完成，status为200表示请求成功。

readyState状态码	状态
0	代表xhr刚刚创建，请求还没发
1	代表 open准备完成
2	请求已经发送出去
3	接受到了服务端的响应体
4	数据解析完成

HTTP响应状态码:用来表明请求是否成功

状态码	说明
1xx	信息
2xx	成功
3xx	重定向消息
4xx	客户端错误
5xx	服务端错误

=>常见状态码

200 (成功)：服务器已成功处理请求。一般这表示服务器正常处理了请求，并且正常返回了相应的页面
400 (错误请求)：表示客户端请求的语法错误，服务器无法理解,前端参数的问题,参数传递错误
401 (未经授权，需要身份验证)：token=>没有权限,token过期
403（禁止）：服务器理解请求客户端的请求，拒绝请求
404 (未找到)：服务器无法根据客户端请求找到资源
405（方法禁用）：禁用请求中指定的方法
500（服务器内部错误）：服务器遇到一个未预料到的状况，导致无法完成对请求的处理
502（错误网关）：服务器作为网关或者代理，从上游服务器收到无效响应
503（服务不可用）：服务器目前无法使用。例如：超载、停机维护...
504（网关超时）：服务器作为网关或代理，但未及时收到上游服务器的响应

xhr.send();:发送HTTP请求。如果是GET请求，可以将参数设置为null。如果是POST请求，可以在这里传递请求的数据。这一步实际上启动了整个HTTP请求过程，将请求发送到服务器。

2.使用fetch方法

fetch方法更比创建一个XMLHttpRequest对象更好用的方法代码如下

javascript 复制代码

 fetch('http://192.168.31.26:3000/top/song?type=7')
               .then(data => {
                   return data.json()
               })
               .then((res) => {
                   console.log(res)
               }).catch(error => { console.error(error); });

fetch()：使用fetch函数向指定的URL发起GET请求。fetch返回一个Promise，该Promise在HTTP响应可用时解析为Response对象。
.then(response => response.json())：使用Promise的.then方法，该方法接fetch返回的Promise，即Response对象。通过response.json()将Response对象解析为JSON格式，返回一个新的Promise。
.then(data => { console.log(data); })：又使用了.then方法，接收response.json()返回的Promise，即解析后的JSON数据。然后在控制台中打印。
.catch(error => { console.error(error); })：使用.catch方法，用于捕捉报错。

3.使用第三方库jQuery

xml 复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

先引入才能直接使用代码如下

javascript 复制代码

 $.ajax({
                url: 'http://192.168.31.26:3000/top/song?type=7',
                method: 'Get',
                dataType: 'json',
                success: (res) => {
                    console.log(res);
                }
            })

url: "http::xxxxxx",method: "GET",：指定请求的URL和请求方法"GET"。
success: function(data) { ... },：这个回调用于处理请求成功的数据data。

如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！

面试题 ajax是什么

前言

ajax的使用

1.AJAX请求的五个步骤

2.使用fetch方法

3.使用第三方库jQuery