2. Request-Wert senden, verarbeiten und empfangen

Nun wird's schon etwas interessanter - wir senden einen nicht-leeren Request.

Das Beispiel im Detail:

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

Das erreichen wir, indem wir der Funktion setRequest den jeweiligen Namen als Parameter mitgeben

<ul>
 <li><a href="javascript:setRequest('max')">Max</a></li>
 <li><a href="javascript:setRequest('susi')">Susi</a></li>
 <li><a href="javascript:setRequest('charly')">Charly</a></li>
</ul>

und den jeweiligen Namen dann im Request mitschicken.

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

Wichtig ist hier vorallem, dass der Requestheader gesendet wird, sonst weiß das PHP-Script nämlich nicht, in welcher Form es die Daten bekommt.

// Requestheader senden
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Das PHP-Script wandelt dann den erhaltenen Namen in Großbuchstaben um.

$name = strtoupper($_POST['name']);

Die Rücksendung des Namens und die darauffolgende Auswertung erfolgt analog zu Beispiel 1.

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 002</title>
  <script type="text/javascript">
  <!--
	var request = false;

	// Request senden
	function setRequest(value) {
		// 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_002.php";
			// 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 {
					var content = request.responseText;
					// den Inhalt des Requests in das <div> schreiben
					document.getElementById('content').innerHTML = content;
				}
				break;
			default:
				break;
		}
	}
  //-->
  </script>
 </head>
 <body>
  <ul>
   <li><a href="javascript:setRequest('max')">Max</a></li>
   <li><a href="javascript:setRequest('susi')">Susi</a></li>
   <li><a href="javascript:setRequest('charly')">Charly</a></li>
  </ul>
  <br />
  <div id="content"></div>
 </body>
</html>

Der komplette Code (PHP-Script):

<?php
header('Content-Type: text/html; charset=utf-8'); // sorgt für die korrekte 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

$name = strtoupper($_POST['name']);
echo $name;
?>

Das Script in Aktion:

der angeklickte Name wird hier in Großbuchstaben angezeigt