Ajax-Grundgerüst

DSB · 19.02.2006, 02:35

Ich habe mal ein (hoffentlich) allgemein verständliches Grundgerüst gemacht, welches das Zusammenspiel zweier Dateien und Übermittlung von Daten per Ajax erläutert.
Das gleiche Prinzip nutzt z.B. Google-Earth und so dürfte das für den ein oder anderen durchaus interessant sein.

Ich habe sehr viele Kommentare in das Script geschrieben, so dass das selbsterklärend sein sollte.
Bei Verständnisfragen stehe ich gern zur Verfügung.
Verbesserungen sind natürlich auch jederzeit willkommen.

Wir brauchen eine index.html, die den Ajax-Request macht:

Code:

<html>
    <head>
        <title>XMLHTTP example</title>
        <script type="text/javascript" language="javascript">

var http_request = false;
var aufruf=0;
var s_id=null;
var send='';

// erzeugt ein http_request-Element
function makeRequest(url) 
{
	// wie immer -> dämliche Fallunterscheidung, da Mikroschrott wieder ein eigenes Süppchen kocht
	if (window.XMLHttpRequest) 
	{ // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
    }
	else if (window.ActiveXObject) 
	{ // IE
    	http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }

	// definieren der Funktion, die die Übertragung des Dateistroms steuert
	http_request.onreadystatechange = getAnswer;

	// wir wollen unsere Daten per Post an die Zieldatei übergeben
	http_request.open('POST', url, true);
	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				
	// wenn bereits eine Session gestartet wurde übergeben wir diese ID an das PHP-Script
	// damit die in der Session abgespeicherten Werte wieder ausgelesen werden können
	if (s_id>'') send='s_id='+s_id;

	// Und los -> jetzt starten wir die Anfrage und das PHP-Script wird aufgerufen 
	http_request.send(send);
}

// ermittelt, ob die Rückgabe abgeschlossen und erfolgreich ist
function getAnswer() 
{
	// Übertragung schon fertig?
	if (http_request.readyState == 4) 
	{
		// Ja! Haben wir Fehler?
		if (http_request.status == 200) 
		{
			// Nein, dann Auswertung der Rückgabe starten
			parseXML(http_request.responseXML);
        } 
		else 	
		{
			// Ups, da ist was schief gelaufen
			alert('Der Aufruf per Ajax hat nicht funktioniert! Fehler.');
		}
	}
}

// Diese Funktion nimmt die XML-Ausgabe entgegen und "zerlegt" sie in ihre Parameter
function parseXML(xmldoc) 
{ 
	var parameterstring;
	// holen wir uns die <par>-Knoten der XML-Rückgabe und speichern sie in der Var pars
	var pars=xmldoc.getElementsByTagName('par');

	// nun müssen wir das XML-Dokument anhand der Knoten "par" durchlaufen und zerlegen
	// wir haben 8 Knoten -> session_id, aufruf und testvar und 5 Werte
	for (var i=0;i<8;i++)
	{
		// Wert des ersten Kinds des i-ten par-Knotens ermitteln
		// das Kind ist das, was zwischen <par> und </par> steht
		parameterstring=pars.item(i).firstChild.nodeValue; 

		// Übergabe des Strings an eine weitere Funktion die die Ausgabe auf dem Bildschirm übernimmt
		saveit(parameterstring);
	}

	if (aufruf<5) // hier machen wir für den Test 5 Aufrufe und lassen es danach gut sein. :-)
	{
		// Erzeugt einen http-Request und ruft die Datei test.php per Ajax auf
		makeRequest('test.php');
	}
	else alert("Fertig! Test erfolgreich beendet."); // Ende gut, alles gut! Keinen weiteren Aufruf starten.

}

// Nimmt einen Parameterstring wie "name=wert" entgegen und speichert den Inhalt im HTML-Element auf der Seite
function saveit(parameterstring)
{
	// zerlegen anhand des Gleichheitszeichens -> 
	// danach steht in parArr[0] der Name des Parameters
	// und in parArr[1] der Wert -> so können wir Name udn Wert gezielt ansprechen
	var parArr=parameterstring.split('=');

	// wenn es sich um Steuerparameter handelt -> übernehmen
	if (parArr[0]=='aufruf') aufruf=parArr[1];
	if (parArr[0]=='s_id') s_id=parArr[1];
	
	// und jetzt schreiben wir den ermittelten Wert auf die Seite
	// die Adressierung erfolgt über die ID des HTML-Elements der Seite (parArr[0])
	document.getElementById(parArr[0]).innerHTML=parArr[1];
}

        </script>
    </head>
    <body>
        <a href="#" onclick="makeRequest('test.php')">Starte Test</a>
<br><br>

Session-ID: <span id="s_id">nicht gestartet</span><br>
Testvariable: <span id="testvar"></span><br><br>
Aufruf: <span id="aufruf">0</span><br>
Wert1: <span id="wert1">0</span><br>
Wert2: <span id="wert2">0</span><br>
Wert3: <span id="wert3">0</span><br>
Wert4: <span id="wert4">0</span><br>
Wert5: <span id="wert5">0</span><br>
    </body>
