Kit-Help.de - Archiv ++ PHPKIT Support ++ Webdesign ++ Tutorials ++

Willkommen im Foren Archiv von Kit-Help.de Gast !!

Hier findest du das alte Kit-Help.de Forum, allerdings ohne jegliche Schreibrechte, dieses dient lediglich als Archiv, zum Nachschlagen älterer vielleicht hilfreicher Beiträge rund um die Themen Webprammierung als auch dem CMS PHPKit, ebenso zu finden sind kleinere von Usern verfasste Tutorials. Die Downloads sowie Tutorials von Kit-Help wurden von unserer Partnerseite HTH-C.com übernommen, und sind dort aufzufinden.

vorheriges Thema nächstes Thema

3 Posts in diesem Thema (offen)

Seiten (1): (1)

Autor

Beitrag

	Frozen

Ajax

131 Beiträge - Gelegenheitsposter

Hey leute!

Ich fange grade mit Ajax an.
Aus der Vergangenheit weiß ich, dass man oft sehr viel intensiver und erfolgreicher lernen kann wenn man das gelernte gleich reproduziert

deswegen dieses kleine Tutorial.
(copyright liegt bei chaim dönnewald - bei verwendung bitte angeben

danke)
Es soll zum einen andern - die sich auch mit Ajax beschäftigen - die möglichkeit geben, einen Einblick u gewinnen und mir selbst abei helfen das gelernte zu verinnerlichen.

Ich habe mir vorgenommen regelmässig ein bisschen Ajax zu lernen (vielleicht schaffe ich es ja täglich) und hier meine fortschritte in tutorialform zu dokumentieren.

WEnn sich außer mir auch jemand mit Ajax beschäftigt, würde ich micht echt freuen wenn ihr eurer wissen hier beisteuret

so und nun los
Lektion 1 8)

1. Was ist Ajax?
Ich hasse ja eigentlich solche Einleitung aber na ja ein bisschn "Theoriewissen" sollte vielleiht auch ab und an sein

Ajax ist eine abkürzung für
* Asyncronous
* JavaScript
* and
* XML

Zitat
Ajax stellt eine Kombination aus länger existierenden Technologien da. JavaScript wird benutzt um im Browser des Client eine Anfrage zum Server zu stellen. Wenn diese Anfrage vom Server bearbeitet wurde, wird eine Funktion beim Client ausgeführt. Die Nachrichten die der Server verschickt, sind hierbei oft in XML codiert. Die Codierung in XML ist jedoch nicht zwingen, es kann auch eine Codierung als simpler Text erfolgen. XML bietet sich aber an um einen standardisierten Mechanismus zum parsen von Daten zu haben.

Wie oben bereits erwähnt, führt der Server etwas aus und sendet eine Antwort als XML Dokument. Die Implementierung auf der Serverseite kann in einer beliebigen Programmier oder Skriptsprache realisiert werden. In diesem Tutorial und den Schaubildern verwende ich jedoch PHP als serverseitige Skriptsprache.

Da die Anforderung vom Browser des Benutzers über JavaScript ausgelöst wird und mit JavaScript auch die Verarbeitung der Antwort erfolgt, ist kein Reload der Webseite notwendig. In modernen Webandwendungen wird diese Technologie gerne benutzt, um ein ähnliche Verhalten der Anwendung wie bei einer herkömlichen Desktopanwendung zu realisieren.

Da ein gewisser Teil des Codes von Ajax Anwendungen immer ähnlich ist, gibt es im Internet einige Frameworks die die Programmierung von Ajax Anwendungen erleichtern wollen.

(Quelle: Link 1)

Hier habe ich ein ein Beispiel auf englisch gefunden: http://www.sematopia.com/?p=34

Dieses wollte ich nun genauer erklären

(es wird darauf hingewiesen, dass das Beispiel nur im firefox geht... laut drweb.de soll es aber auch im IE geben, wenn man javascript anpasst)

zum testen hab ich das ganze mal hier installiert:
www.kayela.de/ajax

Wir ihr seht, sind auf der Seite 2 verschiedene Arten darsgestellt um zwei Zahlen miteinder zu multiplizieren.

Die klassische Methode mit PHP

-> Beide zahlen werden innerhalb einer Funktion miteinander multipliziert und das ergebnis im nebenstehenden feld angezeigt

Die Ajaxmethode:
im prinzip das selbe, der unterschied die webseite muss nicht neu geladen werden !!!

So gehen wir mal den Code durch

Die index.php Datei.

Quell-Code:

