Ajax
Shaguar
- javascript
Hallo zusammen,
ich habe die ersten Gehversuche mit Ajax gemacht und habe ein Tutorial auf www.admin-wissen.de gelesen.
Dort sind auch ein paar Beispiele dabei, unter anderen eins mit der Methode JSON. Dieses hab ich auch gleich getestet und es lief auch wunderbar.
Hier mal der Quelltext :
// JavaScript Document
var req1 = null;
function handleTranslation1(){
switch(req1.readyState) {
case 4:
if(req1.status != 200) {
alert("Fehler:"+req1.status);
}else{
var Result = eval('(' + req1.responseText + ')');
alert(Result.Value1);
}
break;
default:
return false;
break;
}
}
function parseData(){
//erstellen des requests
try{
req1 = new XMLHttpRequest();
}
catch (e){
try{
req1 = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
req1 = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed){
req1 = null;
}
}
}
if (req1 == null)
alert("Error creating request object!");
var url = 'http://dos.esportsweb.de/omdb/ajax/login.ajax.php?&username='+ document.getElementById('username').value;
req1.open("GET", url, true);
req1.onreadystatechange = handleTranslation1;
req1.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
req1.send(null);
}
Ich habe auf dieser Basis nun auch schon ein paar andere Dinge erfolgreich getestet. Das Problem ist nun, sobald ich das onchange="translate();" verändere und zb auf ein Formular Button lege mit onClick="translate();" kommt immer folgender Fehler in der Firefox Konsole :
------------------------------
Fehler: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://dos.esportsweb.de/omdb/ajax/login.js :: handleTranslation1 :: line 7" data: no]
Quelldatei: http://dos.esportsweb.de/omdb/ajax/login.js
Zeile: 7
--------------------------------
Die Datei von der ich es aufrufe sieht so aus
<script type="text/javascript" src="ajax/login.js"></script>
</head>
<body>
<div id="center">
<span style="text-decoration:underline;">Login-Box</span>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<div style="border:1px dotted white; text-align:center;">
<table width="300">
<tr>
<td>User</td><td>-></td><td><input class="textfield" type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>Password</td><td>-></td><td><input class="textfield" type="password" name="password" id="password" /></td>
</tr>
<tr>
<td>Cookie?</td><td>-></td><td><input type="checkbox" /></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="Login" onClick="parseData();" /></td>
</tr>
</table>
</form>
und so die login.ajax.php
<?php
require_once("../JSON.php");
$link = mysql_connect(********************);
$SQLQUERY = "SELECT username,password FROM omdb_user WHERE username = '".$_GET[username]."'";
mysql_db_query('*******',$Query);
mysql_close($link);
$result = array("Value1" => $Obj1->username,
"Value2" => $Obj1->password);
$myjson = new Services_JSON();
print(trim($myjson->encode($result)));
?>
Fehler: [...]
Mir scheint, dass du zeitgleich das Formular versendest *und* den AJAX-Code ausführst, also parallel zwei Requests auslöst. Verhindere mal testweise ersteres, z.B. durch onclick="return false" für den Submit-Button.
Siechfred
Fehler: [...]
Mir scheint, dass du zeitgleich das Formular versendest *und* den AJAX-Code ausführst, also parallel zwei Requests auslöst. Verhindere mal testweise ersteres, z.B. durch onclick="return false" für den Submit-Button.
Siechfred
Stimmt, das scheint wirklich das Problem zu sein.
Hab es jetzt erstmal mit onSubmit="return translate();" im form tag gelöst und scheint auch zu klappen.
Also Vielen Dank erstmal, falls es noch Probleme geben sollte, melde ich mich nochmal.
Fehler: [...]
Mir scheint, dass du zeitgleich das Formular versendest *und* den AJAX-Code ausführst, also parallel zwei Requests auslöst. Verhindere mal testweise ersteres, z.B. durch onclick="return false" für den Submit-Button.
Siechfred
Stimmt, das scheint wirklich das Problem zu sein.
Hab es jetzt erstmal mit onSubmit="return translate();" im form tag gelöst und scheint auch zu klappen.
Also Vielen Dank erstmal, falls es noch Probleme geben sollte, melde ich mich nochmal.
Ok jetzt hab ich auch ein Problem, und zwar :
ich rufe ja jetzt die Translate funktion folgendermaßen auf
onSubmit="return translate();"
Die Translate Funktion ruft ja nun die Funktion function handleTranslation1() auf in dieser auch das Ergebnis abgefangen wird ( Result = eval('(' + req1.responseText + ')'); )
Wenn ich nun das Ergebnis in der Translate funktion weiterverarbeiten will um das Ergebnis zurück zu liefern, entsteht das Problem das er zu diesem Zeitpunkt den Wert von Result noch nicht kennt. Sprich wenn ich vor "return Result.Value1" ein alert aufrufe und dann das Programm weiterarbeiten lasse dann kennt er den Wert von Result. Ich hab schon versucht mit setTimeout eine kleine verzögerung einzubauen, hat aber alles nichts gebracht. Es ging bisher nur wenn ich diesen alert ausführe, aber ich will ja nicht das der User ständig irgendeinen alert wegklicken muss. Hat da vielleicht jmd ne Lösung zu diesem Problem? :
--------------------------------
req1.onreadystatechange = handleTranslation1;
req1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req1.send(null);
return Result.Value1
------------------------------------
hi,
ich rufe ja jetzt die Translate funktion folgendermaßen auf
onSubmit="return translate();"
[...]
Wenn ich nun das Ergebnis in der Translate funktion weiterverarbeiten will um das Ergebnis zurück zu liefern, entsteht das Problem das er zu diesem Zeitpunkt den Wert von Result noch nicht kennt.
Natürlich - das erste A in AJAX steht ja schliesslich für asynchron.
Du könntest deinen Request auf synchron umstellen - aber davon ist abzuraten, dass legt dir die komplette Seite lahm, wenn beim Request etwas schiefgeht.
Gebe nach dem Absetzen des Requests _immer_ false zurück, um das Abschicken des Formular zu unterbinden.
gruß,
wahsaga