目录
概述
传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间,这导致了用户界面的响应比本地应用慢得多。
AJAX 的出现,刚好解决了传统方法的缺陷,AJAX 是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest对象
AJAX的核心是XMLHttpRequest对象,所有现代浏览器都支持该对象。XMLHttpRequest对象用于在后台与服务器进行数据交换,可以实现网页的部分更新,而无需重新加载整个页面。
所有现代浏览器(Chrom、IE7+、Firefox、Safari 以及 Opera)都有内建的 XMLHttpRequest 对象。
创建 XMLHttpRequest 的语法是:
let xhr = new XMLHttpRequest();
创建完成后,我们可以通过该对象执行各种操作,如发送HTTP请求、接收服务器响应等。
方法和属性
以下是一些常用的XMLHttpRequest方法和属性:
- 方法:
open(method, url, async)
: 初始化一个HTTP请求。参数method
指定请求的方法,如"GET"、"POST"等;url
指定请求的URL地址;async
指定请求是否为异步,默认为true。- new XMLHttpRequest():创建新的 XMLHttpRequest 对象。
- abort():取消当前请求
send(data)
: 发送请求并从服务器获取数据,可选地传递数据作为参数。通常在POST请求中使用。- send():将请求发送到服务器,用于 GET 请求
setRequestHeader(header, value)
: 设置请求头。用于设置HTTP请求的请求头,通常在发送之前调用该方法。getResponseHeader(header)
: 获取服务器响应的指定头部信息。getAllResponseHeaders()
: 获取服务器响应的所有头部信息。
2.属性:
onreadystatechange
: 事件处理程序,在请求状态改变时被调用。可以通过该事件处理程序来检测请求的不同阶段和状态。status
: 包含HTTP状态码,表示服务器响应的状态。状态号:200: "OK",403: "Forbidden",404: "Not Found"。- statusText:返回状态文本(比如 “OK” 或 “Not Found”)
responseText
: 以字符串形式返回服务器响应的文本内容。responseXML
: 如果响应的内容类型是"text/xml"或"application/xml",则返回解析后的XML文档。readyState
: 表示XMLHttpRequest对象的状态,包括以下数值:- 0: 未初始化。表示XMLHttpRequest对象已创建或已被abort()方法重置。
- 1: 打开。表示调用了open()方法,但尚未调用send()方法。
- 2: 已发送。表示已调用send()方法,但未收到响应。
- 3: 接收中。表示正在接收响应数据。
- 4: 完成。表示已经接收到完整的响应数据,并可以在客户端使用。
这些方法和属性可以被用来配置请求、发送请求、获取响应数据以及处理响应信息。
示例一:
<!DOCTYPE html>
<html>
<head>
<title>AJAX XMLHttpRequest 示例</title>
</head>
<body>
<h1>AJAX XMLHttpRequest 示例</h1>
<button onclick="l()">加载数据</button>
<div id="li"></div>
<script>
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 定义onreadystatechange事件处理函数
xhr.onreadystatechange = function() {
// 当readyState为4(完成)且status为200(成功响应)时,表示请求已完成,并处理响应数据
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取响应的文本内容
var responseText = xhr.responseText;
// 在页面上显示响应的数据
var resultDiv = document.getElementById("li");
resultDiv.textContent = responseText;
}
};
// 加载数据的函数
function l() {
// 打开新的请求,使用GET方法获取数据
xhr.open("GET", "data.txt", true);
// 发送请求
xhr.send();
}
</script>
</body>
</html>
- 通过点击按钮触发
l()
函数来加载数据。 - 使用
XMLHttpRequest
对象发送GET请求并获取数据。 - 响应的文本内容将显示在
<div id="li">
元素中。
示例二:
<!DOCTYPE html>
<html>
<head>
<title>AJAX Fetch 示例</title>
</head>
<body>
<h1>AJAX Fetch 示例</h1>
<button onclick="l()">加载数据</button>
<div id="li"></div>
<script>
// 加载数据的函数
function l() {
// 使用Fetch API发送GET请求获取数据
fetch("data.txt")
.then(function(response) {
// 确保响应成功
if (response.ok) {
// 将响应转换为文本格式
return response.text();
} else {
throw new Error("网络请求失败:" + response.status);
}
})
.then(function(data) {
// 在页面上显示响应的数据
var resultDiv = document.getElementById("li");
resultDiv.textContent = data;
})
.catch(function(error) {
console.log("发生错误:", error);
});
}
</script>
</body>
</html>
注释说明:
- 通过点击按钮触发 l
()
函数来加载数据。 - 使用Fetch API发送GET请求并获取数据。
- 确保响应成功后,将响应转换为文本格式。
- 在页面上显示响应的数据。如果请求失败或发生错误,会在控制台打印错误信息。