Native JS-Kapselung von AJAX-Methoden

Jeder verwendet Ajax jeden Tag. Die Kapselung von Ajax durch die JQuery-Bibliothek ist ebenfalls sehr vollständig und einfach zu verwenden. Werfen wir einen Blick auf die internen Prinzipien und kapseln wir manuell eine eigene Ajax-Bibliothek.

1. Prinzip

Das Senden von nativem Ajax erfordert vier Schritte:

1) Ajax-Objekt erstellen: XMLHttpRequest

2) Festlegen Anforderungsparameter: open(Anforderungsparameter [get/post], URL-Adresse, ob asynchron [true/false])

3) Rückruffunktion festlegen: onreadystateChange wird zur Verarbeitung der zurückgegebenen Daten verwendet

4) Senden Sie eine Anfrage: send()

//TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest();
//TODO step2: 设置请求参数
xhr.open('get','01.php',true);
//TODO step3: 设置回调
xhr.onreadystatechange = function () {
    //接收返回数据
    console.log(xhr.responseText);//responseText 用于接收后台响应的文本
}
//TODO step4: 发送请求
xhr.send();

2. Kapselung

Die Kernidee der Kapselung besteht darin, die Teile, die dynamisch geändert werden müssen, als zu behandeln Parameter, und im obigen Code werden die Anforderungsmethode (Get, Post), die Anforderungsadressen-URL, die Anforderungsparameterdaten, der erfolgreiche Rückruf, der Fehler beim Rückruf usw. dynamisch geändert Das Erstellen des Ajax-Objekts XMLHttprequest, die Ereignisüberwachung bei onreadystatechange usw. sind behoben, daher besteht der erste Schritt darin, die Kapselungsparameter zu bestimmen:

v URL-Anforderungsadresse

v Datenanforderungsdaten

v Typ Anforderungstyp

v Erfolg Erfolg Rückruf

v Fehler Fehler Rückruf

v beforeSend Aufruf vor dem Senden zurückgeben false, um das Senden zu verhindern

v abgeschlossen Erfolgreicher Rückruf der Ajax-Anfrage, egal wann

function ajax(option){
    //用户配置option 默认配置init
    var init = {
        type:'get',
        async:true,
        url:'',
        success: function () { },
        error: function () { },
        data:{},
        beforeSend: function () {
            console.log('发送前...');
            return false;
        }
    };
    //TODO step1: 合并参数
    for(k in option){
        init[k] = option[k];
    }
    //TODO step2: 参数转换
    var params = '';
    for(k in init.data){
        params += '&'+k+'='+init.data[k];
    }
    var xhr = new XMLHttpRequest();
    // type url
    //TODO step3: 区分get和post,进行传参
    var url = init.url+'?__='+new Date().getTime();
    //TODO step4: 发送前
    var flag = init.beforeSend();
    if(!flag){
        return;
    }
    if(init.type.toLowerCase() == 'get'){
        url += params;
        xhr.open(init.type,url,init.async);
        xhr.send();
    }else{
        xhr.open(init.type,url,init.async);
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(params.substr(1));
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                init.success(xhr.responseText);
            }else{
                //error
                init.error();
            }
        }
    }
}

Hier müssen wir darauf achten, dass die Parameterübergabemethoden von get und post unterschiedlich sind. Die Get-Anfrage muss direkt danach gespleißt werden Die URL-Adresse und die Post-Anfrage müssen Parameter in der Sendemethode übergeben, und dies muss sein. Der Anforderungsheader lautet setRequestHeader('content-type','application/x-www-form-urlencoded'), daher ist dies erforderlich beim Einkapseln zu unterscheiden.

Aufgrund zu vieler Parameter müssen Benutzer nicht jedes Mal viele Parameter übergeben, da die Verwendung sonst sehr umständlich wird. Daher übernehmen wir die Form der Standardparameter. Wenn der Benutzer den Standardwert nicht übergibt, werden die Parameter des Benutzers verwendet.

3. Anwendungsbeispiele

Das obige ist der detaillierte Inhalt vonNative JS-Kapselung von AJAX-Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!