3-Punkte-Zusammenfassung der technischen Prinzipien von Ajax_AJAX bezogen

In diesem Artikel wird hauptsächlich eine dreistufige Zusammenfassung der technischen Prinzipien von Ajax vorgestellt. Freunde in Not können sich auf

Ajax beziehen: Asynchrones Javascript und XML Asynchrones Javascript und XML.

ist eine Webentwicklungstechnologie zum Erstellen interaktiver Webanwendungen.

1.0 Vorteile:
1.1 Verbessert die Benutzererfahrung durch asynchronen Modus.
1.2 Optimiert die Übertragung zwischen dem Browser und dem Server und reduziert unnötige Datenumläufe und Bandbreitennutzung.
1.3 Die Ajax-Engine läuft auf dem Client und übernimmt einen Teil der Freigabe, die ursprünglich vom Server getragen wurde, wodurch die Serverlast bei einer großen Anzahl von Benutzern reduziert wird.

2.0-Funktionsprinzip

Der Kern von Ajax ist das Javascript-Objekt XmlHttpRequest. Dieses Objekt wurde erstmals in IE5 referenziert und ist eine Technologie, die asynchrone Anforderungen unterstützt. Mit XmlHttpRequest können Sie Javascript verwenden, um Anfragen an den Server zu stellen und die Antwort zu verarbeiten, anstatt den Benutzer zu blockieren, wodurch ein aktualisierungsfreier Effekt erzielt wird.
Aufgrund der Unterschiede zwischen den Browsern gibt es auch Unterschiede in der Art und Weise, wie XmlHttpRequest-Objekte erstellt werden (hauptsächlich Unterschiede zwischen dem IE und anderen Browsern).
2.1 Eine allgemeinere Methode zum Erstellen asynchroner Anforderungen:

function CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象的方法
if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }
//IE浏览器创建XmlHttpRequest对象的方法
if (window.ActiveXObject) {
try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
catch (e) {
    try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
             }
    catch (ex) 
            { }
        }
    }
}

2.2 XmlHttpRequest-bezogene Attribute:

onreadystatechange Der Ereignishandler für das Ereignis, das jedes Mal ausgelöst wird, wenn sich der Status ändert.

ResponseText Die Zeichenfolgenform der vom Serverprozess zurückgegebenen Daten.

ResponseXML Das vom Serverprozess zurückgegebene DOM-kompatible Dokumentdatenobjekt.

Statustext Die Zeichenfolgeninformationen, die den Statuscode begleiten

readyState Objektstatuswert

0 (nicht initialisiert) Das Objekt wurde erstellt, aber nicht initialisiert (das Öffnen). Methode wurde noch nicht aufgerufen)

1 (Initialisiert) Das Objekt wurde erstellt, aber die Sendemethode wurde noch nicht aufgerufen

　　2 (Daten senden) Die Sendemethode wurde aufgerufen, aber der aktuelle Status und der HTTP-Header sind unbekannt

　 　　3 (Daten werden übertragen) Ein Teil der Daten wurde empfangen, weil die Antwort und der HTTP-Header unvollständig sind. Zu diesem Zeitpunkt werden sie über ResponseBody und ResponseText abgerufen Es wird Fehler in einigen Daten geben,

　4 (Vollständig) Die Daten werden zu diesem Zeitpunkt empfangen, die vollständigen Antwortdaten können über ResponseXML und ResponseText abgerufen werden

　2.3 Einfaches Demo-Beispiel:

function SendAsyncRequest() {
var data = document.getElementById("XXId").value;
    CreateXmlHttp();  //创建XmlHttpRequest对象
if (!xmlhttp) {         //判断对象是否创建成功
       alert("创建xmlhttp对象异常！");
    return false;
    }
    xmlhttp.open("POST", url, false);   //开始发送异步请求
    xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
            document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText;   //数据接收完毕
        }
    }
    xmlhttp.send();   
}

3.0 Nachteile:

1. Zerstört das normale Verhalten der Zurück-Schaltfläche des Browsers. Nach dem dynamischen Aktualisieren der Seite können Sie nicht zum Status der vorherigen Seite zurückkehren.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Das obige ist der detaillierte Inhalt von3-Punkte-Zusammenfassung der technischen Prinzipien von Ajax_AJAX bezogen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!