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卸载全部事件的思路详解
Apr 03 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
如何在vue 中引入使用jquery
Nov 10 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
用PHP4访问Oracle815
2006/10/09 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python多进程共享变量
2016/04/06 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
如何在python中写hive脚本
2019/11/08 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python如何写try语句
2020/07/14 Python
python logging模块的使用
2020/09/07 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
给面试官的感谢信
2014/02/01 职场文书
个人简历自我评价
2014/02/02 职场文书
租房协议书范例
2014/10/14 职场文书
西游记读书笔记
2015/06/25 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
导游词之西安骊山
2019/12/20 职场文书
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers