您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

jQuery中用最优雅的方式写ajax请求

2024/12/8 21:05:06发布17次查看
ajax的核心是javascript对象xmlhttprequest。该对象在internet explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,xmlhttprequest使您可以使用javascript向服务器提出请求并处理响应,而不阻塞用户。本文我们就和大家分享如何用最优雅的方式写ajax请求。首先需要一个配置文件var api = {     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'         }     ] }
然后需要一个方法,把配置文件生成接口function wellapi(config){ var headers = {}; var api = function(){}; api.pt = api.prototype; var util = {     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'}      * @author   wdd      * @datetime 2017-03-13t19:42:58+0800      * @param    {[type]} tpl [description]      * @param    {[type]} data [description]      * @return   {[type]} [description]      */     render: function(tpl, data){         var re = /{{([^}]+)?}}/g;         var match = '';         while(match = re.exec(tpl)){             tpl = tpl.replace(match[0],data[match[1]]);         }         return tpl;     } }; /**  * [setheader 暴露设置头部信息的方法]  * 有些方法需要特定的头部信息,例如登录之后才能获取sesssionid,然后访问所有的接口时,必须携带sessionid  * 才可以访问  * @author   wdd  * @datetime 2017-03-13t10:34:03+0800  * @param    {[type]} headers [description]  */ api.pt.setheader = function(headers){     headers = headers; }; /**  * [fire 发送ajax请求,this会绑定到每个接口上]  * @author   wdd  * @datetime 2017-03-13t19:42:13+0800  * @param    {[type]} pathparm [description]  * @param    {[type]} payload [description]  * @return   {[type]} [description]  */ function fire(pathparm, payload){     var url = util.render(this.path, pathparm);     return util.ajax(url, this.method, payload); } /**  * [for 遍历所有接口]  * @author   wdd  * @datetime 2017-03-13t19:49:33+0800  * @param    {[type]} var i [description]  * @return   {[type]} [description]  */ for(var i=0; i < config.pathlist.length; i++){ api.pt[config.pathlist[i].name] = { path: config.basepath + config.pathlist[i].path, method: config.pathlist[i].method, fire: fire }; } return new api(); }
试用一下<!doctype html> <html> <head>     <meta charset="utf-8">     <title></title>     <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>     <script src="api.js"></script>     <script src="jquery-ajax.js"></script> </head> <body> <script type="text/javascript">     var saas = wellapi(api);     saas.agentheartbeat.fire({agentid: '5001@1011.cc'})     .done(function(res){         console.log('心跳成功');     })     .fail(function(res){         console.log('心跳失败');     }); </script> </body> </html>
优点与扩展[优点]:类似与promise的回调方式
[优点]:增加一个接口只是需要增加一个配置文件,很方便
[扩展]:当前的ajax 的contenttype我只写了json,有兴趣可以扩展其他的数据类型
[缺点]:没有对函数参数进行校验
以上内容就是如何用最优雅的方式写ajax请求的方法。希望能帮助到大家。
相关推荐:
php处理ajax请求与ajax跨域
javascript实现ajax请求步骤用法实例详解
如何实现jquery中ajax请求的用法详解
以上就是jquery中用最优雅的方式写ajax请求的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product