一.Ajax工作原理

       Ajax（Asynchronous JavaScript and XML）是一种用于在Web应用中实现异步数据交换的技术。通过在不刷新整个页面的情况下与服务器进行数据交换，实现了更快的响应速度和更好的用户体验。

 用户触发事件：当用户在页面上触发某个事件（比如点击按钮、输入框失去焦点等），需要获取或提交数据时，会触发Ajax请求。 发送请求：通过JavaScript代码创建一个XMLHttpRequest对象，用于向服务器发送HTTP请求。可以使用GET或POST方法发送请求，通常是发送一个HTTP请求到服务器的特定URL。 服务器处理请求：服务器接收到请求后，会处理请求并返回相应的数据。服务器端可以是任何后端语言，比如PHP、Java、Python等。 接收响应：一旦服务器处理完请求并返回响应，XMLHttpRequest对象会接收到响应数据。这些数据可以是XML、JSON、HTML或纯文本等格式。 更新页面：通过JavaScript代码处理接收到的响应数据，可以更新页面的内容，比如更新特定的DOM元素、显示错误信息等。这样就实现了页面的局部刷新，而不需要重新加载整个页面。

 二.XMLHttpRequest对象的属性、方法和事件

一.属性：

readyState：表示XMLHttpRequest对象的状态，有5个可能的取值：

0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪status：HTTP状态码，表示服务器响应的状态，比如200表示成功，404表示未找到，500表示服务器错误等。responseText：以字符串形式返回服务器响应的文本数据。responseXML：如果服务器响应的数据是XML格式，可以通过这个属性获取解析后的XML文档。onreadystatechange：当readyState属性改变时触发的事件处理函数。

二. 方法

     在上面的代码中，首先创建了一个XMLHttpRequest对象，并通过onreadystatechange事件监听器来处理不同的请求状态。在readyState为4时表示请求已完成，可以通过status属性来判断请求的成功与否。如果状态码为200表示请求成功，可以通过responseText属性获取服务器返回的文本数据。

    在实际开发中，可以根据具体需求使用XMLHttpRequest对象的不同方法来发送POST请求、设置请求头、处理响应等操作。同时，可以结合Promise、async/await等技术对Ajax请求进行封装和管理，以提高代码的可维护性和可读性。

三. 事件 

1.onreadystatechange事件：

事件描述：当XMLHttpRequest对象的readyState属性发生变化时触发该事件。

代码示例：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText);

}

};

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

xhr.send();

2.onload事件：

事件描述：当请求成功完成时触发该事件。

代码示例：

var xhr = new XMLHttpRequest();

xhr.onload = function() {

console.log(xhr.responseText);

};

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

xhr.send();

3.onerror事件：

事件描述：当请求发生错误时触发该事件。

代码示例：

var xhr = new XMLHttpRequest();

xhr.onerror = function() {

console.error('请求发生错误');

};

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

xhr.send();

4.ontimeout事件：

事件描述：当请求超时时触发该事件。

代码示例：

var xhr = new XMLHttpRequest();

xhr.timeout = 5000; // 设置超时时间为5秒

xhr.ontimeout = function() {

console.error('请求超时');

};

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

xhr.send();

三.案例介绍

     为了进一步说明Ajax和XMLHttpRequest对象的用法，我们可以编写一个简单的示例，通过JSONPlaceholder提供的API获取用户的信息并展示在页面上。在这个示例中，我们将使用XMLHttpRequest对象发送GET请求获取用户数据，并将返回的JSON数据展示在页面上。

User Information

在这个示例中，我首先创建了一个XMLHttpRequest对象，然后通过open方法初始化一个GET请求，指定了JSONPlaceholder提供的API地址。在请求完成时，我们解析返回的JSON数据并调用displayUserInfo函数将用户信息展示在页面上。

参考文章