相關學習推薦:#ajax
前面一篇文章講了ajax的原理,作用和實現。但都只是實作一個ajax請求回應操作,瀏覽器和伺服器之間請求回應不會只有一次,加入請求回應100次,那麼要寫100次近似的程式碼嗎?
這篇文章就是要解決如何傳送多個ajax的問題。如果你對ajax沒有了解,我的上一篇文章《認識ajax》用心看完,大約5分鐘就可以get到這篇文章內容。
這篇文章其實就是講了一個函數。接下來一起來看看吧。
發送多個請求的操作都是相同的,如果寫多個就會有重複的程式碼。避免程式碼冗餘就可以藉助函數的思想,將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封裝的最後版本。 終極版封裝解決了以下幾個問題。
這是終極版的程式碼,程式碼後面會有針對性的解釋。
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方法
這裡舉個程式碼,夠應付這篇文章,具體深入的還是看官方文件
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对象 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(); }复制代码
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函数要考虑到以下几点:
其他相关学习推荐:javascript
以上是認識Ajax的封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章!