1.Ajax工作原理
Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式、快速动态网页应用的网页开发技术。它允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
1）Ajax的工作原理
浏览器端：JavaScript负责发送HTTP请求，处理服务器返回的响应，并更新页面内容。
XMLHttpRequest对象：是Ajax的核心，它用于在浏览器与服务器之间建立连接，发送请求，并接收响应。 异步通信：Ajax使用异步方式发送请求，这意味着浏览器在等待服务器响应时不会阻塞用户的其他操作。 数据交换：Ajax可以使用多种数据格式进行交换，最常见的是XML和JSON。
2）工作流程
用户在浏览器上执行某个操作（如点击按钮）。 JavaScript捕获这个操作，并创建一个XMLHttpRequest对象。 XMLHttpRequest对象向服务器发送HTTP请求（如GET或POST）。 服务器处理请求，并返回响应。 XMLHttpRequest对象接收响应，并将数据传递给JavaScript。 JavaScript解析响应数据，并动态更新页面内容
2.XMLHttpRequest对象的属性、方法和事件
XMLHttpRequest 对象在 AJAX 中扮演着核心角色，用于在客户端与服务器之间发送请求和接收响应。
1）属性
readyState: 返回一个表示请求/响应过程的当前状态的数字。
0 (未初始化): 对象已创建，但尚未调用 open() 方法。 1 (已打开): 已调用 open() 方法，但尚未调用 send() 方法。 2 (已发送): 已调用 send() 方法，但尚未收到响应。 3 (接收中): 正在接收响应数据。 4 (已完成): 响应数据已接收完毕，或请求已失败。 status: 返回一个 HTTP 响应的状态码（如 200 表示成功）。
statusText: 返回一个 HTTP 响应的状态文本（如 "OK"）。
responseText: 以字符串形式返回响应数据。
responseXML: 如果响应是 XML，则返回相应的 Document 对象；否则返回 null。
response: 返回响应数据，类型由 responseType 属性决定。
responseType: 设置响应类型（如 "text"、"json"、"document" 等）。
2）方法
open(method, url, async, user, password): 初始化请求。
method: 请求方法（如 "GET"、"POST" 等）。 url: 请求的 URL。 async: 是否异步发送请求（默认为 true）。 user: 可选的用户名（用于认证）。 password: 可选的密码（用于认证）。 send(data): 发送请求。如果请求方法为 POST，data 参数可包含要发送的数据。
setRequestHeader(header, value): 设置请求的 HTTP 头。
abort(): 中止当前请求。
getAllResponseHeaders(): 返回所有响应头信息。
getResponseHeader(header): 返回特定响应头的值。
3）事件
onreadystatechange: 当 readyState 属性值改变时触发。
在实际使用中，通常会在 onreadystatechange 事件中检查 readyState 属性，并在其值为 4（表示请求已完成且响应已就绪）时处理响应数据。例如：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'api.example.com/data', true);
xhr.send();
当请求完成且状态码为 200 时，onreadystatechange 事件处理器会执行，并打印出响应的文本内容。
3.JSONPlaceHolder数据服务案例，及应用场景
1）场景一：获取用户列表并显示在页面上 HTML部分：
AJAX Example with XMLHttpRequestUser List
document.addEventListener('DOMContentLoaded', function() {
var userList = document.getElementById('user-list');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var users = JSON.parse(xhr.responseText);
users.forEach(function(user) {
var listItem = document.createElement('li');
listItem.textContent = user.name;
userList.appendChild(listItem);
});
}
};
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);
xhr.send();
});
使用 XMLHttpRequest 对象发送一个 GET 请求到 JSONPlaceholder 的用户列表 API。当请求完成时，检查响应状态码是否为 200，然后将响应文本解析为 JSON 对象。接着，遍历这个对象数组，为每个用户创建一个列表项，并将其添加到页面的
- 元素中。
2）场景二：表单提交并获取响应
HTML部分：
AJAX Form SubmissionPost a Comment
JS部分：
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById('comment-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form from submitting normally
var commentText = document.getElementById('comment-text').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 201) {
var response = JSON.parse(xhr.responseText);
var responseDiv = document.getElementById('comment-response');
responseDiv.textContent = 'Comment posted: ' + response.title;
} else if (xhr.status !== 200) {
alert('Error: ' + xhr.status);
}
};
var data = 'text=' + encodeURIComponent(commentText);
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
});
});
监听表单的提交事件，并使用 AJAX 来异步地提交评论。当用户点击提交按钮时，阻止表单的默认提交行为，获取输入框中的文本，并创建一个 XMLHttpRequest 对象。然后，设置请求方法为 POST，设置请求头为 application/x-www-form-urlencoded，并发送包含评论文本的请求。当请求完成时，检查响应状态码，如果状态码为 201，表示评论已成功创建，解析响应文本并显示评论的标题。如果状态码不是 200，显示一个错误提示。
