Comment écrire des requêtes ajax avec les performances les plus élevées dans jQuery-js tutoriel-php.cn

Comment écrire des requêtes ajax avec les performances les plus élevées dans jQuery

php中世界最好的语言

Libérer： 2018-03-15 15:05:17

original

1130 Les gens l'ont consulté

Cette fois, je vais vous expliquer comment écrire des requêtes ajax avec les performances les plus élevées dans jQuery. Quelles sont les notes Voici des cas pratiques.

Avant-propos

jQuery est en effet un très bon framework JS léger qui peut nous aider à développer rapidement des applications JS et, dans une certaine mesure, il a a changé notre habitude d'écrire du code JavaScript.

Pas d'autres bêtises, allons droit au but. La méthode ajax de jQuery est très simple à utiliser. Avec une si bonne chose, voulez-vous avoir votre propre ajax ? Ensuite, créons nous-mêmes un simple ajax.

Vous avez d'abord besoin d'un fichier de configuration

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

Copier après la connexion

Ensuite, vous avez besoin d'une méthode pour générer une interface à partir du fichier de configuration

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();
}

Copier après la connexion

Essayez-le

<!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>

Copier après la connexion

Avantages et extensions

[Avantages] : Méthode de rappel similaire à promise

[Avantages] : L'ajout d'une interface nécessite uniquement l'ajout d'un fichier de configuration, ce qui est très pratique

[Extension] : Je j'ai écrit json. Si vous êtes intéressé, vous pouvez étendre d'autres types de données

[Inconvénients] : il n'y a pas de vérification des paramètres de fonction<.>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois !

Lecture recommandée :

Comment deux zTree interagissent les uns avec les autres

Comment utiliser Webpack pour écrire la configuration de l'environnement jquery

Comment convertir automatiquement les lettres majuscules et minuscules lorsque Jackson analyse les chaînes json

Utilisation du panneau pliable jQuery EasyUI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!