5. Request mittels parametisierter Funktion auswerten

Wir senden eine Anfrage an ein PHP-Script und werten das Antwort-XML-Dokument mittels einer parametisierten Funktion aus.

Das Beispiel im Detail:

Unser Script ist eine Erweiterung des vorherigen Beispiels. Es werden wieder 3 Namen angezeigt und für jeden Namen 3 klickbare Felder. Beim Klick auf eines der Felder wird der jeweiligen Namen (abhängig von dem angeklickten Feld) entweder im Originalzustand, in Kleinbuchstaben oder in Großbuchstaben angezeigt. Zusätzlich wird noch eine Grafik angezeigt (die wiederum Abhänging von dem geklickten Feld ist).

Wir können das vorangegangene HTML-Script dabei wieder übernehmen, nur sind diesmal ein paar Änderungen mehr notwendig:

Wir verwenden diesmal keine Tabelle für die benötigten Felder, sondern "immitieren" sie mithilfe von <div>-Elementen und CSS.

<div class="row">
 <div class="field01" id="source_01">Max</div>
 <div class="field02"><span onclick="addAttribute(this, '01'); setRequest('01', 1)">Normal</span></div>
 <div class="field03"><span onclick="addAttribute(this, '02'); setRequest('01', 2)">klein</span></div>
 <div class="field04"><span onclick="addAttribute(this, '03'); setRequest('01', 3)">GROSS</span></div>
 <div class="field05" id="info_01">&nbsp;</div>
 <div class="field06" id="info_01.1">&nbsp;</div>
</div>
<div class="row">
 <div class="field01" id="source_02">Susi</div>
 <div class="field02"><span onclick="addAttribute(this, '01'); setRequest('02', 1)">Normal</span></div>
 <div class="field03"><span onclick="addAttribute(this, '02'); setRequest('02', 2)">klein</span></div>
 <div class="field04"><span onclick="addAttribute(this, '03'); setRequest('02', 3)">GROSS</span></div>
 <div class="field05" id="info_02">&nbsp;</div>
 <div class="field06" id="info_02.1">&nbsp;</div>
</div>
 <div class="row" style="border-bottom: 1px solid #000000;">
 <div class="field01" id="source_03">Charly</div>
 <div class="field02"><span onclick="addAttribute(this, '01'); setRequest('03', 1)">Normal</span></div>
 <div class="field03"><span onclick="addAttribute(this, '02'); setRequest('03', 2)">klein</span></div>
 <div class="field04"><span onclick="addAttribute(this, '03'); setRequest('03', 3)">GROSS</span></div>
 <div class="field05" id="info_03">&nbsp;</div>
 <div class="field06" id="info_03.1">&nbsp;</div>
</div>

Die Angaben zu den CSS-Formatierungen stecken wir in den Header Teil des Scripts, in ein <style>-Tag.

<style type="text/css">
	div.row {
		position: relative;
		width: 600px;
		height: 20px;
		border-top: 1px solid #000000;
	}
	hr {
		position: relative;
		background-color: #000000;
		color: #000000;
		border: #000000;
		width: 600px;
		height: 1px;
		text-align: left;
		margin: 0px;
	}
	div.field01, div.field02, div.field03, div.field04, div.field05, div.field06 {
		position: absolute;
		top: 0px;
		width: 100px;
		border-left: 1px solid #000000;
		text-align: center;
	}
	div.field01 {
		left: 0px;
	}
	div.field02 {
		left: 100px;
	}
	div.field03 {
		left: 200px;
	}
	div.field04 {
		left: 300px;
	}
	div.field05 {
		left: 400px;
	}
	div.field06 {
		left: 500px;
		width: 98px;
		border-right: 1px solid #000000;
	}
	span {
		cursor: pointer;
		color: blue;
	}
</style>

Nun zum interesanten Teil: Wir lesen den Namen und die gewählte Option aus,

var value = document.getElementById('source_'+id).innerHTML;
var infotext = document.getElementById('option_0'+option).innerHTML;

da wir aber konformen Code erzeugen wollen, und der W3C HTML-Validator das gleiche id-Attribut mehrfach nicht gern sieht, tricksen wir ihn einfach aus, indem wir dieses Attribut erst zur Laufzeit dynamisch in die entsprechenden Tags schreiben.

