Ajax
#2
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 Smile

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 Smile
Ü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 Smile

Im Headbereich arbeiten wir mit Javascript:

Zuerst setzen wir http_request auf false!

---> Was st das nochmal?
Zitat: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 Smile

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ß Wink)

Hierzu ein kleiner Exkurs Smile

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 Winkdanke

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 Big Grin
Wenn sie als Ergebnis ergibt, dass der User IE nutzt, gibt sie einen Alert aus, der ihm das sagt Wink
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 Smilefü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 Big Grin

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

Zitat: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
Zitat:(...)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 Smileich denk mal das schafft ihr auch ohne weitere erkklärungen ich habs ja oben schonma beschrieben Wink

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 Big Grindanke

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

Ich freue mich immer über Nachrichten. Falls ihr über einen Facebookaccount verfügt, ist ratsamer mich darüber zu kontaktieren, weil ich diese Nachrichten i.d.R. schneller beantworte.
  Zitieren


Nachrichten in diesem Thema
Ajax - von Mashoo - 06.04.2007, 20:36
[Kein Betreff] - von Mashoo - 06.04.2007, 23:06
[Kein Betreff] - von Mashoo - 07.04.2007, 11:13
[Kein Betreff] - von pattex - 05.05.2007, 17:08
[Kein Betreff] - von KingGO - 06.05.2007, 03:50
[Kein Betreff] - von Mashoo - 06.05.2007, 10:35
[Kein Betreff] - von pattex - 06.05.2007, 16:02
[Kein Betreff] - von KingGO - 06.05.2007, 17:10
[Kein Betreff] - von pattex - 06.05.2007, 17:16
[Kein Betreff] - von KingGO - 06.05.2007, 17:19
[Kein Betreff] - von pattex - 06.05.2007, 17:25
[Kein Betreff] - von KingGO - 06.05.2007, 17:28
[Kein Betreff] - von pattex - 06.05.2007, 17:43
[Kein Betreff] - von KingGO - 06.05.2007, 20:47
[Kein Betreff] - von Mashoo - 07.05.2007, 07:47
[Kein Betreff] - von pattex - 07.05.2007, 15:10
[Kein Betreff] - von Mashoo - 07.05.2007, 17:34
[Kein Betreff] - von CuleX - 08.05.2007, 14:46

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 7 Gast/Gäste