封装自己的ajax函数
效果展示:
代码展示:
<!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">
<title>Document</title>
</head>
<body>
<script>
//定义一个将字符串转化为查询字符串
function solveData(data) {
//创建一个arr数组
var arr = [];
for (var k in data) {
arr.push(k + '=' + data[k]);
}
return arr.join('&');//将字符数组转化为字符串中间使用&拼接
}
//创建之间的ajax函数
function myfun(options) {
//创建一个xhr对象
var xhr = new XMLHttpRequest();
//将外界传过来的数据转化为查询字符串
var qs = solveData(options.data);
//请求方式的判断
if (options.method.toUpperCase() === 'GET') {
//发送get请求
xhr.open(options.method, options.url + "?" + qs);
xhr.send();
} else if (options.method.toUpperCase() === 'GET') {
//发送post请求
xhr.post(options.method, options.url);
//setRequestHeader
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//send()
xhr.send(qs);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
//代码运行到这里,get请求非常成功
//注意这里的responseText就是响应回来的数据
var res = JSON.parse(xhr.responseText);
options.success(res);
}
}
}
</script>
<script>
//函数调用
myfun({
method:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
data:{
id:1
},
success:function (res) {
console.log(res);
}
});
</script>
</body>
</html>
注意事项:
1,关于发送ajax请求的构成部分
$.ajax({
//参数配置
1,method: 请求方式,
2,url: 请求地址,
3,data:{
请求参数
},
4,success:function(res){
回调函数
}
})
2,怎么样将一个字符串转化为一个查询字符串
//定义一个将字符串转化为查询字符串
function solveData(data) {
//创建一个arr数组
var arr = [];
for (var k in data) {
arr.push(k + '=' + data[k]);
}
return arr.join('&');//将字符数组转化为字符串中间使用&拼接
}
3,怎么样进行ajax函数的封装
//创建之间的ajax函数
function myfun(options) {
//创建一个xhr对象
var xhr = new XMLHttpRequest();
//将外界传过来的数据转化为查询字符串
var qs = solveData(options.data);
//请求方式的判断
if (options.method.toUpperCase() === 'GET') {
//发送get请求
xhr.open(options.method, options.url + "?" + qs);
xhr.send();
} else if (options.method.toUpperCase() === 'GET') {
//发送post请求
xhr.post(options.method, options.url);
//setRequestHeader
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//send()
xhr.send(qs);
}
注意:toUpperCase();函数的运用。
注意:
parse(),stringify();
//将json转化为js对象
var str = JSON.parse('{"name":"zs"}');
console.log(str);
//将一个js对象转化为json
var str2 = JSON.stringify(str);
console.log(str2);
4,console.log(xhr.responseText);可以拿到xhr请求回来的数据。
5,注意get()和post(请求区别:
get(): 在open阶段接受查询字符串进行具体操作,send阶段不做任何操作。
post(): 在open阶段不传入查询字符串,在send阶段传入查询字符串。