Ajax JavaScript DOM Programmierung Kunst

Tags: verstehen Sie Kind Eingabeaufforderung, dass Objekt Eve XXX Submit Zeile ausgeben

Ajax wird verwendet, um die Techniken für das Laden von Seiteninhalt asynchron zu verallgemeinern. Zuvor, beteiligt Webapps betrachten Seitenaktualisierungen, erfrischend und die gesamte Seite neu zu laden, auch wenn ein kleiner Teil der Seite ändert. Ajax können Sie um nur einen kleinen Teil einer Seite mit der Hauptvorteil zu aktualisieren, die Anträge auf Seiten asynchron an den Server gesendet werden. Der Server verwendet nicht die gesamte Seite auffordern, es, it-Prozesse Anfragen im Hintergrund, während der Benutzer weiterhin die Seite zu durchsuchen und mit der Seite interagieren kann. Ihr Skript laden und Seiteninhalt auf Nachfrage ohne Unterbrechung Surferlebnis des Benutzers zu erstellen. Mit Ajax, Web-Anwendungen, nehmen Sie auf Funktionen, die Feature-Rich, interaktiv, und wie Desktop-Anwendungen sind.

Das Herzstück der Ajax ist Technologie das XMLHttpRequest-Objekt. Dieses Objekt dient als Vermittler zwischen dem Skript im Browser (Client) und der Server-Seite. Ein einfaches Verständnis des Ajaxtry-Catch Fehlerbehandlung-Anweisung mit zwei JS-Skripte:

Try {//may Ursache falscher Code} catch (Fehler) {//How Fehler zu behandeln, wenn sie auftreten}

Erstellen Sie zunächst ein Text-Dokument im aktuellen Verzeichnis HTML-geben Sie eine Phrase, als die Ausgabe des serverseitigen Skripts zu handeln, das erste JS-Skript verwendet wird, um verschiedene XMLHTTP-Objekte in verschiedenen IE-Versionen des XMLHttpRequest-Objekts verwendet werden, und um mit allen Servern kompatibel, das erste Skript ist wie folgt

function getHTTPObject() {    if (typeof XMLHttpRequest == "undefined")        XMLHttpRequest = function () {            try {return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }                catch (e) {}            try {return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }                catch (e) {}            try {return new ActiveXObject("Msxml2.XMLHTTP"); }                catch (e) {}            return false;}    return new XMLHttpRequest();}

Das obige Skript kehrt schließlich ein neues XMLHttpRequest oder XMLHTTP-Objekt, oder gibt False XMLHttpRequest Objekt verfügt über viele Methoden und die Open-Methode dient zum Festlegen der Dateien auf dem Server, den Antrag angeben zugegriffen werden: Get, POST, senden , Der dritte Parameter gibt an, ob die Anforderung gesendet und asynchron verarbeitet. Request.Open (Methode, Datei, True) OnReadyStateChange ist ein Event-Handler, der Ausführung auslöst, wenn der Server eine Antwort auf das XMLHttpRequest-Objekt sendet. Request.onreadystatechange = Funktion () {//Processing Antwort} Browser-Updates den Wert der Eigenschaft ReadyState auf verschiedenen Stufen: 0 nicht initialisierten 1 lädt 2 Last komplette 3 ist interagierenden 4 abgeschlossen ist zurück von der Access Server gesendeten Daten Mit zwei Eigenschaften können auf die Daten zugreifen, dass ResponseText verwendet, um die Form von einem Text Zeichenfolge ResponseXML Speichern der Daten verwendet, um Content-Type zu speichern = Text/Xml, das eigentlich ein DocumentFragment-Objekt ist, Die DOM-Methode können Sie um dieses Objekt zu bearbeiten. Nachdem Sie ermittelt haben, wie die Antwort verarbeiten, können Sie die Anforderung mit der Send-Methode senden: Request.send (NULL); Verwendung von Send Methodenparameter in Ajax: In der Regel mit Ajax übergebenen Parameter sind meist einfache Zeichenfolgen, die direkt auf die URL-Parameter der offenen Methode unter Verwendung der Parameter durch die Get-Methode eingereicht werden, an welcher Stelle die Parameter für die Send-Methode null sind geschrieben werden können. Zum Beispiel:

var url = "login.jsp?user=XXX&pwd=XXX";xmlHttpRequest.open("GET",url,true);xmlHttpRequset.send(null);    

Alternativ können Sie die Send-Methode Parameter übergeben. Verwenden die Send-Methode Parameter über die POST-Methode übergeben, müssen Sie festlegen der Content-Type-Header-Informationen, simulieren die HTTP POST-Methode um ein Formular zu senden, so dass der Server wissen, wie man die hochgeladene Inhalte zu behandeln. Das Format der Vorlage des Parameters ist identisch mit dem der URL in der Get-Methode. Sie müssen die Open-Methode aufrufen, vor dem Einrichten von Header-Informationen.

xmlHttpRequest.open("POST","login.jsp",true);xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");xmlHttpRequest.send("user="+username+"&pwd="+password);

Das zweite Skript wird verwendet, um Inhalte zu erhalten

function getNewContent() {    var request = getHTTPObject();    if (request) {        request.open("GET", "example.txt", true);        request.onreadystatechange = function () {            if (request.readyState == 4) {                var para = document.createElement("p");                var txt = document.createTextNode(request.responseText);                para.appendChild(txt);                document.getElementById(‘new‘).appendChild(para);            }        }；        request.send(null);    } else {        alert("Sorry, your browser doesn‘t support XMLHttpRequest");    }}addLoadEvent(getNewContent);

Wo ist AddLoadEvent ein Load-Funktion von selbst geschrieben

function addLoadEvent(func) {    var oldonload = window.onload;    if (typeof window.onload != ‘function‘){        window.onload = func;    }else {        window.onload = function () {            oldonload();            func();        }    }}

Dies fügt die oben genannten zwei JS-Skripte in eine HTML-Seite mit einem DIV-Knoten-ID neu

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Ajax</title></head><body>    <div id="new"></div>    <script src="script/addLoadEvent.js"></script>    <script src="script/getNewContent.js"></script>    <script src="script/getHTTPObject.js"></script></body></html>

Und eine einfache Ajax-Anfrage abgeschlossen.

Es ist wichtig zu beachten, dass: 1. Verwendung von Ajax, homologe Richtlinien beachten, als Anfragen mit XMLHttpRequest-Objekte können nur Zugriff auf Daten in derselben Domäne wie der HTML-Code, in dem sie wohnen. 2. Nachdem das Skript die XMLHttpRequest-Anforderung sendet, wird weiterhin ausgeführt und wartet nicht auf die Antwort zurück. Das heißt, das Skript wartet nicht auf Senden der Antwort, aber weiterhin ausgeführt. Um dies zu tun wenn anderen Skripte auf die Antwort des Servers zu verlassen, musst du schreiben der Antwort-Code der Funktion entspricht der OnReadyStateChange-Eigenschaft, die asynchron ist.

Ajax JavaScript DOM Programmierung Kunst