Dieses Beispiel zeigt 2 Textboxen. Wenn in der ersten ein Text eingegeben wird, wird er zugleich in der Zweiten gross geschrieben ausgegeben. Die Umwandlung selber findet in PHP statt. Dort könnte man auch auf eine DB zugreifen oder sonst was PHP-typisches machen.
Hier eine http://yaslaw.info/example/ajax/ajax_f1.html Demo des Scriptes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax - PHP example</title> </head> <body> <!-- hier wird die Scriptdatei eingebunden --> <script type="text/javascript" src="ajax_f1.js"></script> <div id="error"> </div> <form name="testForm"> <!-- beim Evwent onkeyup wird die javascriptfunktion doWork() aufgerufen --> Input text: <input type="text" onkeyup="doWork('inputText', 'outputText');" name="inputText" id="inputText" /> Output text: <input type="text" name="outputText" id="outputText" /> </form> </body> </html>
// Get the HTTP Object function getHTTPObject(){ if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) return new XMLHttpRequest(); else { alert("Your browser does not support AJAX."); return null; } } // Change the value of the outputText field function setOutput(){ if(httpObject.readyState == 4){ document.getElementById(tagId).value = httpObject.responseText; } } // Implement business logic function doWork(arg, inTagId){ httpObject = getHTTPObject(); tagId = inTagId; if (httpObject != null) { //php-Datei auf dem Server aufrufen httpObject.open("GET", "ajax_f1_server.php?" + arg + "=" + document.getElementById('inputText').value, true); httpObject.send(null); httpObject.onreadystatechange = setOutput; } } var httpObject = null;
<?php //Rückgabewert mit einem echo() zurückgeben if (isset($_GET['inputText'])) echo strtoupper($_GET['inputText']); ?>