Die Funktion mit JS für AJAX einrichten
- Nachdem das XMLHttprequest-Objekt erstellt wurde wird es mit einem HTML-Event ausgelöst (In unserem Fall mit einem Klick auf den Button).
- Die Methode open() öffnet eine Verbindung zum Server.
- Die Methode send() sendet den Request an den Server.
- Nun wird auf dem Server die Anfrage verarbeitet und eine Antwort zurückgegeben.
XMLHttpRequest-Objekt Eigenschaften
| Eigenschaft | Beschreibung |
|---|---|
| onreadystatechange | Definiert eine Funktion, die aufgerufen wird, wenn sich die readyState-Eigenschaft ändert |
readyState
| Eigenschaft | Beschreibung |
|---|---|
| readyState | Enthält den Status der XMLHttpRequest. |
| 0: Anfrage nicht initialisiert | |
| 1: Serververbindung aufgebaut | |
| 2: Anfrage erhalten | |
| 3: Anfrage bearbeiten | |
| 4: Anfrage abgeschlossen und Antwort ist bereit |
ServerResponse
| Eigenschaft | Beschreibung |
|---|---|
| responseText | Gibt die Antwortdaten als Zeichenfolge zurück |
responseText
| Eigenschaft | Beschreibung |
|---|---|
| status | Gibt die Statusnummer einer Anfrage zurück |
| 200: "OK" | |
| 403: "unzulässig" | |
| 404: "Nicht gefunden" |
statusText
| Eigenschaft | Beschreibung |
|---|---|
| statusText | Gibt den Statustext zurück (z. B. "OK" oder "Nicht gefunden") |
Beispiel
| request.onreadystatechange = checkData; |
| function checkData(){ |
| if(request.readyState == 4){ |
| if(request.status == 200){ |
| document.getElementById("demo").innerHTML = (request.responseText); |
| } else { |
| document.getElementById("demo").innerHTML = (" Fehler - " + request.status + ": " + request.statusText); |
| } |
| } |
| } |
- War der Prozess auf dem Server erfolgreich wird nun der Inhalt (in unserem Beispiel das Text-Dokument hello.txt) von Javascript verarbeitet.
- Mit der DOM-Manipulation wird nun der Inhalt beim entsprechen HTML-Tag ausgeben.
| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>AJAX-Funktion einrichten | strassencoder.ch</title> |
| <script> |
| var request; |
| function AJAX(){ |
| request = new XMLHttpRequest(); |
| request.open("GET", "hello.txt" , false); |
| request.onreadystatechange = checkData; |
| request.send(null); |
| } |
| function checkData(){ |
| if(request.readyState == 4){ |
| if(request.status == 200){ |
| document.getElementById("demo").innerHTML = (request.responseText); |
| } else { |
| document.getElementById("demo").innerHTML = (" Fehler - " + request.status + ": " + request.statusText); |
| } |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <h3 id="demo">AJAX-Übertragung</h3> |
| <form action=""> |
| <button type="button" onclick="AJAX()">Zeige mir Inhalt von hello.txt</button> |
| </form> |
| </body> |
| </html> |
