【学习笔记】AJAX内容拓展
题记——近期回顾《javaScript高级程序设计》ajax章节,发现书中对封装一个ajax库并不完美,结合之前看到博客,对ajax库做一点点的优化。
参考博客:如何去封装一个ajax库
因为AJAX内容比较基础,关于AJAX的历史发展和实现优点可以自行查找资料。
简单来说
我们用AJAX建立动态网页有四条语句:
var xhr = new XMLHttpRequest; xhr.onreasystatechange = function () { if(xhr.readyState == 4 && xhr.status){ alert(xhr.responseText); }else { alert("Request was unsuccessful" + xhr.status) } } xhr.open("get","url",true); xhr.send(null);
AJAX的核心是XHMLHttpRequest,在使用之前应该检测浏览器的兼容问题,因为IE7+、Firefox、Chrome、Safari 以及 Opera均内建 XMLHttpRequest 对象,而IE5 和 IE6 使用 ActiveXObject。所以我们有必要进行判断,让所有浏览器都能正常渲染。
function createXHR() { var xhr = null; if (window.XMLHttpRequest) { //处理兼容 xhr = new XMLHttpRequest; } else { try { xhr = new ActiveXobject("Microsoft.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } } } return xhr; } var xhr = createXHR();
以上就是类似《js高级程序设计》的判断方法,但这样的话,每次创建xhr对象都会执行createXHR函数,每次都要在函数内部进行判断,由于第一次使用就知道了浏览器的支持类型,这样显然造成了不必要的系统开销。按照惰性思维,我们希望createXHR函数第一次执行的时候就把浏览器的支持类型返回,这样后面每次执行就没必要判断了。可以这么做:
function createXHR() { var xhr = null, flag = false, arr = [ function () { return new XMLHttpRequest; }, function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, function () { return new ActiveXObject("Msxm12.XMLHTTP"); } ]; for (var i = 0; i < arr.length; i++) { var curFn = arr[i]; try { xhr = curFn(); //本次循环获取的方法没有出现错误:说明此方法是我想要的,我们下一次直接执行这个方法即可,,这就需要我把createXHR重写为本次循环得到的方法(完成后不需要再判断下面的,直接退出循环即可) createXHR = curFn; flag = true; break; } catch (e) { //本次循环获取的方法执行时出现错误:继续执行下一次循环 } } if (!flag) { throw new Error("your browser is not support ajax,please change your browser,try again!"); } return xhr; } var xhr = createXHR();
现在我们可以正常使用xhr这个对象了,但是现在又有一个问题,每次使用AJAX都要编写那四条语句,显得很没有必要。程序员是低效、单调、重复工作的天敌,所以我们必须想一个办法将AJAX封装,以后直接调用这个方法:
function ajax(options) { var _default = { url : "", type : "get", dataType : "json", async : true, data : null, getHeaders : null, success : null } for (var key in options) { if (options.hasOwnProperty(key)) { _default[key] = options[key]; } } //如果当前的请求方式是GET,我们需要在URL的末尾添加随机数清除缓存 if (_default[type] === "get") { _deauult[url].indexOf("?") >= 0 ? _default[url] += "&" :_default[url] += "?"; _default[url] += "_=" + Math.random(); } var xhr = createXHR(); xhr.open(_default[type],_default[url],_default[async]); xhr.onreadystatechange = function () { if (/^2\d{2}$/.test(xhr.status)) { if (xhr.readyState === 2) { if (typeof(_default[getHeaders]) === "function") { _default[getHeaders].call(xhr); } } if (xhr.readyState == 4) { var val = xhr.responseText; if (_default.dataType === "json") { val = "JSON" in window ? JSON.parse(val) : eval("(" + val + ")"); } if (typeof(_default[success]) === "function") { _default[success].call(xhr,val); }; } } } xhr.send(_default[data]);//向请求主体传内容,但open方法中必须使用post请求方式 }
这就是一个AJAX请求的公共方法,把需要传递的参数值都放在对象options传递进去,再把参数options[key]赋给_default[key]。
PS:vue中经常会用到一个axios库,这个就是对ajax的封装方法,本人水平有限,有错误之处烦请指出
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:使用Catalyst进行自然语言处理
· 分享一个我遇到过的“量子力学”级别的BUG。
· Linux系列:如何调试 malloc 的底层源码
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 物流快递公司核心技术能力-海量大数据处理技术
· 几个技巧,教你去除文章的 AI 味!
· 系统高可用的 10 条军规
· 如何在 Github 上获得 1000 star?
· 关于普通程序员该如何参与AI学习的三个建议以及自己的实践