Ajax

[Mashoo]

So nun Teil 2
Ein kleines Beispiel
dieses basiert auf den erfahrungen die ich hier: http://developer.mozilla.org/de/docs/AJA...ng_Started gesammelt habe

In dem Beispiel möchte ich ein HTML Dokument auslesen und den Inhalt in einem Alert wiedergeben.

Was müssen wir also tun?
Wir erstellen auf jedenfall schonmal eine Funktion, die den Inhalt aus der Datei ausliest
und eine weitere Funktion, die diesen Inhalt in das Fensterchen schreibt
Über einen Link, button oder auch unaufgefordert wird der alert dann geöffnet.

Wir brauchen also diesmal
* Ein ganz normales HTML Dokument
* Ein html dokument (z.b. test.html) mit dem Text der aufgerufen werden soll - legt dieses dokument im selben verzeichnis ab wie das skript oder gleicht den link im funktionsaufruf an

Im Headbereich arbeiten wir mit Javascript:

Zuerst setzen wir http_request auf false!

---> Was st das nochmal?

Später implementierten Mozilla, Safari und andere Browser eine Klasse namens XMLHttpRequest, welche die Methoden und Eigenschaften des originalen ActiveX-Objektes von Microsoft unterstützt.

(http://developer.mozilla.org/de/docs/AJA...ng_Started)
In der Variable wird also später gespeichert um welches "objekt" es sich handlt.. damit es nicht zu problemen mit verschiedenen Browsern kommt.

Code:

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

Zuerst haben wir die Variable http_request auf false gesetzt, damit sie leer ist - so können wir sie danach mit dem inhalt füllen, den wir benötigen

Hier wird eine Abfrage durchgeführt, die überprüft welcher Browser verwendet wird.
Wird das XMLHttpRequest verwendet, handelt es sich um Mozilla, Safari etc etc etc. Falls wirklich jemand das ActiveXObject verwendet muss er ein IE User sein (steinigt ihn, nein spaß )

Hierzu ein kleiner Exkurs

http://kayela.de/ajax/beispiel1.htm

Eine kleine Abfrage ob man einen Ie hat... ich konnte sie lleider bisher nur im Firefox testen, deswegen würde ich mich freuen wenn sich ein paar IE Nutzer nicht angegriffen fühlen, sondern auch mal testen danke

hier der Code mit erklärung

Code:

<script type="text/javascript" language="javascript">

var http_request = false;

function browser() {

http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');

alert('Nein hast du nicht :D');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
alert('ja..... auf zur steinigung');
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
alert('ja..... auf zur steinigung');
} catch (e) {}
}
}



}
</script>

<font onclick="browser()">Habe ich einen Internet Explorer?</font>

Es gibt eine Funktion sie heißt.... (wär hätts gedacht) BROWSER

Hier wird die Abfrage gestartet die ich schon oben erwähnt hatte
Wenn sie als Ergebnis ergibt, dass der User IE nutzt, gibt sie einen Alert aus, der ihm das sagt
Nutzt er einen anderen Browser bekommt der User den Alert, dass er keinen IE nutzt.

Die ganze Funktion wird über onclick aufgerufen.
Das ganze geht auch mit einem normalen Link

Code:

<a href="javascript:browser();">Test mit link</a>

hierbei ist zu beachten, dass man bei href noch JAVASCRIPT erwähnen muss =)


So nun wieder zurück zum Topic

Wenn wir abgefragt haben, welcher Browser verwendet wird und das Objekt, as verwendet wir in http_request gespeichert wurde, machen wir eine kleine Fehlermeldung für den Fall, dass der Browser nicht erkannt wurde oder ähnliches.
Wir prüfen ob http_request IMMERNOCH leer ist (wir haben die Variable ja vor der abfrage auf false gesetzt. Bei der Abfrage wurde sie - wenn alles geklappt hat - mit einem bestimmten wert gefüllt)

Code:

if (!http_request) {
alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
return false;
}
http_request.onreadystatechange = alertInhalt;
http_request.open('GET', url, true);
http_request.send(null);

Also if(!http_request) { // ist die variable leer?
wenn ja wird eine Fehlermeldung zurückgegeben

Wenn dieser Teil abgeareitet wurde, werden die Sachen, die wir schon erarbeitet hatten in der Funktion alert gespeichert
siehe dazu uach hier:

http_request.onreadystatechange = nameDerFunktion;

Es ist zu beachten, dass nach dem Funktionsnamen keine Klammern auftauchen und der Funktion keine Parameter übergeben werden. Des weiteren kann man anstelle der Angabe eines Funktionsnamens die Funktion "on the fly" definieren (...)

Danach muss der Request wieder abgesetzt werden

(...)Dazu ruft man die Methoden open() und send() der HTTP-Request Klasse auf (...)

Code:

http_request.open('GET', url, true);
http_request.send(null);

So und nun kommen wir zur zweiten Funktion!
die alertinhalt ()

Code:

function alertInhalt() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('Bei dem Request ist ein Problem aufgetreten.');
}
}

}

so und zur guter letzt müssen wir das ganze noch aufrufen ich denk mal das schafft ihr auch ohne weitere erkklärungen ich habs ja oben schonma beschrieben

Hier der gesamte Code:

Code:

<script type="text/javascript" language="javascript">

var http_request = false;

function macheRequest(url) {

http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
return false;
}
http_request.onreadystatechange = alertInhalt;
http_request.open('GET', url, true);
http_request.send(null);

}

function alertInhalt() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('Bei dem Request ist ein Problem aufgetreten.');
}
}

}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="macheRequest('test.html')">Einen Request absetzen
</span>

Anmerkung: bei mir funktioniert nur online ! Ich weiß aber nicht ob es an mir liegt oder am skript... wenn jemand anders es schafft das ding offline zum laufen zu bringen würd ich mich über ne meldung freuen danke

Die Zitate stammen alle von http://developer.mozilla.org/de/docs/AJA...ng_Started