当我们需要使用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);
就可以在控制台中打印出用户填写的用户名和密码数据。