摘要：在Web开发中，经常需要与服务器进行数据交互。本文介绍了使用Ajax异步请求数据的三种方法，分别是XMLHttpRequest、jQuery Ajax和fetch API。通过这些方法，我们可以实现在不刷新整个页面的情况下获取数据并进行展示，提升用户体验。
引言：
在现代Web应用程序中，动态加载数据变得越来越常见。为了实现这一目标，我们可以使用Ajax（Asynchronous JavaScript and XML）来发送异步请求并获取服务器返回的数据。下面将介绍三种常见的使用Ajax进行异步请求的方法。
方法及步骤：
1. XMLHttpRequest 方法：
- 创建一个 XMLHttpRequest 对象。
- 使用
open()方法指定请求的类型（GET、POST等）和 URL。 - 发送请求，使用
send()方法发送请求。 - 监听
onreadystatechange事件，当请求状态发生改变时执行对应的处理函数。 - 在处理函数中，判断请求的状态是否为4（完成）以及状态码是否为200（成功），然后处理服务器返回的数据。
2. jQuery Ajax 方法：
- 引入 jQuery 库，确保可以使用
$符号。 - 使用
$ajax()方法发送 Ajax 请求。 - 在
url参数中指定请求的 URL。 - 在
type参数中指定请求的类型（GET、POST等）。 - 在
success参数中指定一个回调函数，在请求成功后执行该函数。 - 在回调函数中处理服务器返回的数据。
3. Fetch API 方法：
- 使用
fetch()函数发送请求，传入请求的 URL。 - 使用
then()方法处理 Promise，该方法接收一个回调函数作为参数。 - 在回调函数中使用
json()方法将响应转换为 JSON 格式。 - 再次使用
then()方法处理 Promise，处理转换后的数据。 - 在第二个回调函数中处理服务器返回的数据。
以上是每个方法的基本步骤，根据实际需求和具体场景，可以根据需要添加其他操作或处理逻辑。
示例实现
1. XMLHttpRequest
XMLHttpRequest是原生JavaScript提供的API，它是最基本的Ajax技术之一。通过创建一个XMLHttpRequest对象，我们可以发送HTTP请求并处理服务器返回的数据。
以下是一个使用XMLHttpRequest的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<ul></ul>
<script>
let btn = document.querySelector('button');
btn.addEventListener('click', () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/top/song?type=7')
xhr.send()
xhr.onreadystatechange = () => {
if(xhr.readyState === 4 && xhr.status === 200) {
let ul = document.querySelector('ul');
const data = JSON.parse(xhr.responseText).data;
for(let i = 0; i < data.length; i++) {
let li = document.createElement('li');
li.innerHTML = data[i].name;
ul.appendChild(li);
}
}
}
})
</script>
</body>
</html>
在上述代码中，我们通过创建一个XMLHttpRequest对象来发送GET请求，并在请求完成后处理服务器返回的数据。通过监听xhr的onreadystatechange事件，我们可以在请求的不同阶段获取到相应的状态。
2. jQuery Ajax
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax请求等任务。jQuery提供了简洁易用的Ajax接口，使得发送异步请求变得更加方便。以下是一个使用jQuery Ajax的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击</button>
<ul></ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
$.ajax({
url: 'http://localhost:3000/top/song?type=7',
type: 'get',
success: (res) => {
let ul = document.querySelector('ul');
for (let i = 0; i < res.data.length; i++) {
let li = document.createElement('li');
li.innerText = res.data[i].name;
ul.appendChild(li);
}
}
});
})
</script>
</body>
</html>
在上述代码中，我们使用了jQuery的$.ajax()方法发送GET请求，并通过指定url、type和success等参数来处理服务器返回的数据。
3. Fetch API
Fetch API是一种新的Web API，它提供了更现代化的方式来发送网络请求。Fetch API使用Promise对象来处理异步请求，使得代码更加简洁和易读。以下是一个使用Fetch API的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<ul></ul>
<script>
let btn = document.querySelector('button');
btn.addEventListener('click',()=>{
fetch('http://localhost:3000/top/song?type=7')
.then((data) => {
return data.json();
})
.then((res) => {
console.log(res);
let ul = document.querySelector('ul');
for(let i = 0; i < res.data.length; i++){
let li = document.createElement('li');
li.innerHTML = res.data[i].name;
ul.appendChild(li);
}
})
});
</script>
</body>
</html>
在上述代码中，我们使用了fetch()函数发送GET请求，并链式调用了then()方法来处理服务器返回的数据。在第一个then()中，我们将返回的响应转换为JSON格式，然后在第二个then()中处理转换后的数据。
通过以上三种方法，我们可以实现在不刷新整个页面的情况下获取数据并进行展示。根据实际需求和项目的技术栈，选择合适的方法来发送异步请求，将会使我们的Web应用更加高效和用户友好。
原文链接：https://juejin.cn/post/7323099490315288628 作者：小白234
