简单介绍不用库（框架）自己写ajax

Ajax即Asynchronous JavaScript and XML(异步JavaScript和XML)，是一种用于创建动态Web内容的技术。与传统的网页获取方式不同之处在于，Ajax能够在不刷新整个网页的情况下，通过后台与服务器进行数据交互，更新部分网页内容。本文将介绍如何利用原生JavaScript自己编写Ajax。

1. 创建XMLHttpRequest对象

Ajax通信需要通过XMLHttpRequest对象进行。XMLHttpRequest是浏览器内置的对象，可以发送HTTP请求，然后接收响应。可以使用以下代码创建该对象：

const xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象

2. 发送请求

创建XMLHttpRequest对象后，可以使用它发送请求。可以使用open()方法设置请求方法、URL和异步标识。可以使用send()方法发送请求。

xhr.open('GET', 'url', true); //设置请求方式、URL和异步标识
xhr.send(); //发送请求

3. 接收响应

当请求被发送后，服务器会返回响应。可以使用XMLHttpRequest对象的onreadystatechange属性来指定响应时调用的函数。可以使用responseText属性获取服务器响应。

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) { //响应已完成且成功
    console.log(xhr.responseText); //输出服务器响应
  }
};

以上代码意味着：一旦readyState的值从0变为4，且HTTP状态码为200，则表示服务器成功返回响应。可以读取responseText属性以获取响应数据。

4. 发送数据

如果需要在请求中传递数据，则可以将其作为send()方法的参数传递。

xhr.open('POST', 'url', true); //设置请求方式、URL和异步标识
xhr.setRequestHeader('Content-type', 'application/json'); //设置请求头，指定数据格式为json
const data = { name: 'Tom', age: 20 }; //要发送的数据
xhr.send(JSON.stringify(data)); //将数据转换为JSON字符串并发送请求

以上代码表示，将请求方式设置为POST，并通过setRequestHeader()方法指定请求头，将发送的数据格式指定为JSON。然后，将数据转换为JSON字符串并传递给send()方法以发送请求。

5. 错误处理

在Ajax通信过程中可能会出现错误，例如网络故障或服务器端程序出错。可以使用onerror事件处理程序来处理这些错误。可以添加类似以下代码：

xhr.onerror = () => {
  console.log('请求发生错误'); //输出错误信息
};

以上就是编写Ajax通信的基本步骤。值得注意的是，Ajax技术必须在服务器环境下运行。因为服务器才有数据，客户端才可以请求数据。本文介绍的Ajax代码只是一种基本实现方式，常见的库（框架）例如jQuery和axios等都可以节省编写Ajax的代码量。