网站备案名称更换今天新闻头条
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及以下browservar 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状态码。
数字 2、3、4 是 readyState 的值，它的取值有以下几种：
- 0 代表未初始化请求。
- 1 代表已与服务器建立连接。
- 2 代表请求被接受。
- 3 代表请求中。
- 4 代表请求完成。