Die eleganteste Art, Ajax-Anfragen in jQuery zu schreiben-js-Tutorial-php.cn

Die eleganteste Art, Ajax-Anfragen in jQuery zu schreiben

小云云

Freigeben： 2017-12-05 09:22:06

Original

1592 Leute haben es durchsucht

Der Kern von Ajax ist das JavaScript-Objekt XmlHttpRequest. Dieses Objekt wurde erstmals in Internet Explorer 5 eingeführt und ist eine Technologie, die asynchrone Anforderungen unterstützt. Kurz gesagt, XmlHttpRequest ermöglicht Ihnen die Verwendung von JavaScript, um Anfragen an den Server zu stellen und die Antworten zu verarbeiten, ohne den Benutzer zu blockieren. In diesem Artikel zeigen wir Ihnen, wie Sie Ajax-Anfragen auf eleganteste Weise schreiben.

Zuerst benötigen Sie eine Konfigurationsdatei

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

Nach dem Login kopieren

Dann benötigen Sie eine Methode, um aus der Konfigurationsdatei eine Schnittstelle zu generieren

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

Nach dem Login kopieren

Probieren Sie es aus

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

Nach dem Login kopieren

Vorteile und Erweiterungen

[Vorteile] : Ähnlich der Promise Callback-Methode
[Vorteile]: Das Hinzufügen einer Schnittstelle erfordert nur das Hinzufügen einer Konfigurationsdatei, was sehr praktisch ist
[Erweiterung ]: Aktuelles Ajax, ich habe nur JSON für ContentType geschrieben. Wenn Sie interessiert sind, können Sie andere Datentypen erweitern
[Nachteile]: Es gibt keine Überprüfung der Funktionsparameter

Der obige Inhalt zeigt, wie man eine Ajax-Anfrage auf eleganteste Weise schreibt. Ich hoffe, es hilft allen.

Verwandte Empfehlungen:

PHP-Verarbeitung von Ajax-Anfragen und domänenübergreifender Ajax

Javascript-Implementierung von Ajax-Anfrageschritten mit Beispielen für die Verwendung, detaillierte Erklärung

Detaillierte Erklärung zur Implementierung einer Ajax-Anfrage in jquery

Das obige ist der detaillierte Inhalt vonDie eleganteste Art, Ajax-Anfragen in jQuery zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!