Basic Ajax Skeleton Code

Blackbam — Tue, 07 Feb 2012 08:26:01 +0000

Nothing new, nothing special… just the working code of a basic Ajax skeleton, as this has to be copied and pasted that often. This example shows an application similar to Google suggest, which searches related values, whenever a key is pressed.

Note: Since jQuery is that popular today, it is possibly better to use this (see jQuery Ajax Tutorial).

index.html – function call and result representation

Ajax test

ajax.js – request, response and data processing

var XMLHTTP = null;

function AjaxRequest(compString) {

// XMLHTTP-Request Objekt erzeugen, dabei auf Browserkonformität achten
	if(window.XMLHttpRequest) {
		XMLHTTP = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		try {
			XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(ex) {
			try {
				XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(ex) {
			}
		}
	}
	
	XMLHTTP.open("GET","test.php?compString="+compString);
	XMLHTTP.onreadystatechange = MyRequestExecute;
	XMLHTTP.send(null);
}

// wird jedes mal aufgerufen, wenn der XMLHTTP-Request eine neue Stufe erreicht, bei 4 ist die Antwort des Servers eingetroffen
function MyRequestExecute() {
	// responseText als Javascript-String, responseXML als Javascript XML-DOM-Element, status Statuscode, statusText des. Beschreibung
	if(XMLHTTP.readyState == 4) {
		document.getElementById("result").innerHTML = XMLHTTP.responseText;
	}
}

The server side

test.php

query($sql);
	
} catch (Exception $e) {
    echo 'Verbindungsaufbau fehlgeschlagen: ',  $e->getMessage(), "\n";
}

echo $_GET['compString']."< pre >".$horst."";
?>

config.inc.php

skeleton – Blackbams Blog

Basic Ajax Skeleton Code