So implementieren Sie Ajax in nativem JS

Im Allgemeinen ist jeder daran gewöhnt, die von JQuery bereitgestellte Ajax-Methode zu verwenden, aber wie implementiert man die Ajax-Methode mit nativem JS? Dieser Artikel teilt Ihnen hauptsächlich die Methode zur Implementierung von Ajax in nativem JS mit. Ich hoffe, er kann Ihnen helfen.

Von JQuery bereitgestellte Ajax-Methoden:

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

Native js-Implementierung von Ajax-Methoden:

var Ajax={
    get: function(url, fn) {        var xhr = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, xhr.responseText);  //从服务器获得数据            }
        };
        xhr.send();
    },
    post: function (url, data, fn) {         // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
        xhr.onreadystatechange = function() {            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
}

Hinweise:

1 , URL, Async)-Methode erfordert drei Parameter:

Methode: Die zum Senden der Anfrage verwendete Methode (GET oder POST); im Vergleich zu POST ist GET einfacher und schneller und kann in den meisten Fällen verwendet werden. Bitte verwenden Sie POST-Anfragen in den folgenden Situationen:

• Cache-Dateien (Aktualisierung von Dateien oder Datenbanken auf dem Server) können nicht verwendet werden

• Senden Sie große Mengen von Daten an den Server (POST hat keine Datenbeschränkung)

• Beim Senden von Benutzereingaben mit unbekannten Zeichen ist POST stabiler und zuverlässiger als GET

URL: Gibt die URL des serverseitigen Skripts an (die Datei kann ein beliebiger Dateityp sein, z. B. .txt und .xml, oder eine Serverskriptdatei, z. B. .asp und .php (bevor die Antwort zurückgegeben wird). Es können Aufgaben auf dem Server ausgeführt werden)); Verarbeiten Sie die Antwort, wenn die Antwort bereit ist. Bei „false“ wird vor der Ausführung auf die Antwort des Servers gewartet.

2. Die send()-Methode kann die Anfrage an den Server senden.

3. onreadystatechange: Es gibt eine Funktion, die die Serverantwort verarbeitet. Immer wenn sich readyState ändert, wird die onreadystatechange-Funktion ausgeführt.

4. readyState: speichert die Statusinformationen der Serverantwort.

0: Die Anfrage ist nicht initialisiert (der Proxy wird erstellt, aber die open()-Methode wurde nicht aufgerufen)
1: Die Serververbindung ist hergestellt (offen). Die Methode wurde aufgerufen.
2: Die Anfrage wurde empfangen (die Sendemethode wurde aufgerufen und Header und Status sind verfügbar)
3: Die Anfrage wird verarbeitet (Download, das Attribut „responseText“ enthält bereits einige Daten)
4: Die Anfrage wurde abgeschlossen und die Antwort ist bereit (der Download-Vorgang wurde abgeschlossen)
5. Antworttext: Antwortdaten in Zeichenfolgenform abrufen.

6. setRequestHeader(): Wenn POST Daten überträgt, wird es verwendet, um einen HTTP-Header hinzuzufügen und dann (Daten) zu senden. Achten Sie beim Senden von Informationen auf das Datenformat. Fügen Sie einfach Parameter direkt zur URL hinzu , wie zum Beispiel url?a =a1&b=b1.

Verwandte Empfehlungen:

JS-Beispielcode zur Implementierung von Ajax

Native JS implementiert Ajax und domänenübergreifende Ajax-Anfragen

AngularJS-Methode zur Implementierung einer Ajax-Anfrage

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Ajax in nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!