1
2
3
4
5
6
7
8
9

include("ajaxClass.php");

$objSem = new ajax;

$objSem->readURLParameters();

$objSem->staticExample();

echo $objSem->result;

Die Klasse ajaxClass.php wird geladen.

(Der Rest der Index.php steht etwas weiter unten)

Nun kommt ein wenig OOP Objekt orientierte Programmierung
Eine neue Instanz der Klasse Ajax wird erzeugt und die beiden funktionen readURLParameters(); und staticExample(); werden bearbeitet. am ende wird das ergebnis ausgegeben.

So die Funktionen findet ihr wo?
Natürlich in der ajaxClass.php

hier der Code:

Quell-Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?php

class ajax {

var $queryParam = array();

var $result = 0;

var $num1 = 0;

var $num2 = 0;

function readURLParameters() {

$qstr = explode("&", $_SERVER['QUERY_STRING']);

foreach ($qstr as $value) {

$paramVal = explode("=",$value);

if (array_key_exists(1,$paramVal)) {

$this->queryParam[$paramVal[0]] = $paramVal[1];

}

function staticExample() {

if (array_key_exists("num1",$this->queryParam) & array_key_exists("num2",$this->queryParam)) {

$this->result = $this->queryParam["num1"] * $this->queryParam["num2"];

$this->num1 = $this->queryParam["num1"];

$this->num2 = $this->queryParam["num2"];

}

Sooo dann gehen wir mal schritt für schritt durch

Also erstmal hier findet ihr die beiden Funktionen die erste liest die Parameter aus der URL aus

--> Bei der Abfragae über das PHP Beispiel werden die eingegebenen Werte in die URL übertragen, diese müssen dann noch vom Skript wieder aus der URL ausgelesen werden um verarbeitet werden zu können! Dies tut diese Funktion!
Ich werde jetzt nicht näher auf diese Funktion eingehen, weil es sich dabei nur um PHP handelt

Funktion 2
staticExample

wie dr Name schon sagt, ist sie für das Standard Beispiel zuständig, also das Beispiel mit PHP
hier brauch ich wohl auch nicht näher drauf eingehen? Im Prinzip multipliziert sie nur auf klassischem wege also zahl1 * zahl2 und speichert das ergebnis in einer neuen Variable

so um nochmal auf die Index.php zurück zu kommen

der restliche code

Code:

<html>

<body>

<p>AJAX Example:</p>

<input type="text" name="num1" id="num1"></input> *

<input type="text" name="num2" id="num2"></input> =

</form>

<p>Standard Example:</p>

<input type="text" name="num1" id="num1" value=<? echo $objSem->num1 ?>></input> *

<input type="text" name="num2" id="num2" value=<? echo $objSem->num2 ?>></input> =

<input type="text" name="result" id="result" value=<? echo $objSem->result ?>></input>

</form>

</body>

</html>

Das meiste ist ja üblicher HTMl Code dürfte also nicht so schwer sein

wichtig ist:
Die ajax.js Datei wird geladen
Es werden zwei formulare erstellt (im PHP Formular werden die eingegeben werte - sofern vorhanden - als standardwerte eingetragen)

und:
Das Standardformular schickt die Eingaben an die Seite !
Deswegen wird die Page neu geladen !
Das Ajax Formular hingegen sendet die Eingaben an die Funktion return ajax_call()

Die eigentliche Ajax datei
hier die ajax.js

Code:

var xmlhttp=false;

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {

xmlhttp = new XMLHttpRequest();

}

function ajax_call() {

xmlhttp.open("GET", 'ajaxWork.php?num1=' +

document.getElementById('num1').value +

'&num2=' + document.getElementById('num2').value , true);

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4) {

document.getElementById('result').value = xmlhttp.responseText;

}

xmlhttp.send(null)

return false;

}

Ok wahrscheinlich gehts euch so wie mir und das ganze sieht auf den ersten Blick zwar irgendwie vertraut (Die Syntax kennt man ja auch Javascript) aber dennoch verwirrend aus

deswegen eins nach dem anderen

Zuerst wird die Variable var xmlhttp auf false gesetzt
ich hab dann auch gleich mal gegoogled und folgendes ist heraus gekommen 8)
http://de.wikipedia.org/wiki/XMLHttpRequest

Hier wird erklärt worum es geht
ich fasse mal eben zusammen

Zitat
XMLHttpRequest ermöglicht einem Skript einer Webseite, Daten dynamisch vom Webserver abzurufen, ohne dass dazu die Seite neu geladen werden müsste

Das haben wir ja in unserem Beispiel

Zitat
Da XMLHttpRequest Anfragen asynchron verarbeiten kann, muss ein Script nicht warten, bis die Anfrage beantwortet ist, sondern kann solange andere Aufgaben abarbeiten.

Da spart man ja richtig Zeit

Zitat
Trotz der guten Verfügbarkeit der API in neueren Browsern wird an ihr auch Kritik geübt, da es schwierig ist, Webseiten, die XMLHttpRequest einsetzen, auch älteren Browsern in vollem Umfang zugänglich zu machen. (...) Ein weiterer Kritikpunkt ist, dass sich Web-Anwendungen, die auf XMLHttpRequest setzen, nur schwer barrierefrei umsetzen lassen.

Aus meiner Sicht beides nicht unwichtige Kritikpunkte. Bei Punkt eins sage ich mal: Es kommt auf die Zielgruppe an, wenn man Ajax auf einer Tutorialpage o.ä. anwenden will kannman eigentlich davon ausgehen, dass die Besuhcer über neuere Browser etc verfügen...

Code:

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {

xmlhttp = new XMLHttpRequest();

}

Wenn also die Variable xmlhttp leer ist und XMLHttpRequest noch nicht definiert wurden:

Wird der Variable xmthttp eine neue instanz der klasse XMLHttPRequest zugeteilt.
Dabei handelt es sich um eine vorgefertigte klasse (müsste so sein oder?)
Wenn ich das richtig verstanden habe ist ja XMLHttpRequest die Anfrage die an das Skript gesendet wurde, also speichert die Variable xmlhttp nun alle eingaben

Code:

function ajax_call() {

xmlhttp.open("GET", 'ajaxWork.php?num1=' +

document.getElementById('num1').value +

'&num2=' + document.getElementById('num2').value , true);

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4) {

document.getElementById('result').value = xmlhttp.responseText;

}

xmlhttp.send(null)

return false;

}

Hier nun endlich das Herzstück der Arbeit

Die Funktion ajax_call

1. Sie öffnet aus der Variablen xmlhttp (die ja die Anfrage speichert) die Werte aus dem Formular die sich in den Feldern num1 und num2 und multipliziert sie miteinander
2. "onreadystatechange"

Dazu:

Zitat
An dieser Stelle muss man dem HTTP Request-Objekt lediglich mitteilen, welche JavaScript-Funktion die Antwort abarbeiten soll. Dies erreicht man, indem man die onreadystatechange-Eigenschaft des Objektes genauso nennt wie die JavaScript-Funktion, welche man benutzen möchte (...)

(http://developer.mozilla.org/de/docs/AJAX:Getting_Started)

Dieser teil hier if (xmlhttp.readyState==4) { prüft ob die xmlhttp überhaupt VOLLSTÄNDIG ist (siehe dazu einfach wieder Link 2 )
Wenn alles klappt sendet er danach alles wieder an das Formular dabei ird der wert von "result" auf das ergebnis gesetzt

und voilá

so und das war vielleicht etwas trocken....

deswegen kommt im nächsten beitrag etwas selbst erprobtes

Kommentare, Fragen, Korrekture, Ergänzungen?

Der Post wurde 1 mal editiert, zuletzt von BooGT am 08.04.2007 - 15:07.

Beitrag vom 08.04.2007 - 13:51

	Frozen

131 Beiträge - Gelegenheitsposter

So nun Teil 2
Ein kleines Beispiel
dieses basiert auf den erfahrungen die ich hier: http://developer.mozilla.org/de/docs/AJAX:Getting_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 java script:

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/AJAX:Getting_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:

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');

// 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:

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:

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

ich denk mal das schafft ihr auch ohne weitere erkklärungen ich habs ja oben schonma beschrieben

Hier der gesamte Code:

Code:

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/AJAX:Getting_Started

Beitrag vom 08.04.2007 - 13:52

	Frozen

131 Beiträge - Gelegenheitsposter

So Teil 3 - ich glaube so langsam, dass Ajax süchtig macht...

ich habe vorhin eine kleine Datei gebastelt, die ich euch zu allererstmal zeigen möchte hier findet ihr sie:
http://kayela.de/ajax/beispiel3.htm

Hier erstmal der Code:

Code:

<html>

<head>

<title>Meine ersten Ajax Erfahrungen</title>

<!--

function doIt(){

var req = null;

try{

req = new XMLHttpRequest();

}

catch (ms){

try{

req = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (nonms){

try{

req = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (failed){

req = null;

}

if (req == null)

alert("Error creating request object!");

req.open("GET", 'test2.htm', true);

req.onreadystatechange = function(){

switch(req.readyState) {

case 4:

if(req.status!=200) {

alert("Fehler:"+req.status);

}else{

document.getElementById('eins').innerHTML = '<strong>'+

req.responseText

+'</strong>';

}

break;

default:

return false;

break;

}

};

req.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

req.send(null);

}

function doIt2(){

var req = null;

try{

req = new XMLHttpRequest();

}

catch (ms){

try{

req = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (nonms){

try{

req = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (failed){

req = null;

}

if (req == null)

alert("Error creating request object!");

req.open("GET", 'test.html', true);

req.onreadystatechange = function(){

switch(req.readyState) {

case 4:

if(req.status!=200) {

alert("Fehler:"+req.status);

}else{

document.getElementById('eins').innerHTML = '<strong>'+

req.responseText

+'</strong>';

}

break;

default:

return false;

break;

}

};

req.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

req.send(null);

}

//-->

</script>

</head>

<body>

<a href="java script:doIt()">Klick mich an</a><br>

</div>

</body>

</html>

so gehen wir mal schritt für schritt durch - ich gehe davon aus, dass ihr oben mitgelesen habt und ich bekanntes nicht wieder bis ins detail erklären muss ^^

--- Was macht das Skript?
=> Das Skript liest den Inhalt einer HTML Datei aus, wenn man auf einen Link klickt.
=> In dieser Datei befindet sich wiederrum ein Link, der eine andere Datei läd, wenn sie geklickt wird

--- Was brauchen wir also?
=> Eine Datei, von der aus wir alles ausführen

Diese Datei beinhaltet:
* Zwei Javascript Funktionen, die jeweils eine andere HTML Datei laden
* einen Link um die erste JS funktion auszuführen
=> eine HTML Datei mit einem Link um die andere Datei wieder zu laden

=> eine Datei mit beliebigem Text

So dan gehen wir mal stückchen für stückchen den code durch

Zuerst kommt wieder die Abfrage, die wir schon anderen Beispielen kennen, die prüft welcher Browser verwendet wird etc... dann folgt eine Überprüfung auf Fehler und wenn alles gut geht gehts los =)

Code:

req.open("GET", 'test2.htm', true);

req.onreadystatechange = function(){

switch(req.readyState) {

case 4:

if(req.status!=200) {

alert("Fehler:"+req.status);

}else{

document.getElementById('eins').innerHTML = '<strong>'+

req.responseText

+'</strong>';

in req ist wieder das "Objekt" gespeichert das vom Browser verwendet wird. Es läd auf dem weg "GET" die datei test2.htm und true bedeutet, dass die abfrage asynchron durchgeführt wird.
Dann checkt das Skript welchen wert readyState hat, ihr erinnrt euch ? Das sind diese 5 Stufen die schon von http://developer.mozilla.org/de/docs/AJAX:Getting_Started beschrieben wurden. Wenn es den wert 4 hat, ist der Vorgang des ladens abgeschlossen.
Dann prüft er nochmal ob ein Fehler vorliegt und wenn nicht:

Code:

document.getElementById('eins').innerHTML = '<strong>'+

req.responseText

+'</strong>';

Im Dokument macht er aus dem Teil, der mit der ID eins bezeichnet ist also diesem "div-Bereich" ein element. Dieses element wird mit Text gefüllt und zwar handelt es sich dabei um den Text, der aus req gelesen wurde. strong bedeutet lediglich, dass der Text fett dargestellt werden soll. Man könnte also das strong auch durch i ersetzen dann wird der text kursiv dargestellt. So hab ich es bei der zweiten Funktion gemacht

Ihr müsst bei der zweiten Funktion nur den Namen ändern (den Link dementsprechen angleichen) und die zu ladende HTML datei.

Da Programmierer Grundsätzlich faul sind, muss es natürlich auch ne einfachere Methode geben. Wir können einfach das was sich ändert durch variablen ersetzen und diese durch den Link übergeben. Dann können wir auch darauf verzichten den Funktionsnamen zu ändern, denn dann brauchen wir ja nur eine Funktion

Was muss man dann noch ändern? Richtig! Den Namen der Datei, die geladen werden soll.

Dabei können wir auf das Wissen zurückgreifen, dass wir schon in anderen Beispielen erworben haben. Da habe ich nämlich ähnlich gearbeitet

Wir brauchen eine Variable
ich nenne sie einfach mal

Datei
Die wird als Parameter zwischen die Klammern der Funktion angegeben
die Funktion nenne ich einfach mal
dateiLaden[b]
[b]Achtet darauf, dass ihr den Funktionsnamen immer gleich schreibt. Zwischen Groß und kleinschreibung wird unterschieden ^^

So also hier der Code:

Code:

<!--

function dateiLaden(datei){

var req = null;

try{

req = new XMLHttpRequest();

}

catch (ms){

try{

req = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (nonms){

try{http://talk.iwebtool.com/thread10377.html

req = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (failed){

req = null;

}

if (req == null)

alert("Error creating request object!");

req.open("GET", datei, true);

req.onreadystatechange = function(){

switch(req.readyState) {

case 4:

if(req.status!=200) {

alert("Fehler:"+req.status);

}else{

document.getElementById('eins').innerHTML = '<strong>'+

req.responseText

+'</strong>';

}

break;

default:

return false;

break;

}

};

req.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

req.send(null);

}

//-->

</script>

</head>

<body>

<a href="java script:dateiLaden('test3.htm')">Klick mich an</a><br>

</div>

</body>

</html>

und hier der von test3.htm

Code:

Hallo

<a href="java script:dateiLaden('test.html')">klick mich an =)</a>

Soo
ich fand das schonmal voll praktisch und hab mir überlegt man könnte ja auch mal ein Beispiel machen das wirklich so zum Einsatz kommen kann

Deswegen habe ich mich für ein kleines Menü entschieden

=> Es gibt mit sicherheit bessere und einfachere lösungen um ein menü zu realisieren nur leider kann ich derzeit noch keine bessere umsetzenn

<=

Vorüberlegungen:
Wir haben eine Datei, die nennen wir mal menue.html das ist unser Menü

und dieses Menü hat 3 Obermenüpunkte zB Sport, Musik und Internet mit jeweils 5 Links darin.. die könnt ihr einfach durchnummerieren oder so.. sie müssen ja im prinzip auch nicht gehen

ist ja nur zum testen
Die Obermenüpunkte bekommen jeweils HTML Seiten in denen sich die unterpunkte befinden. Also
eine HTML Seite
Sport eine für musik und eine für internet (oder wie uach immer ihr die scahen nennen wollt) ich hab sie einfach mal musik.htm, sport.htm und internet.htm genannt =) und sie sind alle gleich aufgebaut. Einfach nur Links

also zB <a href="#">Link1</a> usw usw

(weiter unten kommen wir acuh darauf wie man die links in eineiner eigenen div läd ;D )

So das herzstück ist ja nun die datei menü.html =)

Code:

<html>

<head>

<title>Meine ersten Ajax Erfahrungen</title>

<!--

function dateiLaden(datei){

var req = null;

try{

req = new XMLHttpRequest();

}

catch (ms){

try{

req = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (nonms){

try{

req = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (failed){

req = null;

}

if (req == null)

alert("Error creating request object!");

req.open("GET", datei, true);

req.onreadystatechange = function(){

switch(req.readyState) {

case 4:

if(req.status!=200) {

alert("Fehler:"+req.status);

}else{

document.getElementById('eins').innerHTML = datei+':<br><strong>'+

req.responseText

+'</strong>';

}

break;

default:

return false;

break;

}

};

req.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

req.send(null);

}

//-->

</script>

</head>

<body>

<a href="java script:dateiLaden('sport.htm')">Sport</a><br>

<a href="java script:dateiLaden('musik.htm')">Musik</a><br>

<a href="java script:dateiLaden('internet.htm')">Internet</a><br>

</div>

</div>

</body>

</html>

ich find diese Art von Menü sehr viel übersichtlicher (wenn auc einfacher und man bruacht mehr dateien.. :-/ aber die lösung kommt bestimmt bald

) als die üblichen Javascript menüs

ich bin grade dabei auf meiner HP etwas ähnliches als "Newsübersicht" zu programmieren

ich zeig euch später das Ergebnis =)

Beitrag vom 08.04.2007 - 13:53

Baumstruktur - Signaturen anzeigen

Seiten (1): (1)

vorheriges Thema nächstes Thema

Gehe zu:

Es ist / sind gerade keine registrierte(r) Benutzer und 6 Gäste online. Neuester Benutzer: Chinchilla
Mit 214 Besuchern waren am 17.05.2010 - 12:26 die meisten Besucher gleichzeitig online.

aktive Themen der letzten 24 Stunden - Top-User