AJAX ganz einfach

Dynamische Seite ganz einfach bauen, ohne dass wir einen Reload brauchen? Das geht! Schaut Euch mal das folgende an.

<html>
<head>
  <title>Dynamic Test</title>
  <script language="javascript" type="text/javascript" src="./request.js"></script>
</head>
<body>
  Auswahl:
  <form name="form_category">
    <select name="select_category">
	  <option value="date">Datum</option>
	  <option value="time">Uhrzeit</option>
	  <option value="datetime">Datum + Uhrzeit</option>
    </select>
    <input type="button" name="requestbtn" value="Anzeigen"
              onClick="httpRequest('http://admin/dynamic/request.php', 'id', document.form_category.select_category.value, 'answer')">
  </form>
  Ergebnis:
  <div id="answer" style="background-color: #D0D0D0;">
    <!--This is where we'll be displaying the products once they're loaded-->
	Bitte wählen Sie ein Zeitformat.
  </div>
</body>
</html>

Die Seite besteht nun aus einem Drop-Down Feld aus dem wir die Einträge „Datum“, „Uhrzeit“ und „Datum + Uhrzeit“ wählen können. Wenn wir nun auf den Button „Anzeigen“ klicken, wird uns im unteren Teil der Seite in einem DIV-Block entsprechend unserer Auswahl das Datum, die Uhrzeit oder halt beides angezeigt. Tooooll….. Nix neues? Doch! Denn das Ergebnis wird uns dort angezeigt, ohne dass die Seite neu geladen wird. Ok, das Beispiel mit Datum und Uhrzeit geht natürlich auch direkt mit JS, aber man damit noch ganz andere Sachen, z.B. Datenbankabfragen machen. Wie? Nun ja, in unserem Beispiel wird die Berechnung von Datum und Uhrzeit nicht in JS vorgenommen, sondern erfolgt in einem PHP-Skript, dass irgendwo auf einem Erreichbaren Rechner liegen kann.

Das entscheidende sind die Zeilen 4 und 15. In Zeile 4 binden wir das folgenden JavaScript „request.js“ ein:

// Hier wird die Antwort Ausgegeben (ID des Ausgabeelements, z.B. ein DIV-Block)
var ResponseTargetID = '';


// Funktion zum Erzeugen eines XMLHttpRequest-Objekts
function createRequestObject(){
	var request_o; 
	var browser = navigator.appName;
	 
	if (browser == "Microsoft Internet Explorer") {
		request_o = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		request_o = new XMLHttpRequest();
	}
	return request_o;
}
  
// Erzeuge XMLHttpRequest-Objekt
var http = createRequestObject();

	
/**
*  Funktion zum Abrufen der Informationen
*
* @param uri - URI der abzurufenden Seite 
* @param parameter - Abfrage Parameter, z.B. 'id'
* @param value - Wert des Parameters
* @param targetID - ID des Elements, dass die Ausgabe anzeigen soll
*/
function httpRequest(uri,parameter,value,targetID){
	
	ResponseTargetID = targetID;
	
	http.open('GET', uri + '?' + parameter + '=' + value);
	
	// Handler definieren
	http.onreadystatechange = handleResponse;

	// Daten senden. In unserem Fall nix!	
	http.send(null);
}


/**
* handleResponse()
*
* verarbeitet die Antworten des Requests
*/
function handleResponse(){
			
		
	/* Das XMLHttpRequest-Objekt hat eine Eigenschaft readyState. Diese kann
	   folgende Werte annehmen:
		0: Uninitialized
		1: Loading
		2: Loaded
		3: Interactive
		4: Finished */
	if(http.readyState == 4) { // Finished?
		if (http.status == 200) { // Status OK?
			var response = http.responseText;
			
			// Ergebnis in das Element einfügen.
			document.getElementById(ResponseTargetID).innerHTML = response;
		}
	}
}

Dies stellt uns die Möglichkeit zur Verfügung per JS Anfragen an einen Server zu stellen. Dazu wird die Funktion XMLHttpRequest() benutzt. Es wird einfach per XMLHttpRequest-Objekt.open() eine Seite abgerufen und das Ergebnis an unsere Seite zurückgeliefert. handleResponse() zeigt das Ergebnis wird dann im Response-Target an. In unserem Fall ist das der DIV-Block mit der ID „answer“.

Die Anfrage selber geschieht in Zeile 15 unserer HTML-Seite. Dort wird die JS-Funktion httpRequest aus unserem JS-Script benutzt, um eine Anfrage an einen anderen Rechner zu stellen. Das Ergebnis wird dann in DIV-Block mit der id=“answer“ angezeigt.

Schauen wir uns mal den Server-Code in request.php an:

<?php

if ($_GET['id'] == 'date') {
	echo date('Y-m-d');
}

if ($_GET['id'] == 'time') {
	echo '<b>'.date('H:i:s').'</b>';
}

if ($_GET['id'] == 'datetime') {
	echo date('Y-m-d / H:i:s');
}

?>

Das ist ja nun ganz simpel. Je nach per GET übergebener ID, wird einfach eine andere Ausgabe erzeugt.

Wie benutze ich das nun?

Was ich brauche ist eine HTML-Seite mit einem Formular. Auf der Seite binde ich per

<script language="javascript" type="text/javascript" src="./request.js">

im Header das JavaScript ein.

Wenn nun ein bestimmtes Ereignis ausgelöst wird, z.B. onClick eines Buttons, müssen wir nun nur noch das Ergebnis aus dem Netz abfragen:

<input type="button" name="requestbtn" value="Anzeigen"
          onClick="httpRequest('http://admin/dynamic/request.php', 'id', document.form_category.select_category.value, 'answer')"> 

Die Syntax von httpRequest

httpRequest(url,parameter,value,targetid)

  • url abzufragende Seite
  • parameter GET-Parameter, in unserem Beispiel ‚id‘
  • value Wert des Parameters, in unserem Beispiel also ‚date‘, ‚time‘ oder ‚datetime‘
  • targetid ID eines HTML-Elements, dass das Ergebnis anzeigen soll, im Beispiel ‚answer‘ (ein DIV-Block)
  • httpRequest fragt nun die Ausgabe der Seite url?parameter=value (z.B. http://admin/dynamic/request.php?id=date) ab und zeigt die Ausgabe der URL im DIV-Block an.

    Was kann man damit machen?

    Es gibt vielfältige Anwendungsmöglichkeiten. Zum Beispiel kann Datenbankeinträge abfragen und darstellen ohne dass ein Page-Reload notwendig ist. Ich denke da fällt jedem etwas Tolles ein. Eine andere Möglichkeit wäre eine Textvervollständigung in einem Text-Input-Feld, die durch das Ereignis keyKeyup ausgelöst wird.