Inhalte mit einem Dropdown in AJAX ändern

Asynchrones JavaScript und XML können Ihre geschäftlichen Webseiten reaktionsfähiger und interaktiver machen. Mit der AJAX-Technologie können Website-Besucher Dropdown-Menüs und andere Steuerelemente verwenden, um Aktionen auszulösen, ohne dass die Webseite aktualisiert wird. Ein Klick auf einen Produktnamen in einem Dropdown-Menü kann beispielsweise dazu führen, dass der Inhalt eines Div-Containers geändert wird. Komplexe AJAX-Tasks erfordern möglicherweise umfangreiche Codierungen. Sie können jedoch ein einfaches Dropdown-Menü mit einigen JavaScript-Zeilen erstellen.

Dropdown-Menüs

Fügen Sie Ihrem HTML-Dokument ein einfaches select-Tag hinzu, und füllen Sie es mit einem select-Tag auf, um die Werte festzulegen, die im Dropdown-Menü angezeigt werden sollen. Ihr Menü benötigt außerdem einen Event-Handler, um die JavaScript-Funktion aufzurufen, um Ihre AJAX-Anfrage auszuführen. Das folgende Beispiel fügt Kamera- und Telefonelemente zu einem Dropdown-Menü hinzu und ruft die Funktion "getValue" auf, wenn das Element ausgewählt wird. Darüber hinaus können Sie steuern, wie viele Elemente Ihr Dropdown-Menü anzeigt. Das Größenattribut in diesem Beispiel weist Browser an, zwei Elemente anzuzeigen. Wenn Sie den Wert auf Null setzen, müssen Website-Besucher auf das Menü klicken, um die Elemente anzuzeigen. Wenn Ihre Webseite überfüllt ist, setzen Sie die Größe auf 0, um das Menü kompakt zu halten.

Kameratelefon

AJAX-Anforderungsobjekte

Damit AJAX funktioniert, müssen Sie eine JavaScript-Funktion erstellen, die ein HyperText Transfer Protocol- oder HTTP-Objekt erstellt. Sie verwenden diese Funktion dann, um Informationen von Ihrem Webserver anzufordern. Der Code ruft die Open- und Send-Methoden des Objekts auf, um die Anfrage zu senden. Wenn der Code die Anforderung sendet, müssen Sie auch den Namen der Ressource hinzufügen, die der Server zurückgeben soll. Um beispielsweise eine Textdatei mit dem Namen product1.txt vom Server zu erhalten, fügen Sie Ihrem Code eine Open-Anweisung und eine Send-Anweisung hinzu, die folgendermaßen aussehen:

httpObject.open ("GET", "product1.txt", true); httpObject.send ();

Rückruffunktionen

Ihr AJAX-Code muss die ID des Inhalts kennen, den Sie ändern möchten. Führen Sie für Ihre AJAX-Anfrage ein beliebiges "div" -Element auf Ihrer Webseite durch, indem Sie Ihrem Code eine "Callback" -Funktion hinzufügen. Callback-Funktionen werden automatisch ausgeführt, wenn ein bestimmtes Ereignis auftritt. In diesem Beispiel benötigen Sie eine Rückruffunktion, die die Eigenschaft "innerHTML" des Elements "div" ändert, das Sie ändern möchten. Eine typische Rückruffunktion sieht folgendermaßen aus:

httpObject.onreadystatechange = function () {if (httpObject.readyState == 4 && httpObject.status == 200) {document.getElementById ("container1"). innerHTML = httpObject.responseText; }}

Nachdem Sie eine Anfrage an den Webserver gesendet haben, überwacht diese Funktion die Anfrage und sucht nach Antworten. Wenn der Server einen "Statuscode" von 200 und einen "readyState" -Wert von 4 zurücksendet, hat der Code die erforderlichen Daten. Sie ändert die Eigenschaft "innerHTML" des "div", auf das die Anweisung "document.getElementById" verweist.

Überlegungen zum Webserver

AJAX-Transaktionen bestehen aus der Kommunikation zwischen dem Browser einer Person und dem Webserver. Da der AJAX-Code im Beispiel eine Textdatei anfordert, müssen Sie die Textdatei dem Verzeichnis auf dem Webserver hinzufügen, in dem Sie die anderen Dateien für Ihre Website speichern. Der Text in der Textdatei ist der Text, den Ihr AJAX-Code der Webseite hinzufügt, wenn der Code die Daten abruft. Wenn jemand einen Wert aus dem Dropdown-Menü der Seite auswählt, ändert der AJAX-Code, was in dem "div" -Container angegeben ist, den von dem Server zurückgegebenen Text.

 

Lassen Sie Ihren Kommentar