认识Ajax的封装
发布时间：09/01 来源：未知 浏览：
关键词：
前言
前面一篇文章讲了ajax的道理，作用和实现。但是都只是实现一个ajax恳求响应操纵，阅读器和效劳器之间恳求响应不会只要一次，参加恳求响应100次，那么要写100次近似的代码吗？
这篇文章就是解决怎样发送多个ajax的问题。假如你对ajax没有理解，我的上一篇文章《认识ajax》专心看完，大约5分钟就可以get到这篇文章内容。
这篇文章其实就是讲了一个函数。接下来一起来看看吧。
封装的思想
发送多个恳求的操纵都是雷同的，假如写多个就会有反复的代码。幸免代码冗余就可以借助函数的思想，将ajax操纵的代码封装到一个函数中，不一样的恳求函数传递的参数所有不一样。假如要屡次发送ajax恳求的时候，就调取我们封装好的函数就好了。
ajax函数封装的根本实现
前面说用函数封装ajax，那么ajax实现的四步放到函数中，然后调取这个函数，由于传递的参数比力多，所以参数用一个对象options来表示。这个对象里面包罗恳求方式，恳求地址，恳求发送成功后触发的恳求处置函数。
我么看看下面的例子。代码中将ajax操纵封装到ajax函数中，调取ajax函数，传入参数，xht下的onload事件触发后，调取了sunccess函数，将响应内容xhr.responsetext打印到操纵台中。
function ajax(options) {
var xhr = new XMLHttpRequest();
xhr.open(options.type, options.url);
xhr.send();
xhr.onload = function () {
options.success(xhr.responsetext);
}
}
ajax({
type: 'get',
url: 'http://www.example.com',
success: function (data) {
console.log(data);
}
})复制代码恳求参数的封装
上面代码实现了根本的封装，接下来讲一讲怎样对恳求参数停止封装，上一篇文章中介绍了post办法和get办法这两种办法发送恳求，不一样的恳求方式恳求参数也是放置在不一样的位置的，比方get办法拼接在url后，post办法放在send办法里面。我们在ajax办法的实参对象中加一个data属性，data属性值就是恳求参数。
在ajax这个函数中利用for-in轮回拼接恳求参数，将恳求参数余外的的&去除。后然对恳求类型做出推断，假如是get恳求就把刚刚拼接好的params拼接到url后面；假如是post恳求将参数放到send办法中，并使用xhr对象下的setRequestHeader办法设定恳求参数格局的类型。
代码如下：
var xhr = new XMLHttpRequest();
// 拼接恳求参数的变量
var params = '';
// 轮回会员传递进来的对象格局参数 for (var attr in options.data) {
// 将参数转换为字符串格局
params += attr + '=' + options.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果从新赋值给params变量
params = params.substr(0, params.length - 1);
// 推断恳求方式 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', contentType);
// 向效劳器端传递恳求参数
xhr.send(params);
}else {
// 发送恳求
xhr.send();
}
xhr.onload = function () {
options.success(xhr.responsetext);
}
ajax({
type: 'get',
url: 'http://www.example.com',
data: {
name:'linglong',
age:20
},
success: function (data) {
console.log(data);
}
})复制代码封装终极版
进过前面两个热身后直接看ajax封装的最后版本。 终极版封装解决了以下几个问题。
- 效劳器返回数据格局的处置
- 阅读器恳求参数格局的处置
- 状态码不是200调取失败函数
- 设定默许参数减少冗余
这是终极版的代码，代码后面会有针对性的说明。
剖析终极版代码：
设定默许参数减少冗余
- 在ajax函数中设定defaults参数对象。为什么在调取ajax函数的时候传入了参数还要再在函数里增加默许参数呢，说到底也是为了不代码冗余，假如创立多个ajax对象的话就会传入大概会雷同的参数，我们只在调取的时候传入特定的参数options，让options覆盖默许参数defaults。在函数内部使用defaults就可以完善的解决这个问题。Object.assign(defaults, options)方就是让defaults覆盖options。
var defaults = { type: 'get',
url: '',
data: {},
header: { 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);复制代码Object.assign办法
补充:Object.assign办法
这里举个代码，够应对这篇文章，详细深入的还是看官方文档
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }复制代码创立ajax对象，拼接恳求参数
// 创立ajax对象
var xhr = new XMLHttpRequest();
// 拼接恳求参数的变量
var params = '';
// 轮回会员传递进来的对象格局参数 for (var attr in defaults.data) {
// 将参数转换为字符串格局
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果从新赋值给params变量
params = params.substr(0, params.length - 1);复制代码阅读器恳求参数格局的处置
- 推断恳求方式是get适宜post。假如是get就将恳求参数拼接到恳求地址后面，再配置ajax对象，用send办法发送恳求；假如是post就先配置ajax对象，然后推断恳求参数的数据类型，假如是json类型就把数据类型转换成字符串处置，假如是application/x-www-form-urlencoded就直用send办法向效劳器传递一般恳求参数发送恳求。
if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 假如恳求方式为post if (defaults.type == 'post') {
// 会员但愿的向效劳器端传递的恳求参数的类型
var 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 {
// 发送恳求
xhr.send();
}复制代码效劳器返回数据格局的处置
4.当恳求发送成功，就会触发onload事件，施行函数。我们要对效劳器响应的数据停止格局推断，用getResponseHeader办法猎取响应头的数据，Content-Type是响应头的属性名称。假如响应头中包括application/json这个字符，就说明响应的是json对象，但是传输的时候是字符串情势传输，所以用json下的parse办法转字符串为对象。 假如http的状态码是200就说明客户端发来的恳求在效劳器端得到了准确的处置。调取success函数，不然调取错伏处置函数。
xhr.onload = function () {
// xhr.getResponseHeader()
// 猎取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 效劳器端返回的数据
var responseText = xhr.responseText;
// 假如响应类型中包括applicaition/json if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
// 当http状态码等于200的时候 if (xhr.status == 200) {
// 恳求成功 调取处置成功状况的函数
defaults.success(responseText, xhr);
}else {
// 恳求失败 调取处置失败状况的函数
defaults.error(responseText, xhr);
}
}
}复制代码完全的封装代码贴出来，如下所示：
<script type="text/javascript"> function ajax (options) {
// 储备的是默许值
var defaults = { type: 'get',
url: '',
data: {},
header: { 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
// 创立ajax对象
var xhr = new XMLHttpRequest();
// 拼接恳求参数的变量
var params = '';
// 轮回会员传递进来的对象格局参数 for (var attr in defaults.data) {
// 将参数转换为字符串格局
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果从新赋值给params变量
params = params.substr(0, params.length - 1);
// 推断恳求方式 if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 假如恳求方式为post if (defaults.type == 'post') {
// 会员但愿的向效劳器端传递的恳求参数的类型
var 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 {
// 发送恳求
xhr.send();
}
// 监听xhr对象下面的onload事件
// 当xhr对象接收完响应数据后触发
xhr.onload = function () {
// xhr.getResponseHeader()
// 猎取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 效劳器端返回的数据
var responseText = xhr.responseText;
// 假如响应类型中包括applicaition/json if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
// 当http状态码等于200的时候 if (xhr.status == 200) {
// 恳求成功 调取处置成功状况的函数
defaults.success(responseText, xhr);
}else {
// 恳求失败 调取处置失败状况的函数
defaults.error(responseText, xhr);
}
}
}
ajax({ type: 'post',
// 恳求地址
url: 'http://localhost:3000/responseData',
success: function (data) {
console.log('这里是success函数');
console.log(data)
}
})
</script>复制代码文章完毕
ok，到此封装ajax函数完毕，为什么要封装，减少使用多个ajax恳求的时候代码冗余。把代码用函数封装起来使用的时候调取函数就可。封装ajax函数要思考到以下几点：
- 恳求方式(get)，恳求参数要与地址拼接后放到open办法中。
- 恳求方式post，恳求参数类型是json数据类型，要将json转字符串后放到send办法中。
- 对效劳器响应处置时猎取响应头中的响应数据格局。
- 响应的格局是json对象，处置响应结果要将字符串转json对象。
- 设定ajax函数的默许参数减少代码冗余。
其他相关学习引荐：javascript
以上就是认识Ajax的封装的具体内容，更多请关注百分百源码网其它相关文章！