</html>

Und eine test.php, die die XML-Rückgabe erzeugt:

Code:

<?php
// wir wollen ein XML-File an das aufrufende Script zurücksenden - hier kommt schonmal der korrekte Header
header('Content-Type: text/xml'); 

// Session ID ermitteln
$s_id=(isset($_POST['s_id'])) ? $_POST['s_id']:'';

if ($s_id>'')
{
	// Session bereits gestartet -> Wiederaufnahme
	session_start($s_id); 
	// alle Variablen aus der Session holen udn als globale Variablen verfügbar machen
	foreach($_SESSION as $var=>$val)
	{
		$$var=$val;
	}

	// Test ob der Aufruf auch tatsächlich korrekt aus der Session ermittelt wird
	switch ($aufruf)
	{
		case 1: $testvar="Ich bin die Var, die sich beim 2ten Aufruf meldet."; break;
		case 2: $testvar="Ich bin die Var, die sich beim 3ten Aufruf meldet."; break;
		case 3: $testvar="Ich bin die Var, die sich beim 4ten Aufruf meldet."; break;
		case 4: $testvar="Ich denke, jetzt sind wir aber fertig."; break;
	}
}
else
{
	// sonst Erstaufruf -> Session initieren
	session_start(); 
	// und initiaisieren der Variablen mit Startwerten
	$s_id=session_id();
	$_SESSION['aufruf']=0; 
	$_SESSION['testvar']='Ich liege in der Session';
	$testvar=$_SESSION['testvar']; // zum Test ob der Wert auch wirklich aus in der Session abgelegt ist
	$aufruf=1;
}

sleep(1); // Pause von einer Sekunde, damit wir die Bildschirmausgaben auch wirklich auf dem Screen sehen können

// XML-Datei erzeugen, ausgeben und an das Ajax-Script senden -> senden=Ausgabe per echo oder print
echo '<?xml version="1.0" encoding="ISO-8859-1" ?>'."\n";
// ein Wurzelknoten muss vorhanden sein
echo '<root>';
// jetzt ein paar Parameter erzeugen
// par ist mein selbstausgedachter Tag und steht für "Parameter"
echo '<par>s_id='.$s_id.'</par>'."\n";
echo '<par>testvar='.$testvar.'</par>'."\n";
echo '<par>aufruf='.$aufruf.'</par>'."\n";
// 5 Testwerte erzeugen, die an das Ajax-Script zurückgeliefert werden
for ($i=1;$i<10;$i++)
{
	echo '<par>wert'.$i.'='.($i+($aufruf-1)*5).'</par>'."\n";
}
// Ende des Wurzelelemenst
echo '</root>'."\n";

$aufruf++; // Den Aufruf des Scripts um eins erhöhen - dient nur zur Kontrolle 

// und speichern des Aufrufs in der Session
$_SESSION['aufruf']=$aufruf; 
?>

Dieses Script macht natürlich nichts sinnvolles und soll lediglich den Zusammenhang der Vorgehensweise erläutern.
Trotzdem wird hier das Prinzip von Ajax deutlich (hoffe ich *g*).

Viel Spaß beim Studieren.

19.02.2006, 02:40

weyhe scheint dir gut zu bekommen, vielen dank.

DSB · 19.02.2006, 03:20

Zitat:

Zitat von ingo

weyhe scheint dir gut zu bekommen, vielen dank.

Hehe, das hat wohl weniger mit dem Wohnort als mit der Trennung von meiner Ex-Freundin zu tun. Ich habe jetzt wieder mehr Zeit, um mich in Sachverhalte einzudenken.
Und Computer sind nunmal einfacher zu verstehen und logischer als Frauen.

Boris · 19.02.2006, 10:48

Vielleicht hättest du eine Idee, mir bei einem Problem zu helfen.

Für einen Kunden soll ich eine Website erstellen, bei der man auf einen Link klicken soll, bei dem sich ein CSS-Popup (verstecktes DIV) öffnen soll. Ein neuladen der Seite soll vermieden werden. Soweit ja kein Problem.

Das Problem ist, dass in diesem DIV entweder ein MP3 oder auch ein Video abgespielt werden soll, und es gibt mehrfach Links dieser Art auf einer Seite.

Da man ja schlecht alle MP3s und alle Filme in massig versteckten DIVs reinpacken kann (das wäre nicht mal für DSL toll *g*), wäre meine Idee, via Ajax die ensprechenden Inhalte in ein verstecktes DIV zu laden.

Wäre das möglich? Oder fällt dir eine andere Idee ein?

DSB · 19.02.2006, 10:54

Dafür würde ich kein Ajax verwenden.
Mach bei Klick das Div sichtbar und gib darin einem iFrame den URL eines PHP-Scripts, was die entsprechende Ausgabe generiert. Hier wird das streamen ja vom Player übernommen. Das würde sich mit Ajax beißen.

Boris · 19.02.2006, 12:31