function addAttribute(object, nr) {
	object.setAttribute('id', 'option_'+nr, 0);
}

Nun müssen wir den Request noch an das PHP-Script schicken

request.send("name="+value+"&option="+option);

und den Antwort-Request mit einer parametisierten Funktion auswerten.

request.onreadystatechange = function() {
	interpretRequest(id, infotext);
};

In der Auswertungsfunktion holen wir uns die benötigten Informationen aus dem XML-Antwort-Dokument, diesmal allerdings über die Attribute.

var newname	= xmlDoc.getElementsByTagName('newname')[0].getAttribute('name');
var imageurl	= xmlDoc.getElementsByTagName('newname')[0].getAttribute('image');
var alternate	= xmlDoc.getElementsByTagName('newname')[0].getAttribute('alternate');

Danach erzeugen wir ein neues Bild,

var image	= "<img src=\""+imageurl+"\" alt=\""+alternate+"\" />";

und platzieren es mitsamt den gesammelten Informationen an der richtigen Stelle.

document.getElementById('source_'+id).innerHTML = newname;
document.getElementById('info_'+id).innerHTML = infotext;
document.getElementById('info_'+id+'.1').innerHTML = image;

Nun müssen wir nur noch dafür sorgen, dass das XML-Dokument im PHP-Script erzeugt wird. Dazu nehmen wir eine switch-case-Abfrage zur Auswertung der übermittelten Daten

$option	= $_POST['option'];
switch ($option) {
	case 2:
		$name		= strtolower($_POST['name']);
		$alternate	= "Kleinbuchstaben";
		$image		= "images/smaller.png";
		break;
	case 3:
		$name		= strtoupper($_POST['name']);
		$alternate	= "Grossbuchstaben";
		$image		= "images/bigger.png";
		break;
	default:
		$name		= strtoupper(substr($_POST['name'], 0, 1)).strtolower(substr($_POST['name'], 1));
		$alternate	= "Normalansicht";
		$image		= "images/normal.png";
		break;
}

und schreiben das Ergebnis, diesmal in Form von Attributen, in das XML-Dokument.

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
echo "<formatname>\n";
echo " <newname name=\"".$name."\" alternate=\"".$alternate."\" image=\"".$image."\" />\n";
echo "</formatname>\n";

