|
SEO Welten
Buchempfehlungen
|
|
Content von Textdateien mit Ajax verarbeiten
Asynchrone Übertragung per HTTP und Verarbeitung mit JavaScript
Übersicht / Seite:
- Dateien mit PHP einbinden (Dateien includen oder requirieren)
- Weitere Möglichkeiten mit PHP (Dateien mit Schleifen einlesen)
- Dateien mit HTML einbinden (mit iFrame oder Object)
- Textdateien mit JavaScript einfügen (Beispiele und Lösungsansätze)
- Content mit Ajax verarbeiten (eine kleine Einführung)
5.1 Verarbeitung von XML-Dateien (Attribute einlesen und ausgeben)
5.2 Mehrere Requests ausführen (Requests hintereinander abarbeiten)
5.3 Parallel Requests ausführen (Anfragen gleichzeitig senden)
Ajax, Content von Textdateien verarbeiten
Nachfolgend eine kleine Einführung, wie sich mit Hilfe von Ajax der Content
von Textdateien leicht "einbinden" und verarbeiten lässt, wobei einbinden eigentlich nicht das
richtige Wort ist. Im Gegensatz zu den bisherigen Beispielen (mit Ausnahme der Schleifen), wird
mit Hilfe von Ajax keine Datei eingebunden, sondern es werden Daten vom Server angefordert und im Dokument
verarbeitet und ausgegeben.
Obwohl der Begriff Ajax sich eigentlich auf die asynchrone Übertragung und Verarbeitung von XML-Daten mit
JavaScript bezieht (Asynchronous JavaScript and XML), so ist Ajax dennoch nicht nur für die
Übertragung von XML-Daten geeignet. Reine Textdaten lassen sich ebenso problemlos übertragen. Je nach
dem, ob die Rückgabe als Textdaten oder als XML-Daten erfolgen soll, muss die Eigenschaft von Response
vorgewählt werden. Zur Auswahl stehen responseText und responseXML. Da es sich bei der kleinen testObj (datei.txt) von
Seite 1 um eine reine Textdatei handelt, kommt für das folgende Beispiel responseText in Frage.
Vom Prinzip her wird mit new XMLHttpRequest() ein neues Request-Objekt erstellt und mit der open() Methode
eine Verbindung zum Webserver geöffnet. Hier müssen zwei Parameter angegeben werden, je nach Bedarf gefolgt
von weiteren optionalen Parametern. Zu den Pflichtangaben gehören die Methode, mit der die Daten übertragen
werden sollen, in der Regel wird es GET oder POST sein. Im Beispiel wurde GET gewählt. Der zweite Pflichtparameter
enthält den Namen der zu öffnenden Datei. Als dritter Parameter kann true oder false angegeben werden, je
nachdem ob der Datenverkehr synchron (false) oder asynchron (true) verarbeitet werden
soll. Entfällt die Angabe des Parameters, so erfolgt die Verarbeitung asynchron. Die asynchrone Übertragung
wird im Allgemeinen bevorzugt.
Mit der Methode send() wird eine Anfrage gesendet und der Eventhandler onreadystatechange reagiert auf den
Status von Verbindungen. Weiterhin ist readyState erwähnenswert, da in readyState ein Wert des Verbindungsstatus
enthalten ist. Der Verbindungsstatus 4 bedeutet, dass die Übertragung komplett erledigt ist. Mit der Methode
getElementById() werden dann die Daten an der entsprechenden Stelle ins Dokument geschrieben.
Kleines Ajax-Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Nur ein Test</title>
<script type="text/javascript">
var testObj = null;
testObj = new XMLHttpRequest();
function eineFunktion() {
if (testObj.readyState == 4) {
document.getElementById("meineDaten").innerHTML += testObj.responseText;
}
}
window.onload = function() {
testObj.open("GET", "datei.txt");
testObj.onreadystatechange = eineFunktion;
testObj.send(null);
}
</script>
</head>
<body>
<div align="center">
<h1>Nur ein Test</h1>
<p id="meineDaten"><b>Ausgabe:</b> </p>
</div>
</body>
</html>
Browserweiche
Wenn Sie das obige Listing nicht nur zu Testzwecken verwenden, sondern das Listing für ein Script in der
Praxis nutzen möchten, sollten Sie eine Browserweiche verwenden, um auch ältere Versionen des Internet Explorers
anzusprechen. Browserweichen gibt es in den unterschiedlichsten Varianten, wobei die untere Variante reichen
sollte, um Browser wie den Opera, den Firefox, den Safari und den IE in den Versionen 6 bis 8 anzusprechen.
Der Grund für eine Browserweiche ist recht simpel. Während zum Beispiel der Firefox XMLHttpRequest als Objekt
bereits ab der Version 1.2 kennt, nannte es sich beim IE 5 bis 6 noch ActiveXObject. Erst ab der Version
IE 7 kennt auch der Internet Explorer das XMLHttpRequest Browserobjekt.
Um eine Browserweiche zu realisieren, sind die beiden nachfolgenden Codezeilen gegen das untere Listing
auszutauschen.
var testObj = null;
testObj = new XMLHttpRequest();
Browserweiche für einen Ajax-Request:
var testObj = null;
if (window.XMLHttpRequest) {
testObj = new XMLHttpRequest();
}
else if (window.ActiveXObject) {try {
testObj = new ActiveXObject("Msxml2.XMLHTTP");
}catch (ex) {try {
testObj = new ActiveXObject("Microsoft.XMLHTTP");
}catch (ex) {
}
}
}
Mehr zum Thema Einlesen und Ausgeben von Daten und Dateien mittels PHP, HTML oder mit Hilfe von JavaScript
auf den vorausgehenden Seiten.
weiterlesen: 1, 2, 3, 4 « / »
5.1
|
|
Navigation
Finden und
gefunden werden ...
- Optimierung -
Webcoding
Übersicht
Web Services
Tutorials &
diverse Listings
und vieles mehr...
Weitere Themen
Übersicht
|
