1、根据Jquery中ajax的方法封装，先创建一个js文件
// 对原生代码进行封装
// 传参，相当于 let 形参 = 实参;
/*
let { type, url, data, success } = {
type: 'POST',
url: 'http://www.itcbc.com:3006/api/addbook',
data: { bookname: 'ss', author: 'xx', publisher: 'uu', appkey: 'laotang' },
success: function (res) {
console.log(res);
}
}
*/
function ajax({ type, url, data, success }) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = xhr.responseText;
// res 是服务器返回的结果
success(res);
}
}
// 需要把传递进来的对象，转成字符串格式
let arr = [];
for (let key in data) {
// key 表示键：id | appkey | bookname
// data[key] 表示值： 1 | laotang | zs
arr.push(key + '=' + data[key]); // 'id=1'
}
let str = arr.join('&');
// 判断是什么请求方式
if (type === 'GET') {
xhr.open(type, url + '?' + str);
xhr.send();
} else if (type === 'POST') {
xhr.open(type, url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(str);
}
}2、创建html文件调用ajax方法
<body>
<script src="./js/index.js"></script>
<script>
// 因为 $.ajax() 就是这样用。所以我希望，我自己封装的函数，也这样用
// 所以用法如下：
ajax({
type: 'POST',
url: 'http://www.itcbc.com:3006/api/addbook',
data: { bookname: 'ss', author: 'xx', publisher: 'uu', appkey: 'laotang' },
success: function (x) {
console.log(x);
}
});
</script>
</body>
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
