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'
}
]
}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();
}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>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!
tutoriel ajax
Solution de code tronqué chinois Ajax
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Que faire si ajax transmet des caractères chinois tronqués
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
