Ajax基本原理

AJAX（Asynchronous JavaScript and XML）是一种基于 JavaScript 和 XML 技术的前端通信方式，可以在不刷新页面的情况下向服务器发送请求，并接收响应数据，实现了前后端的无感通信。本文将介绍 AJAX 的原理及实现方式。

在传统的 Web 应用中，前端页面通过表单提交或者超链接的方式向服务器发送请求，服务器响应后返回一个完整的 HTML 页面，浏览器再重新渲染页面。这个过程需要刷新页面，响应时间较长，用户体验不佳。
而 AJAX 技术可以实现异步请求，即前端向服务器发送请求后，不需要等待服务器的响应，可以继续执行其他的操作，当服务器响应时，再将数据更新到页面上，这样可以大大提高用户体验。

AJAX 的原理是通过 XMLHttpRequest 对象向服务器发送请求，并通过回调函数处理服务器响应的数据。XMLHttpRequest 对象是由浏览器提供的，可以通过 JavaScript 代码进行创建和操作。

二、AJAX 实现方式

1. XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 的核心，可以通过它实现前后端的通信。它提供了多种方法和属性，如 open()、send()、onreadystatechange 等。

使用 XMLHttpRequest 对象发送请求需要以下步骤：

① 创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

② 打开请求

xhr.open('GET', url, true);

open() 方法接收三个参数，第一个参数是请求方式，可以是 GET 或 POST；第二个参数是请求的 URL；第三个参数是表示是否异步请求，一般设置为 true。

③ 发送请求

xhr.send(null);

send() 方法可以传入参数，如果是 GET 请求，可以将参数拼接到 URL 后面；如果是 POST 请求，需要将参数作为 send() 的参数传入。

④ 监听响应

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 处理响应数据
}
};

onreadystatechange 是 XMLHttpRequest 对象的一个属性，它会在请求状态发生改变时触发回调函数。readyState 表示请求的状态，有以下几个值：

0：未初始化，还没有调用 open() 方法

1：载入，已调用 send() 方法，正在发送请求

2：载入完成，send() 方法执行完成，已接收到全部响应数据

3：交互，正在解析响应数据

4：完成，响应数据解析完成，可以使用

status 表示服务器响应的状态码，200 表示成功，404 表示未找到资源，500 表示服务器内部错误等。

 

2. fetch API
fetch API 是 ES6 新增的一种网络请求方式，可以替代 XMLHttpRequest 对象。它的优点是更加简洁、易用，并且支持 Promise。
使用 fetch API 发送请求需要以下步骤：

① 发送请求

fetch(url, {

method: 'GET',

headers: {

'Content-Type': 'application/json'

}).then(response => {

// 处理响应数据

}).catch(error => {

console.error(error);

});

fetch() 方法接收两个参数，第一个参数是请求的 URL；第二个参数是一个对象，可以设置请求的方式、请求头等信息。
fetch() 方法返回一个 Promise 对象，可以通过 then() 方法处理响应数据，catch() 方法处理异常情况。

3. Axios

Axios 是一种基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它的优点是可以拦截请求和响应、支持并发请求等。
使用 Axios 发送请求需要以下步骤：

① 安装 Axios

npm install axios
② 发送请求
import axios from 'axios';
axios.get(url).then(response => {
Axios 提供了多种请求方式，如 get()、post()、put()、delete() 等。
Axios 也返回一个 Promise 对象，可以通过 then() 方法处理响应数据，catch() 方法处理异常情况。

AJAX 技术可以应用于多种场景，如：
1. 表单验证
在用户填写表单时，可以通过 AJAX 技术向服务器发送请求，实时验证用户输入的数据是否合法，避免用户提交后再返回错误信息。
2. 搜索框提示
在用户输入关键词时，可以通过 AJAX 技术向服务器发送请求，获取相关的搜索结果，并实时显示在页面上，提高搜索的效率。
3. 无限滚动
在用户滚动页面时，可以通过 AJAX 技术向服务器发送请求，获取更多的数据，并动态更新页面内容，实现无限滚动效果。
4. 购物车
在用户添加商品到购物车时，可以通过 AJAX 技术向服务器发送请求，将商品信息保存到购物车中，并实时更新购物车数量。
总之，AJAX 技术可以实现前后端的无感通信，提高用户体验，应用场景广泛。但是需要注意的是，过度使用 AJAX 技术可能会影响页面性能，需要合理使用。