前后端数据交互(三)——ajax 封装及调用

2023-05-30 0 376

有许多架构早已将 ajax PCB,须要的这时候只须要初始化就好,比如说 jquery 是最常见的。他们为何还须要自学 ajax 的PCB呢?具体来说强化他们对ajax的重新认识,其二假如而已即使ajax允诺须要导入架构,他们能他们PCB两个,这种就不须要导入累赘的架构了。

一、PCB的特别注意点

PCB是为的是把完全相同的部份都同时实现房屋建筑,节约天然资源,提升标识符F83E43Se性,管理效率也高,因此须要把相同的模块该事件类别等透过初始化的这时候传至,需要特别注意Kendujhar:

1.1、传参

推送 ajax 允诺时,主要模块有:

允诺url允诺类别允诺模块获得成功反弹失利反弹延时天数

以内五个模块要增设成静态传至的,易于掌控任一 ajax 允诺。延时天数能标准化增设,假如做为传参能更方便快捷地掌控任一两个允诺延时。

1.2、允诺类别依次处置

允诺类别有 get 和 post 三种,get类别fork的这时候,统计数据跟在url门牌号后,postfork时在允诺胃部随身携带,还需增设允诺统计数据类别。因此须要推论依次处置。

if(type == GET){ xhr.open( GET , url+?+strData , true ) shr.send() }else{ xhr.open(POST,url,true)xhr.setRequestHeader(content-type,application/x-www-form-urlencoded) xhr.send( strData ) }

1.3、允诺延时处置

网络服务异常或者接口异常的这时候,允诺推送出去没有响应,页面也不会做出任何反应,须要全局加两个延时处置,超出天数还没有返回时,自动结束允诺,返回异常。

使用语法如下:

//增设天数为2s xhr.timeout = 2000 ; //延时反弹 xhr.ontimeout = function(){ console.log(网络异常,稍后重试) }

1.4、错误处置

网络中断,允诺无法推送到服务器时,须要对允诺失利进行处置。使用onerror该事件处置。

使用语法如下:

xhr.onerror = function(){ console.log(“网络异常,请检查网络”) }

二、PCB ajax 标识符

根据ajax的允诺流程,PCB标识符如下:易于以后使用,建议收藏。

function ajax(option) { // method, url, data, timeout, success, error var xhr; var str = data2str(option.data); if (window.XMLHttpRequest) { xhr = newXMLHttpRequest(); }else { xhr = new ActiveXObject(“Microsoft.XMLHTTP”); } if (option.type.toLowerCase() === post) { xhr.open(option.type, option.url,true); xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); xhr.send(str); } else if (option.type.toLowerCase() === get) { xhr.open(option.type, option.url +? + str, true); xhr.send(); } xhr.onreadystatechange = function(){ if (xhr.readyState === 4) { clearTimeout(timer); if (xhr.status >= 200 && xhr.status < 300 || xhr === 304) { option.success(xhr); }else { option.error(xhr); } } }; if(option.timeout) {var timer = setTimeout(function () { xhr.abort(); clearTimeout(timer); }, option.timeout) } }// 将对象转化成用于传输的字符串 function data2str(data) { var res = []; data.t = new Date().getTime(); for (var key in data) { res.push(encodeURIComponent(key) + = + encodeURIComponent(data[key])); } return res.join(&); }

使用的这时候初始化标识符如下:

ajax({ method:GET, url:1.txt, data:{ //允诺统计数据 }, timeout:2000, success:(res)=>{ console.log(获得成功返回,res.response) }, error: err => { console.log(错误信息,err) } })

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务