AJAX：是指一种创建交互式网页应用的网页开发技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新.
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在AJAX 编程中被大量使用。
Ajax后端数据请求
下面这段代码实现了用jQuery调用AJAX方法对网易云搜索歌曲的后端数据请求，我们可以看到，需要提供给ajax的数据参数有：
url（必须）：规定把请求发送到哪个URL。data（可选）：映射或字符串值。规定连同请求发送到服务器的数据。dataType（可选）：规定预期的服务器响应数据类型。success()（可选）：请求成功时执行的回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<title>ajax</title>
</head>
<body>
<div id="app"></div>
<!-- AJAX对后端数据请求方法 -->
<script>
// let app = document.getElementById('app');
// let app = $('#app');
$.ajax({
url: 'https://autumnfish.cn/search',
method: 'GET',
data: {
keywords: '嘉宾',
},
dataType: 'JSON',
success: (res) => {
console.log(res);
}
})
</script>
</body>
</html>我们可以看到，用ajax方法只需要简单传递几个参数，就可以实现后端数据请求，那么ajax方法的原生js实现原理是什么呢？
原生JS后端数据请求
将上面的js代码替换如下：
<script>
// 创建请求实例对象
var myAjax = new XMLHttpRequest();
// 设置请求的url参数，这是做准备工作
myAjax.open('get', 'https://autumnfish.cn/search?keywords="嘉宾"');
// 发送请求
myAjax.send();
myAjax.onreadystatechange = function () {
if (myAjax.readyState === 4 && myAjax.status === 200) {
console.log(JSON.parse(myAjax.responseText));
}
}
</script>我们看到，原生js实现后端数据请求非常麻烦，我们需要的步骤有：
- 创建XMLHttpRequest对象
- 设置请求的url和请求方法
- 发送请求
- 定义当readyState 改变时，onreadystatechange 事件函数所执行的任务 看到这是不是感觉有些复杂呢，Ajax正是把上面长长的代码给封装起来，我们只需要传递所需要的参数就能实现上述功能。
现在让我们自己来封装一个类似的函数。
封装一个自己的AJAX方法
<!-- 自己定义一个对后端请求的方法 -->
<script>
function request(method, url, data, success) {
var ajax = new XMLHttpRequest();
if (method.toLowerCase() == 'get') {
if (data) {
// url += '?';
// url += data;
url = `${url + '?'}${data}`;
} else {
}
ajax.open(method, url);
ajax.send();
} else {//假设除了get 就是 post
}
ajax.onreadystatechange = function () {
if (ajax.readyState === 4 && ajax.status === 200) {
success(JSON.parse(ajax.responseText));
}
}
}
<!-- 调用自己定义的函数 -->
request('get', 'https://autumnfish.cn/search', 'keywords="Stay"', success);
function success(res) {
console.log(res);
}
</script>在这个我们自己定义的函数中，我们将所有执行代码都放入函数体中，我们只需要传递需要的参数，就能实现数据请求。