释放双眼，带上耳机，听听看~！
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<button id="btn">点我发送ajax请求</button>
<script>
//自己封装的ajax请求函数
//自执行函数
(function (window) {
let bloglab = {
get: function (options) {
//a.创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//处理url
options.url += "?";
options.url += options.data;
//b.调用这个对象的open方法,设置请求方式和请求地址.
xhr.open("get", options.url);
//c.设置请求成功后的回调函数.
xhr.onload = function () {
//console.log(xhr.response);
//调用success
options.success(xhr.response); //调用success函数,传递的参数那就是实参
};
//d.调用这个对象的send方法,开始发送.
xhr.send();
},
post: function (options) {
//a.创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//b.调用这个对象的open方法,设置请求方式和请求地址.
xhr.open("post", options.url);
//c.设置请求头(固定的代码)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//d.设置请求成功后要执行的回调函数.
xhr.onload = function () {
// console.log(xhr.response);
//调用success回调函数
options.success(xhr.response); //传递的参数就是实参
};
//e.调用这个对象的send方法.
xhr.send(options.data);
},
//type, url,data,success
ajax: function (options) {
//a.创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//判断
if (options.type == "get") {
options.url += "?";
options.url += options.data;
}
//b.调用这个对象的open方法,设置请求方式和请求地址.
xhr.open(options.type, options.url);
//判断
if (options.type == 'post') {
//c.设置请求头(固定的代码)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
//d.设置请求成功后要执行的回调函数.
xhr.onload = function () {
//console.log(xhr.response);
options.success(xhr.response);
}
//e.调用这个对象的send方法.
//判断
if (options.type == 'get') {
xhr.send();
} else {
xhr.send(options.data);
}
},
};
//把bloglab这个对象交给window对象
window.bloglab = bloglab;
})(window);
</script>
<!-- 验证自己封装的ajax请求函数 -->
<script>
document.getElementById('btn').onclick = function () {
// bloglab.get();
// bloglab.post();
//验证我们自己写的ajax方法发送get请求
bloglab.ajax({
type: 'get',
url: 'https://autumnfish.cn/api/joke/list',
data: 'num=5',
success: function (backData) {
console.log(backData);
}
});
// 验证我们自己写的ajax方法发送post请求
bloglab.ajax({
type: 'post',
url: 'https://autumnfish.cn/api/user/check',
data: 'username=刘德华',
success: function (backData) {
console.log(backData);
}
});
// $.get();
// $.post();
// $.ajax();
}
</script>
</body>
</html>
内容投诉
哈哈哈
有bug
有啥bug?