AJAX（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。下面是 AJAX 请求的详细流程：
-
创建 XMLHttpRequest 对象：在 JavaScript 代码中，使用
new XMLHttpRequest()创建一个 XMLHttpRequest 对象。这个对象用于发送异步的 HTTP 请求到服务器。 -
设置请求参数：使用 XMLHttpRequest 对象的方法和属性来设置请求的参数，比如请求的 URL、请求的类型（GET、POST 等）、请求头信息、请求的数据等。
-
注册回调函数：使用 XMLHttpRequest 对象的
onreadystatechange属性设置一个回调函数，该函数会在请求的状态变化时被调用。可以在回调函数中处理服务器响应。 -
发送请求：使用 XMLHttpRequest 对象的
send()方法发送请求。如果发送 GET 请求，可以将参数作为 URL 的一部分；如果发送 POST 请求，可以将参数作为 send() 方法的参数提供。 -
处理响应：在注册的回调函数中，可以使用 XMLHttpRequest 对象的属性来获取响应的状态码、响应头信息和响应的数据。可以根据不同的状态码和数据进行相应的处理，例如更新页面内容、执行一些操作等。
-
处理错误：在发送请求过程中，可能会产生错误。可以使用 XMLHttpRequest 对象的
onerror属性设置一个错误处理函数，用于捕获和处理请求过程中的错误情况。
这是一个简化的 AJAX 请求的流程，具体的实现可能会根据不同的情况和需求有所差异。
以下是一个使用 AJAX 发送带有参数的 GET 请求的示例。这个示例通过一个按钮的点击事件来触发 AJAX 请求，获取并显示一个字符串。你需要将其中的 URL 和参数替换为你自己的实际值：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX 示例</title>
<script>
function sendRequest() {
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置请求参数
var url = 'http://example.com/api'; // 请求的 URL
var params = 'name=John&age=30'; // 请求的参数
url += '?' + params; // 将参数加到 URL 上
xhr.open('GET', url, true); // 打开请求
// 注册回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) { // 请求完成且成功
var response = xhr.responseText; // 获取响应数据
document.getElementById('result').innerHTML = response; // 显示响应数据
}
};
// 发送请求
xhr.send();
}
</script>
</head>
<body>
<button onclick="sendRequest()">发送请求</button>
<div id="result"></div>
</body>
</html>
这个示例中，当用户点击 "发送请求" 按钮时，通过 JavaScript 中的 sendRequest() 函数触发 AJAX 请求。请求通过 GET 方法发送到 'http://example.com/api'，并带有查询参数 'name=John&age=30'。请求成功后，回调函数 onreadystatechange 将响应数据显示在页面中。
需要注意的是，示例中使用了 XMLHttpRequest 对象的 readyState 和 status 属性来判断请求状态和是否成功。readyState 属性表示请求状态，0 表示未初始化，1 表示已打开，2 表示已发送，3 表示接收部分响应，4 表示响应全部接收完毕。而 status 属性表示响应状态码，200 表示 OK，表示请求成功。除此以外，还有其他如 404，500 等 HTTP 状态码，表示请求结果不同。我们需要根据实际情况判断何时响应已经被完整接收，并处理不同的响应结果。