jQuery进阶实践之利用最优雅的方式如何写ajax请求


Posted in jQuery onDecember 20, 2017

前言

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说,直接进入正题,jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的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 = /{{([^}]+)?}}/;
  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,有兴趣可以扩展其他的数据类型

[缺点]:没有对函数参数进行校验

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
jquery自定义显示消息数量
Dec 19 #jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
jquery中done和then的区别(详解)
Dec 19 #jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
You might like
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python找出完数的方法
2018/11/12 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
心得体会怎么写
2013/12/30 职场文书
高三语文教学反思
2014/01/15 职场文书
便利店促销方案
2014/02/20 职场文书
交通事故协议书
2014/04/15 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
离婚起诉状范本
2015/05/19 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL