Javascript: Einfache AJAX-Demo

Das ist eine einfache AJAX Demonstration. In das untenstehende Suchfeld können Eingaben gemacht werden. Von einem eigens dafür geschriebenen PHP-Skript wird dann das übergebene POST-Array zurückgegeben und vom Request-Skript in den Ergebnis-Div geschrieben.

Geben Sie einfach etwas in das Eingabefeld ein und im Ergebnis-Div erscheint die Rückmeldung.

Ergebnis:

Code zum Beispiel

Der Quellcode zum Beispiel sieht recht komplex aus, ist aber relativ einfach verständlich. Im HTML gibt es ein Input-Feld welches mittels des Attributs onkeyup=“searchFor(this.value)“ einen Eventhandler zugewiesen bekommt. Die Javascript-Funktion sieht folgendermaßen aus.

function searchFor(suchbegriff){
	var xmlHttp = null; // unser Request-Objekt
	// Mozilla, Opera, Safari sowie Internet Explorer 7
	if (typeof XMLHttpRequest != 'undefined') {
		xmlHttp = new XMLHttpRequest();
	}
	if (!xmlHttp) {
		// Internet Explorer 6 und älter
		try {
			xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e) {
				xmlHttp  = null;
			}
		}
	}
	// Wurde das Objekt korrekt erzeugt?
	if (xmlHttp) {
		// Woher wollen wir Daten haben?
		var url = "http://api.misterunknown.de/selfhtml/ajaxdemo.php";
		// Wir wollen auch Parameter übergeben
		var params = "suchbegriff="+suchbegriff;
		// Wir senden die Daten mittels eines POST-Requests
		xmlHttp.open("POST", url, true);
		// Headerinformationen für den POST Request
		xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlHttp.setRequestHeader("Content-length", params.length);
		xmlHttp.setRequestHeader("Connection", "close");
		// Was soll passieren, wenn wir die Daten haben? Natürlich wollen wir sie ausgeben
		xmlHttp.onreadystatechange = function () {
			// prüfen, ob das Ergebnis korrekt geliefert wurde
			if (xmlHttp.readyState == 4) {
				// Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
				document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
			}
		};
		// und weg damit 😉
		xmlHttp.send(params);
	}
}

weiterlesen

SelfHTML Forum: großes Kopf-Stück ausblenden

Wer ab und zu im SelfHTML-Forum unterwegs ist, den wird mitunter der statische Kopf über den aktuellen Beiträgen stören. Schön ist da die Funktion für angemeldete User eigene CSS-Regeln definieren und bei Bedarf ein externes Javascript einbinden zu können. Um nun den Kopf auszublenden, und trotzdem irgendwie Zugriff darauf zu haben habe ich mir folgende Lösung gebastelt:
(http://selfhtml.misterunknown.de/selfhtml.js)

$(document).ready(function() {
  $("body").addClass("kompakt");
  $("body").prepend('<input id="switchHead" type="button" onclick="$('body').toggleClass('kompakt');" value="Kopf umschalten" />');
});

weiterlesen