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