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

网络编程 2021-07-04 17:33www.168986.cn编程入门

ajax请求相信对大家来说都不陌生，狼蚁网站SEO优化这篇文章主要介绍了jQuery进阶实践之利用最优雅的方式如何写ajax请求的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧。

前言

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./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.'})
  .done(function(res){
    console.log('心跳成功');
  })
  .fail(function(res){
    console.log('心跳失败');
  });
</script>
</body>
</html>

优点与扩展

[优点]类似与promise的回调方式

[优点]增加一个接口只是需要增加一个配置文件，很方便

[扩展]当前的ajax 的contentType我只写了json，有兴趣可以扩展其他的数据类型

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

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

上一篇：vue.js $refs和$emit 父子组件交互的方法下一篇：详解Vue 中 extend 、component 、mixins 、extends 的区别

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设