原生Ajax基础教程：创建与发送Ajax请求详解

原生Ajax是前端开发中实现异步数据交互的一种核心技术，它允许Web应用程序在不刷新整个页面的情况下与服务器进行通信。这篇笔记主要介绍了如何使用JavaScript的原生XMLHttpRequest对象来构建AJAX请求的四个关键步骤，以及在前后端代码中的实际应用示例。 **1. 创建AJAX对象** 首先，你需要创建一个XMLHttpRequest对象，这是所有AJAX操作的基础： ```javascript let xhr = new XMLHttpRequest(); ``` 这个对象代表了与服务器之间的HTTP请求。 **2. 监听请求状态变化** 为了处理请求的响应，你需要监听对象的状态变化。有两种常见的方法： - **onreadystatechange** 方法会定期检查请求状态，并在`readyState`变为4（请求已完成）时执行回调函数，处理响应数据： ```javascript xhr.onreadystatechange = function() { if (xhr.readyState === 4) { console.log(xhr.response); } }; ``` - 或者，可以监听`onload`事件，它只在请求成功完成时触发： ```javascript xhr.onload = () => { console.log(xhr.response); }; ``` **3. 配置网络请求** 使用`open()`方法定义请求的类型（GET或POST）、URL以及是否异步： ```javascript xhr.open("GET", "http://127.0.0.1:3001/getData", true); ``` POST请求需要指定请求体，使用`send()`方法传递数据： ```javascript xhr.send(); // 对于GET请求不需要传递数据 ``` **4. 请求前后端代码示例** 尽管原生Ajax被现代库如axios所取代，但理解其工作原理有助于理解基础。`package.json`列出了一些可能用到的依赖，包括用于处理不同请求类型的库（如axios），但这里主要关注原生XMLHttpRequest的使用： - `@koa/router` 和 `koa` 是Koa框架的一部分，它们提供了基于Express的路由管理。 - Axios是用于替代原生AJAX的一个强大库，它支持更简洁的API和Promise风格的处理。 结合以上内容，你可以构建一个简单的前端应用，使用原生Ajax发起GET或POST请求，并在后端设置路由和相应逻辑来处理这些请求。在实际开发中，由于库的易用性和跨浏览器兼容性，原生AJAX通常会被封装在像axios这样的库中使用，但它仍然是理解现代前端开发的核心概念之一。