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

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

Fileupload per AJAX (Update)

Möchte man eine Datei per AJAX an einen Server senden, kann man das mit einem XMLHttpRequest tun. In früheren Versionen wurde selbiges nicht vorgesehen, weswegen oftmals mit IFrames gearbeitet wurde; das ist jetzt aber dank des Interface FormData() nicht mehr nötig¹.
Dieses Interface ermöglicht ein BLOB (binary large object) mit dem Request mitzusenden. Die theoretischen Fakten kann man auf der verlinkten Seite des w3c nachlesen, wir gehen zur Praxis. Übrigens nutze ich für derartige Sachen jQuery. Die damit verbundene Vereinfachung wiegt den zusätzlich nötigen Traffic für die Library bei weitem auf.

Der einfachste Fall

Wir haben ein Input-Element, und immer, wenn sich das ändert, wird eine Datei hochgeladen.

HTML:

<!DOCTYPE HTML> <html> <head><title>Upload per AJAX</title></head> <body> <input type="file" id="uploadFile"> <div id="responses"></div> </body> </html> weiterlesen