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,有兴趣可以扩展其他的数据类型
[缺点]:没有对函数参数进行校验
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。