Auch ein Ansatz ... zwar mit einem IFrame, aber was solls.

steffenk · 19.02.2006, 14:26

warum nicht ein div mit dem player, und über link wird dem player mit javascript die src zugewiesen ? Dann brauchst Du zwar Javascript, aber wenn man was sehen oder hören will, sorgt man schon für die Vorraussetzung.

Stuck Mojo · 20.02.2006, 09:50

Hi !

Um ganz ehrlich zu sein, ist diese Beispiel (m.E.) nicht brauchbar. Bzw. verdeutlicht nur, wie kompliziert man das Ganze machen kann und wie es eher falsch als richtig ist.

Es ist zwar schon klar, dass du nur mal zeigen wolltest, dass soetwas geht, aber da passt der Begriff "Grundgerüst" überhauptnicht.

Meiner Meinung nach sollten solche Anwendungen (zumindest das Grundgerüst) so flexibel geschrieben werden, dass man zumindest die Parameter definieren kann, die man an das aufzurufende Script übergeben will - 'send' ist in deinem Fall irgendwo fest definiert. Würde man im real live nie machen (dürfen!).

Desweiteren ist es ein MUSS eine Callback-Funktion deklarieren zu können um überhaupt so flexibel zu bleiben, die zurückgegebenen Daten sauber zu handeln -> derzeitig fest.

Wenn du schon XML zum Datenaustausch nutzt, dann bitte auch richtig:

Code:

<par>testvar=ich bin der Wert von testvar</par>

wiederspricht jeeeeeeglichem Sinn von XML.

...usw.

Also, so nutzt Google Earth das nicht *grin*

Gruss
Jan

DSB · 20.02.2006, 12:13

Den Begriff Grundgerüst habe ich gewählt, weil hier das Zusammenspiel zwischen den Dateien klar werden soll. Das ist weder eine Universalroutine, noch der Weisheit letzter Schluß.

Ich bin auch noch nicht geübt im Umgang mit XML-Dateien und bat ja auch um Verbesserungen. Besonders in Javascript bin ich nicht sonderlich geübt.
Mit diesem Aufbau der XML-Datei kann ich die übergebenen Daten aber einfach parsen und die Werte ermitteln. Das das noch nicht das NonPlusUltra ist, ist mir klar. Deshalb stelle ich das ja hier zur Diskussion.
Leider hast Du nur gesagt, dass man es so nicht machen sollte, aber nicht, wie es besser wäre.

Stuck Mojo · 20.02.2006, 13:25

Zitat:

Zitat von DSB

Leider hast Du nur gesagt, dass man es so nicht machen sollte, aber nicht, wie es besser wäre.

naja... XML ist eine Auszeichnungssprache - folglich kann man mit Ihr z.B. Datenstrukturen auszeichnen. Du hast den kram m.E. missbraucht. Dafür baucht man kein XML, sondern da hättest du genauso einfach ein Art CSV-String zurückschicken können oder was auch immer. Schau dir das mal an und vergleiche es mit deinem:

Code:

<root>
    <session_id>sdfkjhdf34576dfsf78676</session_id>
    <returnValues>
        <value id="testvar">Inhalt von Testvar</value>
        <value id="aufruf">Aufruf halt...</value>
        <!-- usw. -->
    </returnValues>
</root>

das wäre m.E. "ausgezeichnet" und strukturiert. Man weiss sofort worum es sich handelt und kann den Kram mit "reinen" XML-Technologien verarbeiten und setzt kein split oder sonstiges, zum nachbearbeiten der Daten voraus.

Gruss
Jan

PS: Ich nutze für die Kommunikation zwischen JS-Client und Server JSON oder SOAP ein und erspare mir das Erfinden einer eigenen Sprache

DSB · 20.02.2006, 13:47

Ich gebe Dir vollkommen recht - so ist es eher konformes XML.
Kannst Du mir auch eine Beispielroutine geben, die die Werte parsed, damit ich sehe, wie man dann darauf zugreift?
Weil ich das in JS nicht hinbekommen habe, habe ich mir den eigenen Syntax "ausgedacht". Ich gebs ja zu.

Stuck Mojo · 20.02.2006, 13:58

Na z.B. per DOM, wie du es doch bereits (teilweise) getan hast.

Gruss
Jan

DSB · 21.02.2006, 21:43

Zitat:

Zitat von Stuck Mojo

Na z.B. per DOM, wie du es doch bereits (teilweise) getan hast.

Schade, ich hatte gehofft ein Anwendungsbeispiel oder einen Link zu einem solchen zu bekommen. Da Du ja zu wissen scheinst, wie es vernünftig programmiert wird, dachte ich, dass es ein Klacks für Dich wäre ein Beispiel zu posten.

Ich selbst stehe mit JS auf Kriegsfuß und kenne auch keine entsprechenden Seiten. Trotzdem habe ich zumindest eine funktionierende Basis gepostet, auf der sich aufbauen lässt.
Falls mir also irgendjemand zeigen kann, wie man auf die XML-Elemente per JS zugreift wären wir alle einen Schritt weiter.