Wie implementiert man die Ajax-Methode in nativem JS? Einführung in die Methode zur Implementierung von Ajax in nativem JS (mit Code)

In diesem Artikel erfahren Sie, wie Sie Ajax-Methoden in nativem JS implementieren. Einführung in die Methode zur Implementierung von Ajax in nativem JS (mit Code). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Im Allgemeinen ist vielleicht jeder daran gewöhnt, die von JQuery bereitgestellte Ajax-Methode zu verwenden, aber wie implementiert man die Ajax-Methode mit nativem JS?

Von JQuery bereitgestellte Ajax-Methode:

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

Native js-Implementierung der Ajax-Methode:

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

Hinweis:

1. URL-, asynchrone) 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 (Aktualisieren von Dateien oder Datenbanken auf dem Server) können nicht verwendet werden

• Senden Sie eine große Datenmenge 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 (die konfiguriert werden kann). auf dem Server, bevor die Antwort zurückgegeben wird)

async: Gibt an, dass die Anfrage asynchron (true) oder synchron (false) verarbeitet werden soll; , und verarbeiten Sie die Antwort, wenn die Antwort bereit ist; false Es 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 wurde hergestellt (openDie Methode wurde aufgerufen)

• 2: Die Anfrage wurde empfangen (sendDie Methode wurde aufgerufen, sowie Header und Status sind verfügbar)

• 3: Die Anfrage wird verarbeitet (Download, das responseText-Attribut enthält bereits einige Daten)

• 4: Die Die Anfrage wurde abgeschlossen und die Antwort ist bereit (der Download-Vorgang wurde abgeschlossen)

5. Antworttext: Rufen Sie die Antwortdaten in Zeichenfolgenform ab.

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.

PS: Das Grundprinzip von Fetch Polyfill besteht darin, zu erkennen, ob die window.fetch-Methode vorhanden ist, und wenn nicht, XHR zu verwenden, um sie zu implementieren

Das obige ist der detaillierte Inhalt vonWie implementiert man die Ajax-Methode in nativem JS? Einführung in die Methode zur Implementierung von Ajax in nativem JS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!