快捷導(dǎo)航

jQuery進(jìn)階實(shí)踐之利用最優(yōu)雅的方式如何寫ajax請求

更新時(shí)間：2017年12月20日 10:01:46 作者：香吉士

ajax請求相信對大家來說都不陌生，下面這篇文章主要介紹了jQuery進(jìn)階實(shí)踐之利用最優(yōu)雅的方式如何寫ajax請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

jQuery確實(shí)是一個(gè)挺好的輕量級的JS框架，能幫助我們快速的開發(fā)JS應(yīng)用，并在一定程度上改變了我們寫JavaScript代碼的習(xí)慣。

廢話少說，直接進(jìn)入正題，jQuery的ajax方法非常好用，這么好的東西，你想擁有一個(gè)屬于自己的ajax么？接下來，我們來自己做一個(gè)簡單的ajax吧。

首先需要一個(gè)配置文件

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'
  }
 ]
}

然后需要一個(gè)方法，把配置文件生成接口

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'}轉(zhuǎn)換成/users/89898，和mastache語法差不多，
  * 當(dāng)然我們沒必要為了這么小的一個(gè)功能來引入一個(gè)模板庫
  * query字符串可以當(dāng)做一個(gè)參數(shù)傳遞進(jìn)來
  * 例如： /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 暴露設(shè)置頭部信息的方法]
 * 有些方法需要特定的頭部信息，例如登錄之后才能獲取sesssionId,然后訪問所有的接口時(shí)，必須攜帶sessionId
 * 才可以訪問
 * @Author Wdd
 * @DateTime 2017-03-13T10:34:03+0800
 * @param {[type]} headers [description]
 */
Api.pt.setHeader = function(headers){
 headers = headers;
};
/**
 * [fire 發(fā)送ajax請求，this會綁定到每個(gè)接口上]
 * @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>

優(yōu)點(diǎn)與擴(kuò)展

[優(yōu)點(diǎn)]：類似與promise的回調(diào)方式

[優(yōu)點(diǎn)]：增加一個(gè)接口只是需要增加一個(gè)配置文件，很方便

[擴(kuò)展]：當(dāng)前的ajax 的contentType我只寫了json，有興趣可以擴(kuò)展其他的數(shù)據(jù)類型

[缺點(diǎn)]：沒有對函數(shù)參數(shù)進(jìn)行校驗(yàn)

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: