jQuery进阶实践之利用最优雅的方式如何写ajax请求
前言
jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说，直接进入正题，jQuery的ajax方法非常好用，这么好的东西，你想拥有一个属于自己的ajax么？接下来，我们来自己做一个简单的ajax吧。
首先需要一个配置文件
varapi={
basePath:'http://192.168.200.226:58080',
pathList:[
{
name:'agentHeartBeat',
path:'/api/csta/agent/heartbeat/{{agentId}}',
method:'post'
},
{
name:'setAgentState',
path:'/api/csta/agent/state',
method:'post'
},
{
name:'getAgents',
path:'/user/agent/{{query}}',
method:'get'
}
]
}
然后需要一个方法，把配置文件生成接口
functionWellApi(Config){
varheaders={};
varApi=function(){};
Api.pt=Api.prototype;
varutil={
ajax:function(url,method,payload){
return$.ajax({
url:url,
type:method||"get",
data:JSON.stringify(payload),
headers:headers,
dataType:"json",
contentType:'application/json;charset=UTF-8'
});
},
/**
*[render模板渲染]
*主要用于将/users/{{userId}}和{userId:'89898'}转换成/users/89898，和mastache语法差不多，
*当然我们没必要为了这么小的一个功能来引入一个模板库
*query字符串可以当做一个参数传递进来
*例如：/users/{{query}}和{query:'?name=jisika&sex=1'}
*@AuthorWdd
*@DateTime2017-03-13T19:42:58+0800
*@param{[type]}tpl[description]
*@param{[type]}data[description]
*@return{[type]}[description]
*/
render:function(tpl,data){
varre=/{{([^}]+)?}}/;
varmatch='';
while(match=re.exec(tpl)){
tpl=tpl.replace(match[0],data[match[1]]);
}
returntpl;
}
};
/**
*[setHeader暴露设置头部信息的方法]
*有些方法需要特定的头部信息，例如登录之后才能获取sesssionId,然后访问所有的接口时，必须携带sessionId
*才可以访问
*@AuthorWdd
*@DateTime2017-03-13T10:34:03+0800
*@param{[type]}headers[description]
*/
Api.pt.setHeader=function(headers){
headers=headers;
};
/**
*[fire发送ajax请求，this会绑定到每个接口上]
*@AuthorWdd
*@DateTime2017-03-13T19:42:13+0800
*@param{[type]}pathParm[description]
*@param{[type]}payload[description]
*@return{[type]}[description]
*/
functionfire(pathParm,payload){
varurl=util.render(this.path,pathParm);
returnutil.ajax(url,this.method,payload);
}
/**
*[for遍历所有接口]
*@AuthorWdd
*@DateTime2017-03-13T19:49:33+0800
*@param{[type]}vari[description]
*@return{[type]}[description]
*/
for(vari=0;i
试用一下
varsaas=WellApi(api);
saas.agentHeartBeat.fire({agentId:'5001@1011.cc'})
.done(function(res){
console.log('心跳成功');
})
.fail(function(res){
console.log('心跳失败');
});
优点与扩展
[优点]：类似与promise的回调方式
[优点]：增加一个接口只是需要增加一个配置文件，很方便
[扩展]：当前的ajax的contentType我只写了json，有兴趣可以扩展其他的数据类型
[缺点]：没有对函数参数进行校验
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。