recherche

Maison >interface Web >js tutoriel >La manière la plus élégante d'écrire des requêtes ajax dans jQuery

La manière la plus élégante d'écrire des requêtes ajax dans jQuery

小云云
小云云original
2017-12-05 09:22:061698parcourir

Le cœur d'Ajax est l'objet JavaScript XmlHttpRequest. Cet objet a été introduit pour la première fois dans Internet Explorer 5 et constitue une technologie qui prend en charge les requêtes asynchrones. En bref, XmlHttpRequest vous permet d'utiliser JavaScript pour envoyer des requêtes au serveur et gérer les réponses sans bloquer l'utilisateur. Dans cet article, nous partagerons avec vous comment rédiger des requêtes ajax de la manière la plus élégante.

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 = /{{([^}]+)?}}/g;
        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] : Similaire à la méthode de rappel promise

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

  • [Extension ] : Ajax actuel, je n'ai écrit json que pour contentType. 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 la fonction

Le contenu ci-dessus explique comment rédiger une requête ajax de la manière la plus élégante. J'espère que cela aide tout le monde.

Recommandations associées :

traitement php des requêtes ajax et inter-domaines ajax

implémentation javascript des exemples d'utilisation de l'étape de requête ajax explication détaillée

Explication détaillée de la façon d'implémenter la requête ajax dans jquery

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple détaillé d'attribut ajax asynchrone dans jQueryArticle suivant：Exemple détaillé d'attribut ajax asynchrone dans jQuery

Articles Liés

Voir plus