原生js封装ajax;封装原生JS实现的Ajax请求

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它通过在后台与服务器进行数据交换，实现页面的局部刷新，而不需要重新加载整个页面。Ajax使用JavaScript和XML来实现异步通信，这使得网页能够在不刷新的情况下更新内容。下面我们将使用原生JavaScript来封装一个简单的Ajax请求。

创建XMLHttpRequest对象

在使用Ajax发送请求之前，我们需要创建一个XMLHttpRequest对象，它是浏览器提供的用于与服务器进行通信的接口。我们可以通过`new XMLHttpRequest()`来创建一个新的XMLHttpRequest对象。

发送GET请求

发送GET请求是Ajax的常见用法之一。我们可以使用XMLHttpRequest对象的`open()`和`send()`方法来发送GET请求。我们需要使用`open()`方法指定请求的类型和URL。然后，我们可以使用`send()`方法发送请求。在发送请求之后，我们可以通过`onreadystatechange`事件来监听服务器的响应。

处理服务器响应

当服务器响应到达时，`onreadystatechange`事件会被触发。我们可以通过检查XMLHttpRequest对象的`readyState`和`status`属性来确定请求的状态。`readyState`表示请求的当前状态，而`status`表示服务器的响应状态。当`readyState`为4且`status`为200时，表示服务器成功响应。我们可以通过`responseText`属性获取服务器返回的数据。

发送POST请求

除了发送GET请求，我们还可以使用Ajax发送POST请求。发送POST请求与发送GET请求的主要区别在于`open()`方法的第三个参数。对于POST请求，我们需要将第三个参数设置为`true`，以便将请求发送到服务器。

处理请求错误

在使用Ajax发送请求时，可能会出现各种错误。为了处理这些错误，我们可以在`onreadystatechange`事件中添加错误处理逻辑。当`readyState`不为4时，表示请求正在进行中，我们可以在这个阶段显示一个加载动画。当`status`不为200时，表示服务器响应错误，我们可以根据`status`的值进行相应的错误处理。