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>
在这个我们自己定义的函数中,我们将所有执行代码都放入函数体中,我们只需要传递需要的参数,就能实现数据请求。