3. Request mit mehreren Werten senden

Einen Wert zu senden ist ja ganz schön, aber manchmal braucht man auch mehr als einen - wie das geht wird hier erklärt.

Das Beispiel im Detail:

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

Damit das Beispiel nicht zu langweilig wird, geben wir als Parameter diesmal nicht direkt den Namen mit, sondern eine ID,

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

über die der Name dann per Javascript ausgelesen wird.

// Name auslesen
var value = document.getElementById('source_'+id).innerHTML;

Anschließend schicken wir nun beide Informationen (Name und Position) als Request an das PHP-Script.

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

Im PHP-Script werten wir die übermittelten Daten aus und schicken das Ergebis wieder zurück.

$name	= strtoupper($_POST['name']);
$pos	= $_POST['pos'];
echo $name." steht an Position ".$pos;

Der Rest erfolgt wieder analog zu Beispiel 2.

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 003</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_003.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+'&pos='+id);
			// 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 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 />
  <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']);
$pos	= $_POST['pos'];
echo $name." steht an Position ".$pos;
?>

Das Script in Aktion:

der angeklickte Name und die Position werden hier angezeigt