Der komplette Code (HTML-Script):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Ajax Beispiel 005</title>
  <script type="text/javascript">
  <!--
	var request = false;

	// Request senden
	function setRequest(id, option) {
		// Request erzeugen
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
		} else if (window.ActiveXObject) {
			try {
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
			} catch (e) {
				try {
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
				} catch (e) {}
			}
		}

		// überprüfen, ob Request erzeugt wurde
		if (!request) {
			alert("Kann keine XMLHTTP-Instanz erzeugen");
			return false;
		} else {
			var url = "ajax_005.php";
			// Name auslesen
			var value = document.getElementById('source_'+id).innerHTML;
			// Option auslesen
			var infotext = document.getElementById('option_0'+option).innerHTML;
			// Request öffnen
			request.open('post', url, true);
			// Requestheader senden
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// Request senden
			request.send("name="+value+"&option="+option);
			// Request auswerten
			request.onreadystatechange = function() {
				interpretRequest(id, infotext);
			};
		}
	}

	// Request auswerten
	function interpretRequest(id, infotext) {
		switch (request.readyState) {
			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
			case 4:
				if (request.status != 200) {
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
				} else {
					// Antwort des Servers -> als XML-Dokument
					var xmlDoc	= request.responseXML;
					// Name aus dem XML-Dokument herauslesen
					var newname	= xmlDoc.getElementsByTagName('newname')[0].getAttribute('name');
					// Bildurl aus dem XML-Dokument herauslesen
					var imageurl	= xmlDoc.getElementsByTagName('newname')[0].getAttribute('image');
					// Alternativtext aus dem XML-Dokument herauslesen
					var alternate	= xmlDoc.getElementsByTagName('newname')[0].getAttribute('alternate');
					// Bild erstellen
					var image	= "<img src=\""+imageurl+"\" alt=\""+alternate+"\" />";
					// Schreibweise ändern
					document.getElementById('source_'+id).innerHTML = newname;
					// Änderungsinfo anzeigen
					document.getElementById('info_'+id).innerHTML = infotext;
					document.getElementById('info_'+id+'.1').innerHTML = image;
				}
				break;
			default:
				break;
		}
	}

	// einem HTML-Tag ein Attribut anhängen
	function addAttribute(object, nr) {
		object.setAttribute('id', 'option_'+nr, 0);
	}
  //-->
  </script>
  <style type="text/css">
	div.row {
		position: relative;
		width: 600px;
		height: 20px;
		border-top: 1px solid #000000;
	}
	hr {
		position: relative;
		background-color: #000000;
		color: #000000;
		border: #000000;
		width: 600px;
		height: 1px;
		text-align: left;
		margin: 0px;
	}
	div.field01, div.field02, div.field03, div.field04, div.field05, div.field06 {
		position: absolute;
		top: 0px;
		width: 100px;
		border-left: 1px solid #000000;
		text-align: center;
	}
	div.field01 {
		left: 0px;
	}
	div.field02 {
		left: 100px;
	}
	div.field03 {
		left: 200px;
	}
	div.field04 {
		left: 300px;
	}
	div.field05 {
		left: 400px;
	}
	div.field06 {
		left: 500px;
		width: 98px;
		border-right: 1px solid #000000;
	}
	span {
		cursor: pointer;
		color: blue;
	}
  </style>
 </head>
 <body>
  <div class="row">
   <div class="field01" id="source_01">Max</div>
   <div class="field02"><span onclick="addAttribute(this, '01'); setRequest('01', 1)">Normal</span></div>
   <div class="field03"><span onclick="addAttribute(this, '02'); setRequest('01', 2)">klein</span></div>
   <div class="field04"><span onclick="addAttribute(this, '03'); setRequest('01', 3)">GROSS</span></div>
   <div class="field05" id="info_01">&nbsp;</div>
   <div class="field06" id="info_01.1">&nbsp;</div>
  </div>
   <div class="row">
   <div class="field01" id="source_02">Susi</div>
   <div class="field02"><span onclick="addAttribute(this, '01'); setRequest('02', 1)">Normal</span></div>
   <div class="field03"><span onclick="addAttribute(this, '02'); setRequest('02', 2)">klein</span></div>
   <div class="field04"><span onclick="addAttribute(this, '03'); setRequest('02', 3)">GROSS</span></div>
   <div class="field05" id="info_02">&nbsp;</div>
   <div class="field06" id="info_02.1">&nbsp;</div>
  </div>
   <div class="row" style="border-bottom: 1px solid #000000;">
   <div class="field01" id="source_03">Charly</div>
   <div class="field02"><span onclick="addAttribute(this, '01'); setRequest('03', 1)">Normal</span></div>
   <div class="field03"><span onclick="addAttribute(this, '02'); setRequest('03', 2)">klein</span></div>
   <div class="field04"><span onclick="addAttribute(this, '03'); setRequest('03', 3)">GROSS</span></div>
   <div class="field05" id="info_03">&nbsp;</div>
   <div class="field06" id="info_03.1">&nbsp;</div>
  </div>
 </body>
</html>

Der komplette Code (PHP-Script):

<?php
header('Content-Type: text/xml; charset=utf-8'); // sorgt für die korrekte XML-Kodierung
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // ist mal wieder wichtig wegen IE

// übermittelte Option auswerten
$option	= $_POST['option'];
switch ($option) {
	case 2:
		$name		= strtolower($_POST['name']);
		$alternate	= "Kleinbuchstaben";
		$image		= "images/smaller.png";
		break;
	case 3:
		$name		= strtoupper($_POST['name']);
		$alternate	= "Grossbuchstaben";
		$image		= "images/bigger.png";
		break;
	default:
		$name		= strtoupper(substr($_POST['name'], 0, 1)).strtolower(substr($_POST['name'], 1));
		$alternate	= "Normalansicht";
		$image		= "images/normal.png";
		break;
}

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
echo "<formatname>\n";
echo " <newname name=\"".$name."\" alternate=\"".$alternate."\" image=\"".$image."\" />\n";
echo "</formatname>\n";
?>

Das Script in Aktion:

Max

Normal

klein

GROSS

Susi

Normal

klein

GROSS

Charly

Normal

klein

GROSS