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

MyWebSQL: Shift+Leertaste wirkt nicht wie erwartet

Wenn man im Standardeditor von MyWebSQL Shift und die Leertaste drückt, wird nicht wie erwartet ein Leerzeichen beim Cursor eingefügt, sondern am Anfang der Zeile. Ob das ein Bug ist, oder gewollt kann ich nicht sagen. Fakt ist, dass man dieses extrem nervige Verhalten abstellen kann.

Die Code-Datei für den Editor liegt in ./js/min/codemirror_base.js . Diese Datei kann man mit einem Texteditor seiner Wahl öffnen. Innerhalb des Dokuments kann man nach der Zahl „32“ suchen. Das ist der Keycode der Leertaste. Diese Zahl kommt an genau 2 Stellen im Code vor. Eine sieht ca. so aus:

else if(9==b&&"default"!=this.options.tabMode&&!a.ctrlKey)this.handleTab(!a.shiftKey),a.stop(); else if(32==b&&a.shiftKey&&"default"==this.options.tabMode)this.handleTab(!0),a.stop(); else if(36==b&&!a.shiftKey&&!a.ctrlKey)this.home()&&a.stop(); weiterlesen

IFM: improved file manager

Seit einigen Tagen habe ich an einem neuen Dateimanager für meinen Webspace gearbeitet, und jetzt steht die erste Alpha-Version, die erst noch umfangreich getestet werden muss, aber schon recht ordentlich läuft, zur Verfügung (https://github.com/misterunknown/ifm). Er basiert auf meinem EPFM (Easy PHP File Manager), ist aber etwas größer und funktioniert wie ein Client-Server-System, wobei es dennoch eine single-file-Lösung geblieben ist.
Beim Aufrufen des Skripts wird ein dynamisches Interface gesendet, welches mit HTML5, CSS3 und Javascript umgesetzt ist; im Hintergrund arbeitet das Skript mit einem PHP-API, welches mit dem Interface über JSON kommuniziert. Damit minimiert man den Traffic den das Skript generiert, da im Gegensatz zum EPFM nicht jedes mal das ganze Markup mitgesendet wird, sondern nur relevante Teile per AJAX geladen werden. Das verwendete jQuery ist im Skript integriert, was die etwas üppigere Dateigröße ausmacht. 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

Alternative zu Google Analytics

Schon länger, aber im Zuge der NSA-Prism-Skandale noch verstärkt, wird Google Analytics als datenschutzrechtlich bedenkliches Tool angesehen, welches viele Internetnuter aussperren, weil sie sich nicht von Google tracken lassen wollen. Um darauf zu reagieren und trotzdem eine Übersicht zu bekommen, wie viele Nutzer woher auf der eigenen Website herumgeistern gibt es allerdings wenige Möglichkeiten. Google spuckt zwar allerhand Ergebnisse auf einschlägige Suchanfragen aus, allerdings ist, euphemistisch gesagt, die Qualität und der Umfang der Tools recht unterschiedlich. Auf meine Nachfrage bei einigen Bekannten und Kollegen und nicht zuletzt auch im SelfHTML-Forum, wurde mir Piwik als wohl einzig ebenbürtige Alternative aufgezeigt. weiterlesen