Programmieren in Ajax (mit Bildern)

Inhaltsverzeichnis:

Programmieren in Ajax (mit Bildern)
Programmieren in Ajax (mit Bildern)

Video: Programmieren in Ajax (mit Bildern)

Video: Programmieren in Ajax (mit Bildern)
Video: DARF MAN ALS CHRIST NACH MEKKA 2024, März
Anonim

AJAX oder Ajax ist asynchrones JavaScript und XML. Es wird verwendet, um Daten mit einem Server auszutauschen und einen Teil einer Webseite zu aktualisieren, ohne die gesamte Webseite auf der Clientseite neu zu laden. Die Anzeige und das Verhalten der bestehenden Webseite werden während des Austauschs und der Aktualisierung der Daten in keiner Weise gestört. Ajax wird auch als eine Gruppe von Technologien betrachtet, die über HTML, CSS, DOM und JavaScript verfügen, die verwendet werden, um zu markieren, zu stylen und dem Benutzer die Interaktion mit den Informationen auf der Webseite zu ermöglichen. In diesem Artikel wird Ihnen gezeigt, wie Sie mit Notepad++ Schritt für Schritt ein einfaches Programm in Ajax schreiben. Grundkenntnisse in HTML, DOM, JavaScript und einem lokalen Webserver oder Remote-Webserver sind erforderlich. WampServer wird in diesem Artikel für einen Test verwendet.

Schritte

Methode 1 von 2: Codierung

3929304 1
3929304 1

Schritt 1. Bereiten Sie ein Bild zum Schreiben eines Ajax-Programms vor

Speichern Sie das Bild in demselben Ordner, in dem Sie Ihre HTML- und Textdateien speichern, die das Ajax-Programm anzeigen. In diesem Artikel wird das Verzeichnis „ProgramInAjax“im Ordner „wamp“unter dem Verzeichnis „www“eingerichtet, in dem Sie WampServer installiert haben.

3929304 2
3929304 2

Schritt 2. Öffnen Sie einen beliebigen Texteditor

Notepad++ wird in diesem Artikel als Texteditor verwendet.

3929304 3
3929304 3

Schritt 3. Erstellen Sie eine neue Datei im Texteditor

Geben Sie Folgendes ein:


Oh oh! Wo ist die gelbe Blume geblieben?

Sie können hier in das HTML-Tag schreiben, was Sie wollen.

3929304 4
3929304 4

Schritt 4. Speichern Sie die Datei als Textdokument mit dem Namen „ajax-data.txt

” Eigentlich können Sie die Datei beliebig benennen, aber stellen Sie sicher, dass Sie in dieser Zeile den gleichen Dateinamen in die Codierung eingeben:

xmlhttp.open("GET", "ajax-data.txt", true);

Das HTML-Tag wird jedoch für den Header verwendet, damit er größer und unsichtbarer aussieht.

3929304 5
3929304 5

Schritt 5. Erstellen Sie eine neue Datei für eine Webseite

Diese Datei ist für eine HTML-Datei, um das Ajax-Programm in einem Webbrowser anzuzeigen.

3929304 6
3929304 6

Schritt 6. Kopieren Sie den folgenden Code:

  Mein erstes Ajax-Programm von mir Geben Sie den Ajax-Code unten ein.  


Klicken Sie auf die Schaltfläche unten, um die Blume verschwinden zu lassen

3929304 7
3929304 7

Schritt 7. Speichern Sie die Datei

Klicken Sie in der Menüleiste auf die Schaltfläche Speichern. Ein Feld „Speichern unter“ist geöffnet. Geben Sie einen Namen für Ihr Dokument ein. In diesem Artikel lautet der Name der Datei „index“.

3929304 8
3929304 8

Schritt 8. Klicken Sie auf den Dropdown-Pfeil, um die Dateierweiterung auszuwählen

Klicken Sie im Feld "Speichern unter Typ" auf den Dropdown-Pfeil, um die Dateierweiterung auszuwählen.

3929304 9
3929304 9

Schritt 9. Wählen Sie „Hyper Text Markup Language-Datei

” Stellen Sie sicher, dass "html" in der Klammer steht. Klicken Sie auf Speichern, nachdem Sie „html“ausgewählt haben.

3929304 10
3929304 10

