Ajax函数的封装
Ajax函数的封装
看Ajax的封装之前我们先看看!没有封装的实现步骤吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>## Ajax的实现步骤</br> -->
<h1>测试页面!</h1>
<button id="btn">Ajax错误处理</button>
<script type="text/javascript">
let btn = document.getElementById('btn');
btn.onclick = function() {
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 告诉Ajax请求地址及其方式
xhr.open('GET', 'https://v1.alapi.cn/api/music/search?keyword=东京塔子');
// 3 发送请求 post请求要把请求参数放在请求体里面偶!
xhr.send();
// 获取服务器端响应给客户端的数据、
xhr.onload = function() {
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
你看,我们才写一个请求就有那么多的代码了!要是有十几二十几个请求,那不是会把人写疯掉?!就像回调地狱的问题一样!
Ajax封装
问题:发送次请求代码过多,发送多次请求代码冗余且重复。
解决方案:将请求代码封装到函数中,发请求时调用函数即可。
第一版封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>## Ajax的实现步骤</br> -->
<h1>测试页面!</h1>
<button id="btn">Ajax错误处理</button>
<script type="text/javascript">
let btn = document.getElementById('btn');
btn.onclick = function() {
function ajax(options) {
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 告诉Ajax请求地址及其方式
xhr.open(options.type, options.url);
// 3 发送请求 post请求要把请求参数放在请求体里面偶!
xhr.send();
// 4 获取服务器端响应给客户端的数据[也就是监听onload事件!]
xhr.onload = function() {
console.log(xhr.responseText);
options.success(xhr.responseText);
}
}
ajax({
type: 'get',
url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
success: function(data) {
console.log("这是封装的响应结果" + data)
}
})
}
</script>
</body>
</html>
最终效果:
第二版封装【对Ajax封装进一步的扩展】
我想在发送请求的时候向服务器传递一些参数,怎么实现?!现在只考虑get请求的情况!
请求参数要考虑的问题
1.请求参数位置的问题
将请求参数传递到ajax函数内部,在函数内部根据请求方式的不同将请求参数放置在不同的位置
get放在请求地址的后面
post放在send方法中
2.请求参数格式的问题
application/ X-WWw - form-urlencoded
参数名称=参数值&参数名称=参数值
name=lvhang&age=23
application/json
{ name :'zhangsan',age: 20}
1.传递对象数据类型对于函数的调用者更加友好
2.在函数内部对象数据类型转换为字符串数据类型更加方便
get请求:
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>## Ajax的实现步骤</br> -->
<h1>测试页面!</h1>
<button id="btn">Ajax错误处理</button>
<script type="text/javascript">
let btn = document.getElementById('btn');
btn.onclick = function() {
function ajax(options) {
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 拼接请求参数变量
let params = '';
for (let attr in options.data) {
params += attr + '=' + options.data[attr] + '&';
}
// 对字符串进行截取
// 将参数最后面的 & 截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// console.log(params)
/**
* {
* name: 'lvhang',
* age: 23
* }
*/
// 判断请求方式
if (options.type == 'get') {
options.url = options.url + '?' + params;
}
// 告诉Ajax请求地址及其方式
xhr.open(options.type, options.url);
// 如果请求方式为post
if (options.type == 'post') {
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);
} else {
// 3 发送请求 post请求要把请求参数放在请求体里面偶!
xhr.send();
}
// 4 获取服务器端响应给客户端的数据[也就是监听onload事件!]
xhr.onload = function() {
console.log(xhr.responseText);
options.success(xhr.responseText);
}
}
ajax({
type: 'get',
data: {
name: 'lvhang',
age: 23
},
url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
success: function(data) {
console.log("这是封装的响应结果" + data)
}
})
}
</script>
</body>
</html>
post请求
html文件改动点:
最终效果:
第三版封装
【其实代码还是有问题的,就是设置参数的请求格式我们是把它写成了固定的,那如果客户端的人想要传递json数据格式该怎么办呢?! 这个应该由调用函数的人传递进来,然后我们在函数内部进行处理】
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>## Ajax的实现步骤</br> -->
<h1>测试页面!</h1>
<button id="btn">Ajax错误处理</button>
<script type="text/javascript">
let btn = document.getElementById('btn');
btn.onclick = function() {
function ajax(options) {
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 拼接请求参数变量
let params = '';
for (let attr in options.data) {
params += attr + '=' + options.data[attr] + '&';
}
// 对字符串进行截取
// 将参数最后面的 & 截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// console.log(params)
/**
* {
* name: 'lvhang',
* age: 23
* }
*/
// 判断请求方式
if (options.type == 'get') {
options.url = options.url + '?' + params;
}
// 告诉Ajax请求地址及其方式
xhr.open(options.type, options.url);
// 如果请求方式为post
if (options.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
let contentType = options.header['Content-Type'];
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(options.data));
} else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
xhr.send(params);
} else {
// 3 发送请求 post请求要把请求参数放在请求体里面偶!
xhr.send();
}
// 4 获取服务器端响应给客户端的数据[也就是监听onload事件!]
xhr.onload = function() {
console.log(xhr.responseText);
options.success(xhr.responseText);
}
}
ajax({
type: 'post',
data: {
name: 'lvhang',
age: 23
},
header: {
'Content-Type': 'application/json'
},
url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
success: function(data) {
console.log("这是封装的响应结果" + data)
}
})
}
</script>
</body>
</html>
最终效果:
第四版封装
【请求成功之后的代码:请求成功之后返回的状态码有可能是非200的状态码呢!所以要判断成功还有失败的情况!】
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>## Ajax的实现步骤</br> -->
<h1>测试页面!</h1>
<button id="btn">Ajax错误处理</button>
<script type="text/javascript">
let btn = document.getElementById('btn');
btn.onclick = function() {
function ajax(options) {
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 拼接请求参数变量
let params = '';
for (let attr in options.data) {
params += attr + '=' + options.data[attr] + '&';
}
// 对字符串进行截取
// 将参数最后面的 & 截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// console.log(params)
/**
* {
* name: 'lvhang',
* age: 23
* }
*/
// 判断请求方式
if (options.type == 'get') {
options.url = options.url + '?' + params;
}
// 告诉Ajax请求地址及其方式
xhr.open(options.type, options.url);
// 如果请求方式为post
if (options.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
let contentType = options.header['Content-Type'];
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(options.data));
} else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
} else {
// 3 发送请求 post请求要把请求参数放在请求体里面偶!
xhr.send();
}
// 4 获取服务器端响应给客户端的数据[也就是监听onload事件!]
xhr.onload = function() {
if (xhr.status == 200) {
// 请求成功调用处理成功情况的函数
options.success(xhr.responseText);
} else {
// 请求失败调用处理失败情况的函数
options.error(xhr.responseText, xhr);
}
}
}
ajax({
type: 'post',
data: {
name: 'lvhang',
age: 23
},
header: {
'Content-Type': 'application/json'
},
url: 'https://v1.alapi.cn/api/mus2ic/search?keyword=东京塔子',
success: function(data) {
console.log("这是封装的响应结果" + data)
},
error: function(data, xhr) {
console.log('恭喜您收到了一个非200的状态码' + data);
console.log(xhr);
}
})
}
</script>
</body>
</html>
第五版封装
【接下来我们把注意力放在服务端返回的结果上!,我们客户端需要的信息是对象,但是服务器返回的是json字符串,你可能会说用JSON.parse()啊!对,你说的没错!但是你怎么知道返回的就是json字符串呢?!】
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>## Ajax的实现步骤</br> -->
<h1>测试页面!</h1>
<button id="btn">Ajax错误处理</button>
<script type="text/javascript">
let btn = document.getElementById('btn');
btn.onclick = function() {
function ajax(options) {
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 拼接请求参数变量
let params = '';
for (let attr in options.data) {
params += attr + '=' + options.data[attr] + '&';
}
// 对字符串进行截取
// 将参数最后面的 & 截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// console.log(params)
/**
* {
* name: 'lvhang',
* age: 23
* }
*/
// 判断请求方式
if (options.type == 'get') {
options.url = options.url + '?' + params;
}
// 告诉Ajax请求地址及其方式
xhr.open(options.type, options.url);
// 如果请求方式为post
if (options.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
let contentType = options.header['Content-Type'];
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(options.data));
} else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
} else {
// 3 发送请求 post请求要把请求参数放在请求体里面偶!
xhr.send();
}
// 4 获取服务器端响应给客户端的数据[也就是监听onload事件!]
xhr.onload = function() {
// xhr.getResponseHeader()
// 获取响应头中的数据!
// 根据你请求方式不同而返回不一样的结果!
let contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
let responseText = xhr.responseText;
// 如果响应类型中包含json
if (contentType.includes('application/json')) {
// console.log('包含');
// console.log(JSON.parse(responseText));
//将json字符串转换为json对象
responseText = JSON.parse(responseText);
} else {
}
if (xhr.status == 200) {
// 请求成功调用处理成功情况的函数
options.success(responseText);
} else {
// 请求失败调用处理失败情况的函数
options.error(responseText, xhr);
}
}
}
ajax({
type: 'post',
data: {
name: 'lvhang',
age: 23
},
header: {
'Content-Type': 'application/json'
},
url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
success: function(data) {
console.log("这是封装的响应结果" + data);
console.log(data);
},
error: function(data, xhr) {
console.log('恭喜您收到了一个非200的状态码' + data);
console.log(xhr);
}
})
}
</script>
</body>
</html>
封装最终版
【其实我们已经封装得差不多了!但是还有一个问题,我们在调用Ajax函数的时候传递了非常多的参数, 如果每次调用AJax函数都需要调用这么多参数的话也是很不方便的!】[目标:只需要传递一些必要的参数进去就行了例如:请求地址、请求中的回调函数等!没有传递请求的话就使用默认值!就像请求参数的类型:没有传递就使用传统的字符串拼接的方式,如果传递的是json字符串的形式,那么请求参数类型就设置为application/json]
html代码未修改前:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>## Ajax的实现步骤</br> -->
<h1>测试页面!</h1>
<button id="btn">Ajax错误处理</button>
<script type="text/javascript">
let btn = document.getElementById('btn');
btn.onclick = function() {
function ajax(options) {
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 拼接请求参数变量
let params = '';
for (let attr in options.data) {
params += attr + '=' + options.data[attr] + '&';
}
// 对字符串进行截取
// 将参数最后面的 & 截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// console.log(params)
/**
* {
* name: 'lvhang',
* age: 23
* }
*/
// 判断请求方式
if (options.type == 'get') {
options.url = options.url + '?' + params;
}
// 告诉Ajax请求地址及其方式
xhr.open(options.type, options.url);
// 如果请求方式为post
if (options.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
let contentType = options.header['Content-Type'];
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(options.data));
} else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
} else {
// 3 发送请求 post请求要把请求参数放在请求体里面偶!
xhr.send();
}
// 4 获取服务器端响应给客户端的数据[也就是监听onload事件!]
xhr.onload = function() {
// xhr.getResponseHeader()
// 获取响应头中的数据!
// 根据你请求方式不同而返回不一样的结果!
let contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
let responseText = xhr.responseText;
// 如果响应类型中包含json
if (contentType.includes('application/json')) {
// console.log('包含');
// console.log(JSON.parse(responseText));
//将json字符串转换为json对象
responseText = JSON.parse(responseText);
} else {
}
if (xhr.status == 200) {
// 请求成功调用处理成功情况的函数
options.success(responseText);
} else {
// 请求失败调用处理失败情况的函数
options.error(responseText, xhr);
}
}
}
ajax({
type: 'post',
data: {
name: 'lvhang',
age: 23
},
header: {
'Content-Type': 'application/json'
},
url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
success: function(data) {
console.log("这是封装的响应结果" + data);
console.log(data);
},
error: function(data, xhr) {
console.log('恭喜您收到了一个非200的状态码' + data);
console.log(xhr);
}
})
}
</script>
</body>
</html>
html代码修改后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>## Ajax的实现步骤</br> -->
<h1>测试页面!</h1>
<button id="btn">Ajax错误处理</button>
<script type="text/javascript">
let btn = document.getElementById('btn');
btn.onclick = function() {
function ajax(options) {
let defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function() {},
error: function() {}
}
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 拼接请求参数变量
let params = '';
for (let attr in defaults.data) {
params += attr + '=' + defaults.data[attr] + '&';
}
// 对字符串进行截取
// 将参数最后面的 & 截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// console.log(params)
/**
* {
* name: 'lvhang',
* age: 23
* }
*/
// 判断请求方式
if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 告诉Ajax请求地址及其方式
xhr.open(defaults.type, defaults.url);
// 如果请求方式为post
if (defaults.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
let contentType = defaults.header['Content-Type'];
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(defaults.data));
} else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
} else {
// 3 发送请求 post请求要把请求参数放在请求体里面偶!
xhr.send();
}
// 4 获取服务器端响应给客户端的数据[也就是监听onload事件!]
xhr.onload = function() {
// xhr.getResponseHeader()
// 获取响应头中的数据!
// 根据你请求方式不同而返回不一样的结果!
let contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
let responseText = xhr.responseText;
// 如果响应类型中包含json
if (contentType.includes('application/json')) {
// console.log('包含');
// console.log(JSON.parse(responseText));
//将json字符串转换为json对象
responseText = JSON.parse(responseText);
} else {
}
if (xhr.status == 200) {
// 请求成功调用处理成功情况的函数
defaults.success(responseText);
} else {
// 请求失败调用处理失败情况的函数
defaults.error(responseText, xhr);
}
}
}
ajax({
url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
success: function(data) {
console.log("这是封装的响应结果" + data);
console.log(data);
}
})
}
</script>
</body>
</html>
看请求同样能够发送出去!
本文来自博客园,作者:{lvhanghmm},转载请注明原文链接:https://www.cnblogs.com/lvhanghmm/p/14248734.html