概述
Ajax（Asynchronous JavaScript And XML）即异步 JavaScript 和 XML，是一组用于在网页上进行异步数据交换的Web开发技术，可以在不刷新整个页面的情况下向服务器发起请求并获取数据，然后将数据插入到网页中的某个位置。这种技术能够实现增量式更新页面，提高用户交互体验，减少响应时间和带宽的消耗。
使用 Ajax 技术，可以通过 JavaScript 和 XMLHttpRequest 对象来向服务器获取数据。在Ajax请求的过程中，可以通过定义回调函数来对请求的结果进行处理，回调函数会在请求完成后执行，通过这种方式可以更新页面内容或者响应用户操作。
Ajax 可以用来实现以下功能：
- 异步更新页面内容（如搜索建议、聊天框等）
- 在页面中特定区域显示动态数据
- 提交表单数据而无需刷新整个页面
- 与服务器进行交互，不会导致页面跳转或刷新
Ajax 的主要优点包括：
- 提高用户体验：通过减少页面的重载和刷新，使得网站变得更加灵活和动态。
- 减轻服务器负载：通过使用 Ajax，可以有效减少服务器接收到的请求次数和需要响应的数据量，从而减轻服务器的负担。
- 提高响应速度：使用 Ajax 可以异步获取数据并更新页面，从而提高响应速度。
- 增加交互性：通过使用 Ajax，可以使得页面变得更加动态和交互性。
然而也需要注意一些问题：
- Ajax 对搜索引擎优化(Seo)劣势较大，对于需要SEO的项目需要谨慎选择使用Ajax技术。
- 在使用 Ajax 时，需要考虑数据安全性和网络安全性问题，并采取相应的措施加以防范。
- 不合适的使用 Ajax，可能会造成降低网站质量和效率的问题，所以需要根据实际需求来决定是否采用该技术。
文档
developer.mozilla.org/zh-CN/docs/…
核心API
1.需要创建xhr实例 通过 XMLHttpRequest 使用 XMLHttpRequest 可以通过 JavaScript 发起HTTP请求，接收来自服务器的响应，并动态地更新网页中的内容。这种异步通信方式不会阻塞用户界面，有利于增强用户体验。
2.我们需要使用 open() 方法打开一个请求，该方法会初始化一个请求，但并不会发送请求。它有三个必填参数以及一个可选参数
- method：请求的 HTTP 方法，例如 GET、POST 等。
- url：请求的 URL 地址。
- async：是否异步处理请求，默认为 true，即异步请求。
3.onreadystatechange 一个回调函数，在每次状态发生变化时被调用。
- readyState 0：未初始化，XMLHttpRequest 对象已经创建，但未调用 open 方法。
- readyState 1：已打开，open 方法已经被调用，但 send 方法未被调用。
- readyState 2：已发送，send 方法已经被调用，请求已经被服务器接收。
- readyState 3：正在接收，服务器正在处理请求并返回数据。
- readyState 4：完成，服务器已经完成了数据传输。
4.send 向后端传递参数 例如 xhe.send(params)
案例
发送一个get 请求
在 XMLHttpRequest 对象中，onload 事件是指在 AJAX 请求成功完成后所触发的事件。当异步请求成功返回响应时，该事件会被调用，可以在该事件中处理服务器返回的数据。
使用 XMLHttpRequest 对象时，在调用 send() 方法发送请求后，会监听readystatechange 事件，该事件会在请求过程中多次触发，它有多个状态，其中，当该对象 readyState 状态码值为4时表示已经获取到服务器的响应信息。但是只有当 HTTP 状态码为 200（OK）时，响应才是有效的。此时，你可以通过响应结果来更新页面，反之则应该进行错误处理。
使用 onload 事件可以更加直接地判断 AJAX 请求是否成功，只有在响应成功（即获得正确的 HTTP 状态码）时才会触发，并且无需判断服务器响应的状态码。可以在 onload 事件中处理服务器返回的数据，并根据需要更新网页内容。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/api/txt')
xhr.onload = function() {
if (xhr.status === 200) {
document.querySelector('#result').innerText = xhr.responseText;
}
else {
console.log('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send(null);
发送post 请求 json
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/api/post')
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
document.querySelector('#result').innerText = xhr.responseText;
}
else {
console.log('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send(JSON.stringify({name: 'zhangsan', age: 18}));
发送post 请求 application/x-www-form-urlencoded
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/api/post')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
document.querySelector('#result').innerText = xhr.responseText;
}
else {
console.log('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send('name=zhangsan&age=18');
上传图片 multipart/form-data
浏览器会自动设置请求头为 multipart/form-data
并且浏览器会自动添加 boundary 分割线
document.querySelector('#file').addEventListener('change', function () {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/api/upload')
xhr.onload = function () {
if (xhr.status === 200) {
document.querySelector('#result').innerText = xhr.responseText;
}
else {
console.log('Request failed. Returned status of ' + xhr.status);
}
};
let file = this.files[0];
let formData = new FormData();
formData.append('file', file);
xhr.send(formData);
});
中断请求 和 设置超时时间
中断请求只需要调用 xhr.abort(); 即可
并且会有一个中断的回调
xhr.addEventListener('abort', function (event) { console.log('我被中断了'); });超时时间可以设置timeout 参数
xhr.timeout = 3000;
同样有一个超时回调
xhr.addEventListener('timeout', function (event) { console.log('超时啦'); });获取进度
可以监听 progress
在监听器中，我们通过 event.loaded 和 event.total 属性获取已上传数据量和总数据量，并计算上传进度，最后将进度显示在页面上
xhr.addEventListener('progress', function (event) {
document.querySelector('#progress').innerText = `${(event.loaded / event.total * 100).toFixed(2)}%`;
});
