AJAX (Asynchronous JavaScript and XML) 是一种用于实现异步请求的技术,常用于向服务器发送请求,并获取服务器返回的数据。其中,GET 请求是最常见的一种请求方式,用于从服务器获取数据。本文将介绍如何使用 AJAX 发送 GET 请求,并解释如何处理不同类型的数据响应。
假设我们有一个电影推荐网站,我们要使用 AJAX 发送 GET 请求获取电影列表。通过 AJAX,我们可以从服务器获取数据,而不需要整个页面进行刷新。
<script>
var xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
xhr.open("GET", "https://example.com/movies", true); // 创建 GET 请求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成并成功返回时
var movies = JSON.parse(xhr.responseText); // 将返回的 JSON 数据解析为 JavaScript 对象
// 处理电影列表数据
for (var i = 0; i < movies.length; i++) {
console.log(movies[i].title);
}
}
};
xhr.send(); // 发送请求
</script>
在上面的代码中,我们创建了一个 XMLHttpRequest 对象并调用 open() 方法来创建一个 GET 请求。其中,第一个参数是请求的方法(GET),第二个参数是请求的 URL(https://example.com/movies),第三个参数表示是否异步(true 表示异步请求)。然后,我们使用 onreadystatechange 事件监听请求状态的改变。
当请求状态改变时,也就是 readyState 属性发生变化时,我们通过检查 readyState 的值是否为 4 来判断请求是否完成。同时,我们还检查状态码(status)是否为 200,表示请求成功。在请求成功时,我们可以通过 responseText 属性获取服务器返回的数据。在这个例子中,服务器返回的是 JSON 数据,我们通过使用 JSON.parse() 方法将其解析为 JavaScript 对象。
一旦我们成功获取了服务器返回的电影列表数据,并将其解析为 JavaScript 对象,我们可以根据需要进行进一步的处理。例如,我们可以遍历电影列表,并将每个电影的标题打印到控制台。
除了获取电影列表,我们还可能根据不同的需求获取其他类型的数据。下面是一些例子:
1. 获取用户信息
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/user?id=123", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var user = JSON.parse(xhr.responseText);
console.log(user.name);
console.log(user.email);
}
};
xhr.send();
</script>
在这个例子中,我们发送一个带有查询参数的 GET 请求,获取特定用户的信息。通过解析服务器返回的 JSON 数据,我们可以获取用户的姓名和电子邮件地址。
2. 获取文章内容
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/article?id=456", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var article = xhr.responseText;
console.log(article);
}
};
xhr.send();
</script>
在这个例子中,我们发送一个带有查询参数的 GET 请求,获取特定文章的内容。服务器返回的是文章的纯文本内容,我们可以直接使用 responseText 属性获取到。
综上所述,通过使用 AJAX 发送 GET 请求,我们可以从服务器获取各种类型的数据。无论是电影列表、用户信息还是文章内容,我们都可以使用相同的方式发送请求,并处理服务器的响应数据。