当我们需要使用Ajax异步请求数据时，如果使用原生Ajax，如果每次都需要调用，就会显得重复代码过多，浪费时间；或者可以引入jQuery库，但是这样做，如果不使用jQuery中的其他功能就会使资源浪费，所以一定情况下我们需要自己来封装一个Ajax，我们可以在使用时直接调用封装的函数或者引入js文件。
这里附上封装好的Ajax，假设记作文件myAjax.js：
function myAjax(paramsObj) {
if (paramsObj.type.toLowerCase() == 'get') {
const arr = [];
for (let i in paramsObj.data) {
let item = i + '=' + paramsObj.data[i];
arr.push(item);
}
const canshuStr = arr.join('&');
paramsObj.url +=
paramsObj.url.indexOf('?') == -1
? '?' + canshuStr
: '&' + canshuStr;
}else if (paramsObj.type.toLowerCase() == 'post') {
var formData = new FormData();
for (let i in paramsObj.data) {
formData.append(i, paramsObj.data[i]);
}
}else {
console.log('请求方式有误');
}
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
paramsObj.success(JSON.parse(xhr.responseText));
}
}
}
xhr.open(paramsObj.type, paramsObj.url, true);
if (paramsObj.type.toLowerCase() == 'get') {
xhr.send(null);
}else if (paramsObj.type.toLowerCase() == 'post') {
xhr.send(formData);
}else {
console.log('请求方式有误');
}
}
在使用时只需将文件引入，并且使用如下格式的myAjax()函数调用即可。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试封装的Ajax</title>A
<script src="myAjax.js"></script>
</head>
<body>
<input type="text" placeholder="请输入用户名">
<input type="text" placeholder="请输入密码">
<input type="button" value="提交">
<script>
let username = document.querySelectorAll('input')[0];
let password = document.querySelectorAll('input')[1];
let btn = document.querySelectorAll('input')[2];
btn.onclick = function() {
myAjax({
type: 'get',
url: 'myAjax.php',
data: {
username: username.value,
password: password.value
},
success: function(res) {
console.log(res);
}
})
}
</script>
</body>
</html>
在开启服务器的前提下，以上HTML文件传递的myAjax.php文件中只需要这样写：
<?php
$success = ['info'=>$_GET];
echo json_encode($success);
就可以在控制台中打印出用户填写的用户名和密码数据。
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
