www.netisoft.net

Aktive Seite:	Basic Tutorial (Anleitung): AJAX
Kurzbeschrieb	Basic Tutorial (Anleitung): AJAX

Basic Tutorials - Ajax (HTML/PHP/Javascript)

Ajax ist eine Webtechnologie, eine Kombination aus HTML, PHP und Javascript. Die Kunst besteht wohl darin, dass man Ajax nur "dezent" verwendet.

Ein Ajax Beispiel: - Echtzeitverschlüsselung eines Strings (v0.1).

Aus der Sicht des Benutzers	Aus der Sicht von Javascript und PHP	Das "Livetime"-Resultat, behaust in einem eindeutigen, mit ID versetzten DIV-Tag.
Wenn man in folgendem Textfeld einen String eingibt bzw. eine darin eine Taste loslässt, wird die Javascriptfunktion "onTextInput()" ausgeführt. Das "TasteLoslassenEvent" wird über eine vordefinierte Eventfunktion "onkeyup()" von Javascript selbst ausgeführt.	Hier findet die eigentliche Schnittstelle statt. Die Javascript-Funktion erstellt ein "Ajaxobjekt", welches schliesslich eine Serverseitige Scriptdatei (in diesem Beispiel ein PHP-Script) ausführt.	Hier findet die Ausgabe des AJAX-Prinzips statt, Zielausgabe-Feld wurde in der Javascriptfunktion definiert.
Programmcode 1: (Texteingabe): <input type="text" name="input" onkeyup="onTextInput();" />	Programmcode 2a: (JS Funktion, ext. Datei) function onTextInput() { var g_httpRequest; try{g_httpRequest = new XMLHttpRequest();} catch(e){try{g_httpRequest = new ActiveXObject("Msxml2.XMLHTTP");} catch(e){try{g_httpRequest = new ActiveXObject("Microsoft.XMLHTTP");} catch(e){alert('Fehlerm bei GetAjaxRequest().');}}} g_httpRequest.onreadystatechange = function(){ if(g_httpRequest.readyState == 4){document.getElementById('output').innerHTML=g_httpRequest.responseText;}} var params = '&rawsrc='+document.ajaytutorialform.input.value; g_httpRequest.open("POST","./inc/ajaxgets.php?function=onTextInput"+params,true); g_httpRequest.send(null); } Programmcode 2b: (ext. PHP Datei "ajaxgets.php") if(isset($_REQUEST['function'])) { if($_REQUEST['function'] == "onTextInput") { echo md5($_REQUEST['rawsrc']); } }	Programmcode 3: (Ausgabe-DIV) <div id="output"></div>
Webresultat 1: (Texteingabe):	Webresultat 2: (JS Funktion, ext. Datei) Serverseitige Berechnung durch ajaxgets.php	Webresultat 3: (Ausgabe-DIV)

Hilfreiche Links:

- Wikipedia: Ajax Programmierung

Seite weiterempfehlen auf:

Newsfeed abonnieren:

netisoft.net - newsfeed

Netisoft auf Twitter:

netisoft.net - newsfeed