Hallo,
ich bin neu in Ajax und komme nicht weiter. Ich habe 3 Textfelder. Wenn ich in das erste was eingebe, dann sollen im 2. und 3. Werte erscheinen, die per PHP-Script abgerufen werden. Allerdings bekomme ich beim ersten Buchstaben FM:
ajax.htm
ajax.php
Was mache ich falsch?
ich bin neu in Ajax und komme nicht weiter. Ich habe 3 Textfelder. Wenn ich in das erste was eingebe, dann sollen im 2. und 3. Werte erscheinen, die per PHP-Script abgerufen werden. Allerdings bekomme ich beim ersten Buchstaben FM:
Code:
Line: 27 Char: 4 Error: Object required Code: 0 URL: http://localhost/ajax.htm
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Ajex-Test</title>
<script type="text/javascript">
<!--
var req = null;
function handleTranslation()
{
switch(req.readyState)
{
case 4: if(req.status!=200) { alert("Fehler:"+req.status); }
else
{
//felder des formulars
nachname_field = document.getElementById("nachname");
funktion_field = document.getElementById("funktion");
//antwort des servers
xml = req.responseXML;
nachname_resp = xml.getElementsByTagName("nachname")[0];
funktion_resp = xml.getElementsByTagName("funktion")[0];
//schreiben des ergebnisses
nachname_field.value = nachname_resp.firstChild.nodeValue;
funktion_field.value = funktion_resp.firstChild.nodeValue;
}
break;
default:
return false;
break;
}
}
function translate()
{
//erstellen des requests
try
{
req = new XMLHttpRequest();
}
catch (e)
{
try
{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
req = null;
}
}
}
if (req == null) alert("Error creating request object!");
//anfrage erstellen (GET, url ist localhost,
//request ist asynchron
var url = 'ajax.php?translate='+
document.getElementById('vorname').value;
req.open("GET", url, true);
//Beim abschliessen des request wird diese Funktion ausgeführt
req.onreadystatechange = handleTranslation;
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
req.send(null);
}
//-->
</script>
<style type="text/css">
label, input, select
{
display: block;
float: left;
width: 100px;
}
form br { /* Alle Zeilenumbrüche in Formularen auswählen */
clear: left; /* das floating der labels und inputs aufheben */
}
label {
text-align: right;
padding-right: 1em;
}
</style>
</head>
<body><p>Finde den Typ:</p>
<div id="eins">
<form style="BORDER-RIGHT: blue 1px dashed; PADDING-RIGHT: 10px; BORDER-TOP: blue 1px dashed; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: blue 1px dashed; WIDTH: 400px; PADDING-TOP: 10px; BORDER-BOTTOM: blue 1px dashed">
<label for="vorname">Vorname:</label> <input id="vorname" style="WIDTH: 200px" onKeyUp="translate();" name="vorname" type="text" /><br />
<label for="nachname">Nachname:</label> <input id="nachname" style="WIDTH: 200px" readonly="readonly" name="nachname" type="text" /><br />
<label for="funktion">Funktion:</label> <input id="funktion" style="WIDTH: 200px" readonly="readonly" name="funktion" type="text" /><br />
</form>
</div></body>
</html>
Code:
<?php
header("Content-Type: text/xml");
$vorname = mysql_escape_string($_REQUEST['translate']);
if ($vorname == "Hans") { $nachname="Dampf"; $funktion="Hausmeister"; }
else if ($vorname == "Lisa") { $nachname="Meier"; $funktion="Chefin"; }
else if ($vorname == "Fritz") { $nachname="aka Fritz"; $funktion="Fritzchen"; }
else { $nachname="Ich habe nichts"; $funktion="gefunden! Try again!"; }
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<translation>
<vorname><?php echo $vorname; ?></vorname>
<nachname><?php echo $nachname; ?></nachname>
<funktion><?php echo $funktion; ?></funktion>
</translation>
Kommentar