4. XML-Request erzeugen und auswerten

Wir senden eine Anfrage an ein PHP-Script und werten das Antwort-XML-Dokument aus. Das hat den Vorteil, dass wir mehrere Informationen mit einem Request anfordern können.

Das Beispiel im Detail:

Unser Script zeigt eine Liste von 3 Namen an. Beim Klick auf einen der Namen, wird der jeweilige Name im Originalzustand, in Kleinbuchstaben und in Großbuchstaben angezeigt.

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

Wir brauchen ein paar HTML-Tags in der die Namen später erscheinen sollen, wir nehmen dazu eine Tabelle.

<table>
 <tr>
  <td>original</td><td>:</td><td><span id="original"></span></td>
 </tr>
 <tr>
  <td>in Kleinbuchstaben</td><td>:</td><td><span id="small"></span></td>
 </tr>
 <tr>
  <td>in Grossbuchstaben</td><td>:</td><td><span id="big"></span></td>
 </tr>
</table>

Diesmal senden wir nur einen Wert an das PHP-Script.

// Request senden
request.send('name='+value);

Und die größte Änderung: Diesmal bekommen wir ein XML-Dokument als Antwort zurück, dass wir via Javascript auslesen und die Namen in die Tabellenfelder schreiben.

// Antwort des Servers -> als XML-Dokument
var xmlDoc	= request.responseXML;
// Namen aus dem XML-Dokument herauslesen
var original	= xmlDoc.getElementsByTagName('originalname')[0].firstChild.nodeValue;
var small	= xmlDoc.getElementsByTagName('smallname')[0].firstChild.nodeValue;
var big		= xmlDoc.getElementsByTagName('bigname')[0].firstChild.nodeValue;
// Namen in die Felder schreiben
document.getElementById('original').innerHTML	= original;
document.getElementById('small').innerHTML	= small;
document.getElementById('big').innerHTML	= big;

Im PHP-Script sind aber auch noch Änderungen notwendig, zuerst muss die Kodierung auf XML umgestellt werden

header('Content-Type: text/xml; charset=utf-8'); // sorgt für die korrekte XML-Kodierung

Dann folgt wieder die Auswertung der Daten.

$original	= $_POST['name'];
$small		= strtolower($_POST['name']);
$big		= strtoupper($_POST['name']);

Zuletzt wird das XML-Dokument gesendet.

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
echo "<formatname>\n";
echo " <originalname>".$original."</originalname>\n";
echo " <smallname>".$small."</smallname>\n";
echo " <bigname>".$big."</bigname>\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 004</title>
  <script type="text/javascript">
  <!--
	var request = false;

	// Request senden
	function setRequest(id) {
		// 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_004.php";
			// Name auslesen
			var value = document.getElementById('source_'+id).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);
			// Request auswerten
			request.onreadystatechange = interpretRequest;
		}
	}

	// Request auswerten
	function interpretRequest() {
		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;
					// Namen aus dem XML-Dokument herauslesen
					var original	= xmlDoc.getElementsByTagName('originalname')[0].firstChild.nodeValue;
					var small	= xmlDoc.getElementsByTagName('smallname')[0].firstChild.nodeValue;
					var big		= xmlDoc.getElementsByTagName('bigname')[0].firstChild.nodeValue;
					// Namen in die Felder schreiben
					document.getElementById('original').innerHTML	= original;
					document.getElementById('small').innerHTML	= small;
					document.getElementById('big').innerHTML	= big;
				}
				break;
			default:
				break;
		}
	}
  //-->
  </script>
 </head>
 <body>
  <ul>
   <li><a id="source_01" href="javascript:setRequest('01')">Max</a></li>
   <li><a id="source_02" href="javascript:setRequest('02')">Susi</a></li>
   <li><a id="source_03" href="javascript:setRequest('03')">Charly</a></li>
  </ul>
  <br />
  <table>
   <tr>
    <td>original</td><td>:</td><td><span id="original"></span></td>
   </tr>
   <tr>
    <td>in Kleinbuchstaben</td><td>:</td><td><span id="small"></span></td>
   </tr>
   <tr>
    <td>in Grossbuchstaben</td><td>:</td><td><span id="big"></span></td>
   </tr>
  </table>
 </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

$original	= $_POST['name'];
$small		= strtolower($_POST['name']);
$big		= strtoupper($_POST['name']);

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
echo "<formatname>\n";
echo " <originalname>".$original."</originalname>\n";
echo " <smallname>".$small."</smallname>\n";
echo " <bigname>".$big."</bigname>\n";
echo "</formatname>\n";
?>

Das Script in Aktion:

original	:
in Kleinbuchstaben	:
in Grossbuchstaben	: