AJAX 的英文全称 Asynchronous JavaScript And XML,其中Asynchronous就是指的异步,这里异步指通过 AJAX 向服务器请求数据,在不刷新整个页面的情况下,更新页面上的部分内容。
通过使用Ajax,可以创建更动态和响应性的Web应用程序,因为它使得页面可以在后台与服务器进行数据交换,而无需打断用户的操作或重新加载整个页面。这种异步通信的能力使得网页可以在后台向服务器请求数据,然后根据这些数据更新页面的内容,从而提供更流畅和交互式的用户体验。
在使用Ajax时,常见的步骤包括创建XMLHttpRequest对象,发送请求到服务器,处理服务器响应并更新页面内容。现在主流的Ajax的JavaScript库和框架有jQuery、React、Vue等,简化了Ajax的使用并提供了更强大的功能和更方便的API。
XMLHttpRequest对象是用于在JavaScript中发起HTTP请求的核心对象。它具有一系列属性、方法和事件,可以控制HTTP请求的细节,以及在请求过程中的各种状态。以下是XMLHttpRequest对象的主要属性、方法和事件:
属性:
-
onreadystatechange:表示每当readyState属性改变时调用的事件处理程序的函数。这个属性通常用于指定一个回调函数,以便在XMLHttpRequest对象的状态发生变化时执行特定的操作。
-
readyState:表示XMLHttpRequest对象的状态,有以下数值:
- 0: 未初始化 - 对象已创建,但尚未调用open()方法。
- 1: 启动 - 已调用open()方法,但尚未调用send()方法。
- 2: 发送 - 已调用send()方法,但尚未接收到响应。
- 3: 接收 - 已接收到部分响应数据。
- 4: 完成 - 已接收到所有响应数据。
-
responseText:返回作为请求响应体接收的文本。如果请求未完成或失败,则该属性返回null。
-
responseXML:返回作为请求响应体接收的XML文档对象(如果响应的内容类型是"text/xml"或"application/xml")。如果请求未完成或失败,则该属性返回null。
-
status:返回HTTP状态代码(例如200表示成功,404表示未找到,等等)。
-
statusText:返回HTTP状态消息(例如"OK"、"Not Found"等)。
方法:
-
open(method, url, async, user, password):初始化请求。参数分别是HTTP方法、URL、是否异步、可选的用户名和密码。
-
send(data):发送请求。可选地,可以传递数据作为请求体。
-
setRequestHeader(header, value):设置HTTP请求头。
-
abort():取消当前的HTTP请求。
事件:
-
onreadystatechange:每当readyState属性发生变化时触发。
-
onload:当请求成功完成时触发。
-
onerror:当请求失败时触发。
-
ontimeout:当请求超时时触发。
-
onprogress:在接收响应期间触发,用于跟踪下载进度。
-
onabort:当请求被取消时触发。
这些属性、方法和事件使得JavaScript可以控制HTTP请求的细节,并在请求过程中实时响应和处理各种状态。
下面是创建Ajax实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX 的使用</title>
<script>
window.onload = function () {
if (window.XMLHttpRequest) {
// Mozilla,Safari,IE7+ 等浏览器适用
var httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// 兼容IE6及以下browser
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// 规定发送请求要求
httpRequest.open(
"GET",
"https://jsonplaceholder.typicode.com/users",
true
);
// 发送请求到服务器
httpRequest.send();
httpRequest.onreadystatechange = function () {
console.log(httpRequest.readyState);
console.log(httpRequest.status);
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 请求成功
document.getElementById("item").innerHTML = "请求成功";
} else {
// 请求失败
document.getElementById("item").innerHTML = "请求失败";
}
};
};
</script>
</head>
<body>
<div id="item"></div>
</body>
</html>
我们打开live serve到游览器控制台,可以看到以下状态码
在控制台中输出的 200 是 HTTP 的响应状态码
其中status是XMLHttpRequest对象的一个属性,表示响应的HTTP状态码。文章来源:https://www.toymoban.com/news/detail-839898.html
数字 2、3、4 是 readyState
的值,它的取值有以下几种:文章来源地址https://www.toymoban.com/news/detail-839898.html
- 0 代表未初始化请求。
- 1 代表已与服务器建立连接。
- 2 代表请求被接受。
- 3 代表请求中。
- 4 代表请求完成。
到了这里,关于Ajax异步通信与XMLhttpRequest对象的属性方法及事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!