Schritt 10. Testen Sie die HTML-Datei in einem Webbrowser

Öffnen Sie die Webseite in einem Webbrowser. Gehen Sie in der oberen Menüleiste auf „Ausführen“. Klicken Sie darauf und wählen Sie "In Chrome starten" oder einen beliebigen Browser, der auf Ihrem System installiert ist. Für die Tests in diesem Artikel wird Google Chrome verwendet. Möglicherweise haben Sie einige andere Browser in Notepad++ installiert. Sie können Ihren bevorzugten Browser auswählen. Sie können auch auf das WampServer-Symbol in den Taskleisten am unteren Bildschirmrand klicken und "Localhost" auswählen. Sie sollten dort Ihr Verzeichnis sehen und auf die Indexdatei klicken.

Schritt 11. Klicken Sie auf die Schaltfläche unter dem Bild, um das Skript zu testen

3929304 12
3929304 12

Schritt 12. Ihre endgültige Webseite

Ihre Webseite sollte mit den Informationen aktualisiert werden, die Sie zu Beginn in die Textdatei eingegeben haben. Die Blume und die Überschrift sollten durch die neue Überschrift „Oh oh! Wo ist die gelbe Blume geblieben?“

Methode 2 von 2: Code-Erklärung

3929304 13
3929304 13

Schritt 1. Der Körperteil

Der HTML-Text enthält den Abschnitt „div“und eine Schaltfläche. Dieser Abschnitt wird verwendet, um die vom Server zurückgegebenen Informationen anzuzeigen. Die Schaltfläche ruft eine Funktion namens „loadXMLDoc()“auf, wenn sie angeklickt wird.

   Mein erstes Ajax-Programm von mir   Ein Bild geht hier, um das Ajax-Programm zu testen.

Klicken Sie auf die Schaltfläche unten, um die Blume verschwinden zu lassen

Hier geht ein Knopf

3929304 14
3929304 14

Schritt 2. Der Kopfabschnitt

Der Head-Abschnitt der HTML-Datei enthält ein script-Tag, das die Funktion „loadXMLDoc()“enthält.

 Mein erstes Ajax-Programm von mir Geben Sie den Ajax-Code unten ein. 

Schritt 3. Weitere Erklärung

Das Wichtigste an Ajax ist das XMLHttpRequest-Objekt. Es dient zum Datenaustausch mit dem Server und alle modernen Browser unterstützen das Objekt.

  • Die Syntax zum Erstellen eines XMLHttpRequest()-Objekts lautet variable=new XMLHttpRequest(); aber gleichzeitig ist die Syntax zum Erstellen alter Versionen von Internet Explorer (IE5 und IE6), die ein ActiveX-Objekt verwenden, variable=new ActiveXObject("Microsoft. XMLHTTP");.
  • Um alle modernen Browser verarbeiten zu können, muss überprüft werden, ob die Browser das XMLHttpRequest-Objekt unterstützen. Wenn dies der Fall ist, erstellt es ein XMLHttpRequest-Objekt. Wenn dies nicht der Fall ist, wird ein ActiveX-Objekt dafür erstellt.
  • Dann wird eine Anfrage an den Server gesendet. Die Methode des XMLHttpRequest-Objekts namens „open()“und „send()“wird verwendet. xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send();.

Tipps

  • Eine weitere Option, um eine Vorschau des Ergebnisses anzuzeigen, können Sie Ihren bevorzugten Browser öffnen und „localhost/ProgramInAjax“in die Webadressleiste eingeben, um die Webseite anzuzeigen. Sie sollten die Webseite sehen können, wenn Sie Ihre HTML-Datei mit „index.html“benennen.
  • Speichern Sie Ihre HTML-Datei während Ihrer Arbeit häufiger. Das gleichzeitige Drücken von Strg und S für Windows-Benutzer spart mehr Zeit.
  • Stellen Sie sicher, dass Sie Ihre gespeicherte HTML-Datei an derselben Stelle hinzufügen, an der sich Ihre Bild- und Datentextdatei befinden.
  • Wenn Sie eine Datei benennen, muss die Groß-/Kleinschreibung beachtet werden, wenn Sie diese Namen in den Code einfügen. Beispielsweise unterscheidet sich „myImage“von „MyImage“oder „myimage“.

Empfohlen: