先定一个小目标,自己封装个ajax
解析参数数据
getData: function(){varname, value;if(opts.data) {if (typeof opts.data === "string") {opts.data= opts.data.split("&");for (var i = 0, len = opts.data.length; i < len; i++) {name= opts.data[i].split("=")[0];value= opts.data[i].split("=")[1];opts.data[i]= encodeURIComponent(name) + "=" +encodeURIComponent(value);}opts.data= opts.data.replace("/%20/g", "+");}else if (typeof opts.data === "object") {var arr =[];for (var name inopts.data) {var value =opts.data[name].toString();name=encodeURIComponent(name);value=encodeURIComponent(value);arr.push(name+ "=" +value);}opts.data= arr.join("&").replace("/%20/g", "+");}//使用GET方法或JSONP,则手动添加到URL中if (opts.type === "GET" || opts.dataType === "jsonp") {opts.url+= opts.url.indexOf("?") > -1 ? opts.data : "?" +opts.data;}}},
创建jsonp
createJsonp: function(){var script = document.createElement("script"),timeName= new Date().getTime() + Math.round(Math.random() * 1000),callback= "jsonp_" +name;window[callback]= function(data) {clearTimeout(ajax.options.timeoutFlag);document.body.removeChild(script);try{data&& (data =JSON.parse(data));}catch(e) {console.error('ajax error for json parse responseText');} ajax.success(data);}script.src= url + (url.indexOf("?") > -1 ? "" : "?") + "callback=" +callback;script.type= "text/javascript";document.body.appendChild(script);ajax.timeout(callback, script);},
创建XHR
createXHR: function(){//创建对象xhr =ajax.getXHR();xhr.open(opts.type, opts.url, opts.async);//设置请求头if (opts.type === "POST" && !opts.contentType) {//若是post提交,则设置content-Type 为application/x-www-four-urlencodedxhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");}else if(opts.contentType) {xhr.setRequestHeader("Content-Type", opts.contentType);}//添加监听xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (opts.timeout !==undefined) {//由于执行abort()方法后,有可能触发onreadystatechange事件,所以设置一个ajax.options.timeoutBool标识,来忽略中止触发的事件。if(ajax.options.timeoutBool) {return;}clearTimeout(ajax.options.timeoutFlag);}if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {var responseText =xhr.responseText;try{xhr.responseText&& (responseText =JSON.parse(responseText));opts.success(responseText);}catch(e) {console.error('ajax error for json parse responseText');//opts.error(xhr); } }else{opts.error(xhr);}}};//发送请求xhr.send(opts.type === "GET" ? null: opts.data);ajax.timeout();//请求超时}
兼容IE6
getXHR: function(){if(window.XMLHttpRequest) {return newXMLHttpRequest();}else{//遍历IE中不同版本的ActiveX对象var versions = ["Microsoft", "msxm3", "msxml2", "msxml1"];for (var i = 0; i < versions.length; i++) {try{var version = versions[i] + ".XMLHTTP";return newActiveXObject(version);}catch(e) {console.log('error ajax',e)}}}}
设置请求超时
前面我定义了一个全局的属性timeoutFlag,这里通过settimeout延时函数给它赋值。如果是jsonp,则移除原来追加的script标签,否则通过全局的xhr条用abort()方法终止正在发送的请求!
timeout: function(callback, script){if (opts.timeout !==undefined) {ajax.options.timeoutFlag= setTimeout(function() {if (opts.dataType === "jsonp") {deletewindow[callback];document.body.removeChild(script);}else{ajax.options.timeoutBool= true;xhr&&xhr.abort();}}, opts.timeout);}},
全局变量
var defaultOpts ={url:'', //ajax 请求地址type : 'GET', //请求的方法,默认为GETdata : null, //请求的数据contentType : '',//请求头dataType : 'json', //请求的类型,默认为jsonasync : true, //是否异步,默认为truetimeout: 5000, //超时时间,默认5秒钟before : function() {console.log('before')},//发送之前执行的函数error: function() {console.log('error')},//错误执行的函数success: function() {console.log('success')}//请求成功的回调函数 }for (i indefaultOpts) {if (opts[i] ===undefined) {opts[i]=defaultOpts[i];}}var xhr = null;options: {timeoutFlag:null, //超时标识timeoutBool: false //是否请求超时},
初始化调用
init: function(){opts.before();ajax.getData();opts.dataType=== "jsonp" ?ajax.createJsonp() : ajax.createXHR();},ajax.init();
设置AMD等规范
//AMD && CMDif(typeof define === 'function'){define(function(){returnli;});//CommonJS}else if(typeof module !== "undefined" && module !== null){module.exports=li;//window}else{window.li=li;}
调用示例
结果
转载于:https://www.cnblogs.com/liliangel/p/6163994.html
先定一个小目标,自己封装个ajax相关推荐
- Java学习|先定一个小目标比如让行为聚焦
2019独角兽企业重金招聘Python工程师标准>>> 版权声明:本文为北京尚学堂原创文章,未经允许不得转载. 如果你想达成一个结果,而且保持效率和质量,就必须让自己行为聚焦到一点 ...
- 【科技百咖】人大金仓:先定一个小目标,比如做中国No.1的数据库
自身的强大内力才是制胜一切的关键 自中美贸易摩擦开始,国内就悄然兴起了一股「王牌热」,大家纷纷在各个角度寻找中国制胜美国的各种「王牌」.但在人大金仓总裁杜胜的心中,真正的王牌还是「内力」,自身的强大内 ...
- 【先定一个小目标】数据挖掘学习进度总结
1 数据可视化 pandas df.head() 看前几行 df.value_counts() 看总体分布 df.info()/df.describe() 看缺失值.整体情况 df.plot(kind ...
- 关于“先定一个小目标,比如挣它一个亿”
王健林有一次在采访里说过这句话"先定一个小目标,比如挣它一个亿" 这句话的确挺有意思,起初我只是把它当作段子来看的. 最近在学习python,我发现学习的这个过程,也需要有明确的目 ...
- 先定一个小目标:10天自学C语言编程,教你如何改变一生
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...
- 吴云坤:先定一个小目标,让网络安全具有智能
前言 忽如一夜春风来!本周有一个王健林的采访视频刷爆了朋友圈,无独有偶,他谈小目标的话音还未落,同一天360网神集团总裁吴云坤,也定了一个小目标,一个能达到的小目标:"让网络安全具有智能&q ...
- Redola.Rpc 的一个小目标:20000 tps
Redola.Rpc 的一个小目标 Redola.Rpc 的一个小目标:20000 tps. Concurrency level: 8 threadsComplete requests: 20000 ...
- 2019,先定个小目标
说来惭愧自己一直没有写文章定目标这些一类的习惯,只是偶尔会想起应该办这件事了自己就会去做,然而坚持不了多久就放弃了.别人问我我的目标是什么或者我想要什么的时候,我也一概不知道,不知道自己到底在追求什么 ...
- 养成一个习惯有多难?不如先从一个小目标开始
导读:你有什么想要达成的习惯吗?例如坚持一个月读一本书.坚持锻炼维持身材? 达成习惯,需要制定一个明确的可达成的目标,从一个小目标开始,循序渐进.如果你想要达成的习惯是,每天坚持阅读,不断输入新知识. ...
最新文章
- android studio 同类,让Android Studio的Project视图和Anroid视图类似
- linux 查找 jdk 安装路径
- Rails的作者DHH获奖:Winning Google/O'Reilly's Best Hacker of '05
- AndroidStudio中使用XML和Java代码混合控制UI界面实现QQ相册照片列表页面
- win10 WSL windows subsystem for linux update setup wizard ended prematurely
- C语言字符串中删除重复的字符的算法(附完整源码)
- java空间租用_java影片租赁平台
- asp.net怎么生成json数据_mysql数据库配置文件不知道怎么配置?用这个工具一键生成...
- Spring aop优雅实现redis分布式锁 aop应用redis分布式锁
- H265编码等级以及图像的基础知识
- struts 的action 线性安全问题
- eslint解决方案整理
- PSO算法及其对函数优化问题的处理+PSO算法改进
- 详解Unity中的粒子系统Particle System (七)
- VPP DPDK,不是翻墙!!
- 选择java版本_新手上路之如何选择Java版本
- 基于双参数蜜蜂算法解决车辆路径问题(Matlab代码实现)
- 五分钟you-get入门
- 数据指标体系之战略指标
- “数据产品”是怎样的存在?