AJAX ist eine nette Sache! Dieses Akronym steht für „Asynchronous JavaScript and XML“ und ermöglicht unter anderem dynamisches Nachladen von Inhalten in die HTML Seite. Wer sich ganz genau dafür interessiert, kann ja auf WIKIPEDIA nachschauen

Natürlich findet man jetzt eine große Menge an Bibliotheken die man nutzen kann und sollte, aber hier möchte ich euch eine Quick and Dirty Lösung zeigen.

//AJAX Initialisieren und Funktionen zur Handhabung
var request = false;

// Request senden
function setRequest(url,send,irfunction) {
	// 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 {
		// Request öffnen
		request.open('post', url, true);
		// Requestheader senden
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
		// Request senden
		request.send(send);
		// Request auswerten
		request.onreadystatechange = function() {
			interpretRequest(irfunction);
		}
	}
}
// Request auswerten
function interpretRequest(irfunction) {
	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 {
				irfunction();
			}
			break;
		default:
			break;
	}
}
//ENDE AJAX Funktionen

Wie verwendet man diese Funktionen nun richtig?

Angenommen wir haben eine Formular bei dem sich ein User registrieren muss und wir wollen checken ob der Nick schon vorhanden ist.

Dazu verwenden wir eine PHP Datei, die auf im selben Ordner liegt und abfrage.php heißt. Diese macht uns eine MYSQL Abfrage und liefert uns dann false zurück, wenn der Nickname schon vorhanden ist. Die 2 JavaScript Funktionen die wir zusätzlich noch in der HTML Datei brauchen sind folgende:

function check_name(nick) {
	//Request abschicken mit Post Variable Nickname
	setRequest("/abfrage.php","nickname="+nick,check_name_finish);
}
function check_name_finish() {
	var content = request.responseText;
	//Do something
}

Die Funktion check_name(nick) wird vom Inputfeld aufgerufen, wenn dieses nicht mehr beschrieben wird.  (siehe Code vom Inputfeld). Ist Funktion check_name(nick) mit der Ausführung fertig, wird Funktion check_name_finish() aufgerufen und ausgeführt. Diese hat nun in der Variable content die Antwort der Abfrage und kann nun darauf reagieren.

Und das Inputfeld würde so aussehen:

<input type="text" name="nickname" value="" onblur="check_name(this.value)">

Wie bereits erwähnt ist das hier nur Quick and Dirty! Getestet habe ich es mit den neuesten Versionen von IE und FireFox. Viel Spass damit!