認識Ajax的封裝
- coldplay.xixi轉載
- 2020-09-19 17:01:091819瀏覽
相關學習推薦：#ajax
前言
前面一篇文章講了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的封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：juejin.im。如有侵權，請聯絡admin@php.cn刪除