Ajax steht für „Asynchronous JavaScript and XML“ und bezeichnet eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen. Die Ajax-Technologie ist eine Sammlung aller Technologien, die derzeit in Browsern über JavaScript-Skripte verfügbar sind. Ajax nutzt all diese Technologien auf eine neue Art und Weise und belebt so den alten B/S-Stil der Webentwicklung.
Unter den Ajax-Technologien ist XMLHttpRequest der ursprüngliche Name. Sie wurde erstmals 1999 von Microsoft im IE5.0-Browser eingeführt. Später wurde diese Technologie in der obigen Spezifikation XMLHttpRequest genannt. Das macht die Ajax-Technologie einzigartig. Kurz gesagt bietet XMLHttpRequest eine Möglichkeit für im Browser ausgeführte JavaScript-Skripte, mit dem Server innerhalb der Seite zu kommunizieren. JavaScript innerhalb der Seite kann Daten vom Server abrufen oder Daten an den Server senden, ohne die Seite zu aktualisieren. Das Aufkommen von XMLHttpRequest bietet eine neue Möglichkeit für die Webentwicklung und verändert sogar völlig die Sichtweise der Menschen darauf, woraus Webanwendungen bestehen. Es ermöglicht uns, die Webentwicklung auf eine völlig neue Art und Weise durchzuführen und den Benutzern ein besseres interaktives Erlebnis zu bieten.
Im Gegensatz zur herkömmlichen Webentwicklung betrachtet Ajax Webanwendungen nicht statisch seitenbasiert. Aus Ajax-Sicht sollte eine Webanwendung aus einer kleinen Anzahl von Seiten bestehen, von denen jede tatsächlich eine kleinere Ajax-Anwendung ist. Jede Seite enthält einige Ajax-Komponenten, die mit JavaScript entwickelt wurden. Diese Komponenten verwenden das XMLHttpRequest-Objekt, um asynchron mit dem Server zu kommunizieren. Nachdem sie die erforderlichen Daten vom Server erhalten haben, verwenden sie die DOM-API, um einen Teil des Inhalts auf der Seite zu aktualisieren. Daher gibt es drei Hauptunterschiede zwischen Ajax-Anwendungen und herkömmlichen Webanwendungen:
1. Kommunizieren Sie mit dem Server innerhalb der Seite, ohne die gesamte Seite zu aktualisieren.
2. Verwenden Sie den asynchronen Modus, um mit dem Server zu kommunizieren, ohne den Betrieb des Benutzers zu unterbrechen, und verfügen Sie über schnellere Antwortmöglichkeiten.
3. Der Antrag umfasst nur wenige Seiten. Die meisten Interaktionen werden innerhalb der Seite abgeschlossen und es ist nicht erforderlich, die gesamte Seite zu wechseln.
Es ist ersichtlich, dass Ajax Webanwendungen dynamischer macht, eine höhere Intelligenz bietet und Ajax-UI-Komponenten umfangreiche Ausdrucksmöglichkeiten bietet. Eine solche neue Art von Webanwendung wird als RIA-Anwendung (Rich Internet Application) bezeichnet.
Die Vorderseite enthält einige Informationen zur Einführung von AJAX, die ich im Internet gefunden habe, um Lesern, die die AJAX-Technologie nicht kennen, so schnell wie möglich zu helfen, die AJAX-Technologie zu verstehen. Als nächstes werde ich Ihnen einige AJAX-Technologien und -Techniken vorstellen, die ich verwendet habe der eigentliche Entwicklungsprozess.
Das Wichtigste bei der Verwendung der AJAX-Technologie ist das Erstellen eines XMLHttpRequest-Objekts. Es gibt viele Informationen zum Erstellen dieses Objekts. Eine meiner am häufigsten verwendeten Methoden ist
Funktion createXMLHttpRequest() {
var xmlhttp;
versuchen {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} fangen(e) {
versuchen {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} fangen(e) {
versuchen {
xmlhttp = new XMLHttpRequest();
} fangen(e) {
alarm("XMLHttpRequest-Objekt konnte nicht erstellt werden!");
}
}
}
return xmlhttp;
}
Im Folgenden werde ich einige Beispiele und einige Dinge auflisten, die durch diese Beispiele gelernt werden können.
Der folgende Codeabschnitt ist ein Beispiel dafür, wie ich beim Hinzufügen eines bestimmten Elements überprüfe, ob das Element bereits in der Datenbank vorhanden ist.
Funktion do_verify() {
var segment10 = document.mainFrm.segment10.value;
var inventoryItemId = document.mainFrm.inventoryItemId.value;
// Warnung(segment10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); //Es gibt auch zwei Methoden zum Übertragen von Daten: GET und POST, aber wenn die Methode POST ist, muss der folgende Satz geschrieben werden
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
Funktion handleReadyStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("flag").style.display = "block"
document.mainFrm.segment10.focus();
} anders {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "none"
}
} anders {
alarm(xmlHttp.status);
}
}
}
Der Hintergrundcode lautet:
boolean success = itemDAO.doVerifyItem(); //doVerifyItem ist die Hauptmethode, um zu überprüfen, ob das angegebene Element in der Datenbank vorhanden ist. Wenn das Element bereits vorhanden ist, gibt diese Methode TRUE zurück
PrintWriter out = res.getWriter();
if (Erfolg) {
out.print("Y");
}
out.flush();
out.close();
}