Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie Ajax in Javascript

So implementieren Sie Ajax in Javascript

coldplay.xixi
coldplay.xixiOriginal
2021-04-30 11:08:474803Durchsuche

So implementieren Sie Ajax in Javascript: Verwenden Sie zunächst das XMLHttpRequest-Objekt, um im Hintergrund Daten mit dem Server auszutauschen. Fügen Sie dann beim Senden von Informationen an den Server die Daten vom Server hinzu.

So implementieren Sie Ajax in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, DELL G3-Computer.

Javascript-Methode zur Implementierung von Ajax:

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

open(method, url, async) Methode erfordert drei Parameter:

Methode: Die zum Senden der Anfrage verwendete Methode (GET oder POST);

Im Vergleich zu POST GET ist einfacher und schneller und funktioniert in den meisten Fällen; verwenden Sie jedoch POST-Anfragen, wenn:

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

Senden einer großen Anzahl an Daten an den Server (POST hat kein Datenvolumen limit)

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. ; true bedeutet, dass andere Skripte ausgeführt werden, während auf die Antwort des Servers gewartet wird, und die Antwort verarbeitet wird, wenn die Antwort bereit ist; false bedeutet, vor der Ausführung auf die Antwort des Servers zu warten.

Verwandte kostenlose Lernempfehlungen:
Javascript-Video-Tutorial

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn