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 Darstellung und das Verhalten der bestehenden Webseite wird beim Austausch und der Aktualisierung der Daten überhaupt nicht gestört. Ajax wird auch als eine Gruppe von Technologien betrachtet, die über HTML, CSS, DOM und JavaScript verfügen, mit denen der Benutzer markiert, formatiert und dem Benutzer ermöglicht wird, mit den Informationen auf der Webseite zu interagieren. In diesem Artikel wird Ihnen gezeigt, wie Sie ein einfaches Programm in Ajax Schritt für Schritt mit Notepad ++ 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.

Methode eins von zwei:
Codierung

  1. 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 mit dem Ajax-Programm speichern. In diesem Artikel wird das Verzeichnis "ProgramInAjax" im Ordner "wamp" im Verzeichnis "www" eingerichtet, in dem Sie WampServer installiert haben.
  2. 2 Öffnen Sie einen beliebigen Texteditor. Notepad ++ wird in diesem Artikel als Texteditor verwendet.
  3. 3 Erstellen Sie eine neue Datei im Texteditor. Geben Sie Folgendes ein: 
     
    Oh oh! Wohin ging die gelbe Blume?
    Sie können eingeben, was Sie wollen, innerhalb des HTML-Tags

    Hier.
  4. 4 Speichern Sie die Datei als Textdokument mit dem Namen "ajax-data.txt".” Eigentlich können Sie die Datei benennen, wie auch immer Sie wollen, aber stellen Sie sicher, dass Sie den gleichen Dateinamen für die Codierung in dieser Zeile eingeben: 
     xmlhttp.open ("GET", "ajax-data.txt", wahr);
    Allerdings das HTML-Tag

    wird für den Header verwendet, sodass er größer und unsichtbarer aussieht.
  5. 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.
  6. 6 Kopiere den folgenden Code: 
      <html> <Kopf> <Titel>Mein erstes Ajax Programm von mir</Titel>  <Skript> Funktion loadXMLDoc () var xmlhttp; if (window.XMLHttpRequest) // Code für IE7 +, Firefox, Chrome, Opera, Safari xmlhttp = neuer XMLHttpRequest ();  else // Code für IE6, IE5 xmlhttp = neues ActiveXObject ("Microsoft.XMLHTTP");  xmlhttp.onreadystatechange = function () if (xmlhttp.readyState == 4 && xmlhttp.status == 200)    document.getElementById ("myImage"). innerHTML = xmlhttp.responseText;  xmlhttp.open ("GET", "ajax-data.txt", wahr); xmlhttp.send ();  </Skript> </Kopf> <Karosserie Stil="Textausrichtung: Mitte;">  <div Ich würde="mein Bild"> <h2>Klicken Sie auf die Schaltfläche unten, um die Blume verschwinden zu lassen.</h2> <img src="MyPicture.png" Breite="500px" Höhe="300px" Titel="Gelbe Blume" alt="ein Bild von einer gelben Blume"/> </div> <br/>  <Taste Art="Taste" onclick="loadXMLDoc ()">Klicken Sie hier, um das Bild verschwinden zu lassen!</Taste> </Karosserie> </html>
  7. 7 Speicher die Datei. Klicken Sie auf die Schaltfläche Speichern in der Menüleiste. Ein "Speichern unter" -Box ist geöffnet. Geben Sie einen Namen für Ihr Dokument ein. In diesem Artikel lautet der Name der Datei "Index".
  8. 8 Klicken Sie auf den Dropdown-Pfeil, um die Dateierweiterung auszuwählen. Klicken Sie im Feld "Dateityp" auf den Dropdown-Pfeil, um die Dateierweiterung auszuwählen.
  9. 9 Wählen Sie "Hyper Text Markup Language-Datei".” Stellen Sie sicher, dass es innerhalb der Klammer "html" hat. Klicken Sie auf "Speichern", nachdem Sie "html" ausgewählt haben.
  10. 10 Testen Sie die HTML-Datei in einem Webbrowser. Öffnen Sie die Webseite in einem Webbrowser. Gehe zu "Ausführen" in der oberen Menüleiste. Klicken Sie darauf und wählen Sie "In Chrome starten" oder einen beliebigen Browser, der auf Ihrem System installiert ist. Google Chrome wird in diesem Artikel zum Testen verwendet. Möglicherweise sind 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 unten auf dem Bildschirm klicken und "Localhost" auswählen. Dort sollten Sie Ihr Verzeichnis sehen und auf die Indexdatei klicken.
  11. 11Klicken Sie auf die Schaltfläche unter dem Bild, um das Skript zu testen.
  12. 12 Ihre letzte Webseite. Ihre Webseite sollte mit den Informationen aktualisiert werden, die Sie zu Beginn in die Textdatei eingegeben haben. Die Blume und der Header sollten durch den neuen Header mit dem Namen "Oh oh! Wo ist die gelbe Blume hin?

