Wie funktioniert Ajax (mit Diagramm)

Dieser Artikel informiert Sie hauptsächlich über das Funktionsprinzip von Ajax. Ich hoffe, dass er für interessierte Freunde hilfreich ist.

Ajax bezieht sich auf asynchrones JavaScript und XML (asynchrones JavaScript und XML). Der größte Vorteil besteht darin, dass es Daten mit dem Server austauschen und einen Teil des Webseiteninhalts aktualisieren kann, ohne die gesamte Seite neu laden zu müssen. Das Grundprinzip der Implementierung besteht darin, dass das DOM-Objekt der Webseite einen Teil des Inhalts der Webseite präzise verarbeiten kann. Als reiner Datenspeicher ermöglicht es dem Client und dem Server, nur die Daten des Webseiteninhalts auszutauschen Zusätzliche Informationen wie Webseitenstile. XMLHttpRequest ist ein Anforderungsobjekt, das unabhängig von der integrierten Anforderung des Browsers selbst mit dem Server interagiert.

Der abstrakte Prozess der Ajax-Interaktion einer Webanwendung mit dem Server ist wie folgt:

Detaillierte Prozesserklärung:

1: Zu verwenden Ajax-Technologie, die Grundlagen Die Grundlage besteht darin, ein XMLHttpRequest-Objekt zu erstellen, ohne das keine Möglichkeit einer asynchronen Übertragung besteht:

var xmlhttp;
if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest(); 
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

2: Asynchrone Vorgänge als Reaktion auf bestimmte Ereignisse auf der Webseite binden: Übertragen über xmlhttp Das oben erstellte Objekt fordert Daten an und überträgt sie. Bevor Sie eine Anfrage stellen, müssen Sie zunächst die Methode des Anfrageobjekts definieren, welche Datei zur Anfrageverarbeitung an den Server gesendet werden soll, welche Daten übertragen werden sollen und ob sie asynchron ist.

Darunter gibt es, wie bei normalen Anfrageübermittlungsdaten, hier zwei Methoden: GET/POST

 xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",);
 xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

3: Nachdem der Server die Anfrage empfangen hat, übergibt er die angehängten Daten als Eingabe für die Verarbeitung angeforderte Datei, zum Beispiel hier: Übergeben Sie fname=Henry&lname=Ford als Eingabe in die Datei /try/ajax/demo_get2.php. Anschließend wird die Datei entsprechend den eingehenden Daten verarbeitet und das Ergebnis schließlich zurückgegeben und über das Antwortobjekt zurückgesendet. Der Client ruft den Antwortinhalt basierend auf dem xmlhttp-Objekt ab und ruft dann das DOM-Objekt auf, um den Webseiteninhalt basierend auf dem Antwortinhalt teilweise zu ändern.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容
    }

Darunter gibt es zwei Arten von Antworten: Zeichenfolgentyp und XML-Text. Die unterschiedlichen Extraktionen der beiden Antworten sind wie folgt:

responseText-Attribut gibt die Antwort in Form einer Zeichenfolge zurück:

document.getElementById("myp").innerHTML=xmlhttp.responseText;

Wenn die Antwort vom Server XML ist, muss dies tun als XML-Objekt analysiert werden, verwenden Sie ResponseXML:

xmlDoc=xmlhttp.responseXML; //获取服务器响应的XML文本并转换得到XMLDOM对象
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }
 
document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去

Verwandte Tutorials: Ajax-Video-Tutorial　

Das obige ist der detaillierte Inhalt vonWie funktioniert Ajax (mit Diagramm). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!