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

xhr.send( strData )

}

1.3、请求超时处理

网络服务异常或者接口异常的时候，请求发送出去没有响应，页面也不会做出任何反应，需要全局加一个超时处理，超出时间还没有返回时，自动结束请求，返回异常。

使用语法如下：

//设置时间为2s

xhr.timeout = 2000 ;

//超时回调

xhr.ontimeout = function(){

console.log(‘网络异常，稍后重试’)

}

1.4、错误处理

网络中断，请求无法发送到服务器时，需要对请求失败进行处理。使用onerror事件处理。

使用语法如下：

xhr.onerror = function(){

console.log(“网络异常，请检查网络”)

}

二、封装 ajax 代码

---

根据ajax的请求流程，封装代码如下：便于以后使用，建议收藏。

function ajax(option) {

// method, url, data, timeout, success, error

var xhr;

var str = data2str(option.data);

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}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) {

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。