前言
在现代Web开发中，前端与后端之间的数据交互是一个至关重要的环节。为了实现无需刷新页面的动态更新，AJAX（Asynchronous JavaScript and XML）作为一种强大的技术被广泛应用。
AJAX的原理
AJAX通过JavaScript和XMLHttpRequest对象实现异步通信，使得前端能够向后端发送请求并获取响应，而无需刷新整个页面。它的核心思想是在后台发送HTTP请求，然后通过回调函数处理服务器返回的数据。这种异步通信的方式带来了更好的用户体验和性能优化。
AJAX的使用方法
-
创建XMLHttpRequest对象：使用JavaScript创建一个XMLHttpRequest对象，该对象负责发送HTTP请求和接收服务器的响应。
let xhr = new XMLHttpRequest();
-
指定请求类型和URL：设置XMLHttpRequest对象的请求类型（GET或POST）和目标URL，以确定要向服务器发送何种请求。
xhr.open('GET', 'http://api.example.com/data', true);
-
发送请求：调用XMLHttpRequest对象的open()和send()方法，将请求发送到服务器。
xhr.send();
-
处理服务器响应：通过监听XMLHttpRequest对象的readyState和status属性，可以实时获取服务器的响应状态和数据。
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}; -
更新页面内容：根据服务器返回的数据，使用JavaScript动态更新页面内容，实现无刷新效果。
document.getElementById('result').innerHTML = xhr.responseText;
XMLHttpRequest对象的readyState属性
XMLHttpRequest对象的readyState属性用于表示当前请求的状态，它有以下几个可能的取值：
readyState = 0 ：初始状态。XMLHttpRequest对象已创建，但还没有调用open()方法。
readyState = 1 ：open()方法已被调用。请求已经准备好进行初始化，但尚未发送。
readyState = 2 ：send()方法已被调用，并且所有响应头部都已经接收到。
readyState = 3 ：正在下载响应体。responseText属性中已经获取了部分数据。
readyState = 4 ：请求操作已完成。整个响应体已经下载完毕，或者请求遇到了错误。
这些不同的状态反映了XMLHttpRequest对象在请求过程中的不同阶段。我们可以通过监听其onreadystatechange事件来获取并处理readyState属性的变化。当readyState的值发生变化时，我们可以根据具体的状态执行相应的操作。
例如，在readyState为4时，我们可以通过检查status属性来确定请求是否成功，并访问responseText或responseXML属性来获取服务器返回的数据。
使用XMLHttpRequest对象时，我们应该处理各个readyState状态的变化，以确保请求和响应的正确处理。同时，为了提高用户体验，我们可以在请求过程中显示加载指示器或其他反馈信息，以便用户知道请求的状态和进展情况。
XMLHttpRequest对象的status属性
XMLHttpRequest对象的status属性表示HTTP响应状态码。它是一个三位数字，用于指示服务器对请求的处理结果。
HTTP响应状态码通常分为以下几类：
1xx：信息提示。服务器已经接收到请求，但需要进一步操作才能完成它。
2xx：成功。请求已经被成功处理，并得到了正确的响应。
3xx：重定向。客户端需要进一步采取操作才能完成请求。
4xx：客户端错误。请求包含错误或无法完成。
5xx：服务器错误。服务器无法完成请求。
以下是一些常见的HTTP状态码及其含义：
- 200 OK：请求成功。服务器成功地返回了所请求的数据。
- 201 Created：请求成功，并且服务器创建了新的资源。
- 204 No Content：请求成功，但没有返回任何数据。
- 301 Moved Permanently：请求的资源已经永久移动到新的URL。
- 400 Bad Request：请求包含错误，并且服务器无法理解或处理它。
- 401 Unauthorized：请求需要用户验证。
- 403 Forbidden：服务器拒绝了请求。
- 404 Not Found：请求的资源不存在。
- 500 Internal Server Error：服务器遇到了错误，无法完成请求。
在使用XMLHttpRequest对象时，我们可以通过检查status属性来确定服务器是否成功地处理了请求。
例如，当status为200时，表示请求成功，并且可以访问responseText或responseXML属性来获取服务器返回的数据。
比较AJAX请求的三种方式
下面将介绍三种常见的AJAX请求方式：原生JavaScript、jQuery和fetch，并对它们的相同点和不同点进行比较。
原生JavaScript
<script>
// 获取按钮元素
let btn = document.getElementById('btn')
// 给按钮绑定点击事件
btn.addEventListener('click', () => {
// 发送一个http请求
let xhr = new XMLHttpRequest()
// 指定请求方式和请求的URL
xhr.open('GET', 'http:192.168.31.26:3000/top/song?type=7', true)
// 监听请求状态变化
xhr.onreadystatechange = () => {
// 如果请求已完成，并且响应状态码为200，表示请求成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 将响应数据转换成JavaScript对象
const result = JSON.parse(xhr.responseText).data
// 在控制台输出结果
console.log(result);
}
}
// 发送请求
xhr.send()
})
</script>
具体解释如下：
-
通过
<script>标签嵌入JavaScript代码。 -
使用
document.getElementById('btn')获取按钮元素，然后将其赋值给变量btn。 -
使用
addEventListener()方法给按钮绑定点击事件的监听器。当按钮被点击时，回调函数会被执行。 -
在回调函数中，创建了一个新的XMLHttpRequest对象
xhr，用于发送HTTP请求。 -
使用
xhr.open()方法配置请求的类型（GET）、URL和是否异步（true）。 -
通过
xhr.onreadystatechange属性指定一个回调函数，该函数会在请求状态发生变化时被触发。 -
在回调函数中，使用
xhr.readyState获取当前请求状态，xhr.status获取响应状态码。 -
如果请求状态为4（请求已完成），并且响应状态码为200（请求成功），则执行以下代码：
a. 使用
xhr.responseText获取响应的文本数据。b. 使用
JSON.parse()方法将文本数据转换为JavaScript对象。c. 将转换后的结果赋值给变量
result。d. 使用
console.log()将结果输出到控制台。 -
最后，通过
xhr.send()方法发送请求。
总之，这段代码使用了原生JavaScript中的XMLHttpRequest对象来发送HTTP GET请求，并通过监听请求状态变化，获取并处理响应数据
jQuery：
<!-- 引入jQuery库 -->
<script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// 获取按钮元素
let btn = document.getElementById('btn')
// 给按钮绑定点击事件
btn.addEventListener('click', () => {
// 发起Ajax请求
$.ajax({
url: 'http:192.168.31.26:3000/top/song?type=7', // 请求地址
method: 'GET', // 请求方法
dataType: 'json', // 期望的响应数据类型
success: (res) => { // 请求成功的回调函数
console.log(res); // 在控制台输出响应结果
}
})
})
</script>
这段代码与之前的代码相比，引入了jQuery库，使用其提供的$.ajax()方法发起异步请求。
具体解释如下：
- 首先，通过
<script>标签引入了CDN上托管的jQuery库。 - 在按钮点击事件的回调函数中，使用
$.ajax()方法发起异步请求。 - 在
$.ajax()方法的配置对象中，通过url指定请求的地址为http:192.168.31.26:3000/top/song?type=7，即获取类型为"7"的新歌。 - 使用
method: 'GET'指定请求的方法为GET。 - 通过
dataType: 'json'指定期望的响应数据类型为JSON。 - 在
success属性中，定义了请求成功时的回调函数，其中的(res) => { console.log(res); }会在请求成功后被执行，并将响应结果输出到控制台。
总之，这段代码使用了jQuery库提供的$.ajax()方法发起异步请求，相对于传统的XMLHttpRequest对象，它提供了更简洁的语法和更好的兼容性。同时，通过配置对象可以灵活地设置请求的URL、方法、期望的响应数据类型以及请求成功时的回调函数。
fetch：
<!-- 引入jQuery库 -->
<script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// 获取按钮元素
let btn = document.getElementById('btn')
// 给按钮绑定点击事件
btn.addEventListener('click', () => {
// 使用fetch API发起异步请求
fetch('http:192.168.31.26:3000/top/song?type=7')
.then((data) => {
// 将响应数据解析为JSON格式
return data.json()
})
.then((res) => {
// 打印响应结果到控制台
console.log(res);
})
})
</script>
这段代码使用了原生JavaScript中的fetch()方法来发起异步请求，相较于之前的代码，不再依赖于jQuery库。
具体解释如下：
- 首先，通过
<script>标签引入了CDN上托管的jQuery库。 - 在按钮点击事件的回调函数中，使用
fetch()方法发起异步请求。 fetch()方法接收一个URL作为参数，并返回一个Promise对象，表示异步操作的结果。- 通过
then()方法链，将返回的数据流转换为JSON格式，并在第二个then()中处理响应结果。 - 在第二个
then()中，定义了一个回调函数，该函数接收解析后的JSON响应结果作为参数，并将其打印到控制台。
相同点：
- 都可以实现异步请求：这三种方式都能够发送异步请求，不会阻塞页面的加载和渲染。
- 都支持GET和POST请求：无论是原生JavaScript、jQuery还是fetch，都可以发送GET和POST请求，并且可以设置请求参数。
- 都支持处理响应数据：无论使用哪种方式，都可以获取到服务器返回的响应数据，并对其进行处理。
不同点：
- 语法和用法差异：原生JavaScript使用XMLHttpRequest对象来发送请求，需要手动设置请求头、监听状态变化等。而jQuery和fetch则提供了更简洁易用的API，对请求的各个环节进行了封装，使用起来更加方便。
- 第三方库依赖：原生JavaScript是浏览器原生支持的，不需要引入额外的库。而jQuery和fetch需要引入相应的库文件，如上述代码中使用的jQuery和fetch API。
- 对错误处理的支持：原生JavaScript和jQuery都提供了错误处理的机制，可以通过回调函数来处理请求过程中可能出现的错误。而fetch则使用Promise机制，可以链式调用then()和catch()方法来处理成功和失败的情况。
- 对不同数据类型的支持：原生JavaScript和fetch可以根据设置的dataType或响应头自动解析不同的数据类型，如JSON、XML等。而jQuery则可以通过设置dataType参数来指定期望的响应数据类型。
综上所述，原生JavaScript、jQuery和fetch都是常见的AJAX请求方式，各自有着不同的特点和适用场景。
结语
AJAX作为前端与后端数据交互的利器，给现代Web开发带来了巨大的便利和灵活性。通过理解AJAX的原理和使用方法，并注意相关的注意事项，我们可以更好地利用AJAX来提升网站的用户体验、性能和功能拓展。