Wie verwende ich Ajax? Ajax-Bedienungsschritte

Wie verwende ich Ajax? In diesem Artikel werden Ajax-Operationen vorgestellt und Sie können die Schritte von Ajax-Operationen verstehen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie uns zunächst die Schritte des Ajax-Betriebs zusammenfassen und dann detailliert vorstellen, wie jeder Schritt ausgeführt wird.

1. Client-Ereignisse aufrufen

2. XMLHttpRequest-Objekt erstellen

3.

4. Das XMLHttpRequest-Objekt sendet eine asynchrone Anfrage an den Webserver.

5. Der Webserver gibt Ergebnisse zurück, die XML-Dokumente enthalten.

6. Das XMLHttpRequest-Objekt ruft die Funktion callback() auf und verarbeitet das Ergebnis.

7. HTML-DOM aktualisieren.

Lassen Sie uns diese Schritte Schritt für Schritt implementieren, um Ajax-Operationen zu implementieren.

Client-Ereignisse aufrufen

JavaScript-Funktionen werden als Ergebnis des Ereignisses aufgerufen.

Beispiel:

<input type =“text”size =“20”id =“userid”name =“id”onkeyup =“validateUserId（）;”>

Beschreibung:

Die JavaScript-Funktion „validateUserId()“ wird als Ereignishandler dem Ereignis „onkeyup“ im Eingabeformularfeld zugeordnet, wobei die ID auf festgelegt ist "Benutzer-ID".

XMLHttpRequest-Objekt erstellen

var ajaxRequest;  // 使Ajax成为可能的变量！
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer浏览器
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            alert("Your browser broke!");
            return false;
         }
      }
   }}

XMLHttpRequest-Objekt konfigurieren

In diesem Schritt schreiben wir eine Funktion, die durch Client-Ereignisse ausgelöst wird und eine Rückruffunktion „processRequest()“ registriert.

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest（）是回调函数。
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Stellt eine asynchrone Anfrage an den Webserver

Der Quellcode ist im obigen Code zu finden. Der in Fettschrift geschriebene Code ist dafür verantwortlich, Anfragen an den Webserver zu stellen. Dies geschieht alles mithilfe des XMLHttpRequest-Objekts ajaxRequest.

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest（）是回调函数。
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Angenommen, „Zara“ wird im Feld „Benutzer-ID“ eingegeben, dann wird in der obigen Anfrage die URL auf „validate?id=Zara“ gesetzt.

Der Webserver gibt Ergebnisse zurück, die ein XML-Dokument enthalten.

Das serverseitige Skript kann in jeder Sprache implementiert werden, seine Logik sollte jedoch wie unten dargestellt sein.

1. Holen Sie sich die Anfrage vom Kunden.

2. Analysieren Sie die Eingaben vom Client.

3. Muss bearbeitet werden.

4. Senden Sie die Ausgabe an den Client.

Wenn wir davon ausgehen, dass Sie ein Servlet schreiben möchten, dann handelt es sich hierbei um einen Code.

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

Die Rückruffunktion ruft ProcessRequest() auf

Das XMLHttpRequest-Objekt ist so konfiguriert, dass es die ProcessRequest()-Funktion aufruft, wenn der readyState-Status des Änderungen am XMLHttpRequest-Objekt. Jetzt empfängt diese Funktion die Ergebnisse vom Server und führt die erforderliche Verarbeitung durch. Wie im folgenden Beispiel gezeigt, setzt es die Variable message basierend auf dem Rückgabewert des Webservers auf true oder false.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

HTML-DOM aktualisieren

Dies ist der letzte Schritt. In diesem Schritt wird die HTML-Seite aktualisiert. Dies geschieht auf folgende Weise:

1. JavaScript verwendet die DOM-API, um einen Verweis auf ein beliebiges Element auf der Seite abzurufen.

2. Der empfohlene Weg, Elemente als Referenz zu erhalten, ist ein Aufruf.

document.getElementById("userIdMessage"),

3. Sie können jetzt JavaScript verwenden, um die Attribute von Elementen zu ändern, die Stilattribute von Elementen zu ändern oder untergeordnete Elemente hinzuzufügen, zu löschen oder zu ändern.

Geben Sie ein Beispiel:

JS-Code:

   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // 如果消息体元素已简单创建
      // 需要替换它，否则追加新元素
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->

HTML-Code:

<div id = "userIdMessage"><div>

Wenn Sie die oben genannten sieben Schritte verstanden haben, dann Sie haben die Ajax-Operation fast abgeschlossen. Sie können es selbst ausprobieren, um Ihr Verständnis zu vertiefen. Empfohlene verwandte Video-Tutorials: Ajax-Tutorial, JavaScript-Tutorial!

Das obige ist der detaillierte Inhalt vonWie verwende ich Ajax? Ajax-Bedienungsschritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!