Methode zwei von zwei:
Code Erläuterung

  1. 1 Der Körperabschnitt. Der HTML-Text hat den Abschnitt "div" und eine Schaltfläche. In diesem Abschnitt werden die vom Server zurückgegebenen Informationen angezeigt. Die Schaltfläche ruft eine Funktion namens "loadXMLDoc ()" auf, wenn darauf geklickt wird. 
     DOCTYPE html> <html> <Kopf> <Titel>Mein erstes Ajax Programm von mirTitel> Kopf> <Körperstil="Textausrichtung: Mitte;">  <div id="mein Bild"> <h2>Klicken Sie auf die Schaltfläche unten, um die Blume verschwinden zu lassen.h2> <img src="MyPicture.png" Breite="500px" Höhe="300px" Titel="Gelbe Blume" alt="ein Bild von einer gelben Blume"/> div> <br/>  <Knopftyp="Taste" onclick="loadXMLDoc ()">Klicken Sie hier, um das Bild verschwinden zu lassen!Taste> Karosserie> html>
  2. 2 Der Kopfabschnitt. Der Kopfbereich der HTML-Datei hat ein Script-Tag, das die Funktion "loadXMLDoc ()" enthält. 
     <Kopf> <Titel>Mein erstes Ajax Programm von mirTitel>  <Skript> Funktion loadXMLDoc()  var xmlhttp; ob (Fenster.XMLHttpRequest) // Code für IE7 +, Firefox, Chrome, Opera, Safari xmlhttp = Neu XMLHttpRequest();  sonst // Code für IE6, IE5 xmlhttp = Neu ActiveXObject("Microsoft.XMLHTTP");  xmlhttp.onreadystatechange = Funktion()  ob (xmlhttp.readyState == 4 && xmlhttp.Status == 200)  Dokument.getElementById("mein Bild").innerHTML = xmlhttp.Antworttext;   xmlhttp.öffnen("BEKOMMEN","ajax-data.txt",wahr); xmlhttp.senden();  Skript> Kopf>
  3. 3 Mehr Erklärung. Das Wichtigste von Ajax ist das XMLHttpRequest-Objekt. Es wird verwendet, um Daten mit dem Server auszutauschen, 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 verwendet Variable = neues ActiveXObject ("Microsoft.XMLHTTP");.
    • Um mit allen modernen Browsern umgehen zu können, muss überprüft werden, ob die Browser das XMLHttpRequest-Objekt unterstützen. Wenn dies der Fall ist, wird ein XMLHttpRequest-Objekt erstellt. Ist dies nicht der Fall, wird ein ActiveX-Objekt dafür erstellt.
    • Dann sendet es eine Anfrage an den Server. Die Methode des XMLHttpRequest-Objekts namens "open ()" und "send ()" wird verwendet. xmlhttp.open ("GET", "ajax_info.txt", wahr); xmlhttp.send ();.