Ajax Problem

brain_surgery

Huhu!
Erstmal, ich bin ein ziemlicher Anfänger was Javascript und Ajax Abfragen angeht. Mittlerweile hab ich mich aber so zusammengerauft mit der Materie, dass ich zumindest schonmal funktionierende Abfragen zusammenbringe. Aus irgendeinem Grund, der mir aber nicht schlüssig ist, will folgende Abfrage einfach nicht klappen:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:

function changeFarbe()
{
	var url = "http://blabla";
	var ajaxRequest;
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  ajaxRequest=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){
			alert(ajaxRequest.responseText);
			var neue_farbe = document.getElementById("farbe_alias_input").value;
			document.getElementById("farbe_alias_span").innerHTML = neue_farbe;
			document.getElementById("farbe_alias_span").onclick="makeInput();";
		}
	}
	
	var parameter = "id=<?=$id?>&farbe="+neue_farbe;
	ajaxRequest.open("POST", url, true);
	ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	ajaxRequest.send(parameter);
}

Ich möchte ganz einfach einen Wert aus einem Input-Feld an die Datenbank senden.(Und das Input feld daraufhin wieder verschwinden lassen.) Das dazugehörige PHP Skript funktioniert einwandfrei. Auch eigentlich alles andere. Nur diese eine Abfrage tut einfach gar nichts. Ich hab die URL geprüft, die passt (hab sie hier rausgenommen), und eigentlich ist die ganze Abfrage 1:1 von einer meiner anderen (funktionieren) Abfragen kopiert. Ich versteh nicht, warum es nicht klappt.

Kann mir vielleicht jemand helfen? ;_;

lg, brain

Oli

Hi,

auf den ersten Blick sieht der Code ganz gut aus. Bevor ich mir das aber genauer ansehe... Wohin geht denn dein Request?

Es muss sich in aller Regel um die selbe Domain handeln, ansonsten wird der Browser das aus Sicherheitsgründen (es könnte sonst jemand Fremdcode einschleusen), verweigern.. ist ein bisschen ähnlich wie z.B. bei Frames oder Cookies.

Also wenn die Seite www.meine-seite.de einen AJAX-Request auf www.andere-seite.de macht, wird der Browser das verweigern. Auch hier gibt es noch einige Möglichkeiten, aber es wird dann definitiv etwas komplizierter werden.

LG

brain_surgery

Huhu!
Danke für die Antwort! Die Seite, die angefragt wird, liegt auf der selben Domain. Sprich ist nur eine weitere, ganz unspektakuläre Unterseite. Wie gesagt, etwas weiter oben im Code ist ja eine ähnliche Anfrage, die ohne Probleme klappt.
Lg

Oli

Zitat:

Original von brain_surgery
Wie gesagt, etwas weiter oben im Code ist ja eine ähnliche Anfrage, die ohne Probleme klappt.

Rein vom Prinzip her sollte der Code auch funktionieren. Hast du mehrere dieser Codes auf einer Seite? Eventuell gibts einen Konflikt mit den Variablenbezeichnern (Javascript ist da manchmal ein bisschen verwirrend).

Ansonsten bräuchte ich weitere Informationen, um dir weiterhelfen zu können - am besten wäre es, du postest einfach mal die ganze Seite (Link geht natürlich auch).

Ich würde an deiner Stelle als nächstes überprüfen, ob der Request wirklich so abläuft, wie du es erwartest. Also einfach mal ein paar alert() in den Code schreiben, z.B. bei onreadystatechange unabhängig von den Werten einfach mal ajaxRequest.readyState und ajaxRequest.status ausgeben lassen und schauen, was da drin steht.

LG

brain_surgery

(ADSSFDSFGGFFDH FIREFOX WHY ich hatte so einen langen Post getippt und dann derpst du...Okay, nochmal von neu...)

Sorry dass ich erst jetzt antworte, war gestern nicht am PC. @u@

Die ganze Seite wäre ein bisschen gar lang (es handelt sich um einen Pferdesteckbrief), aber das ist sämtlicher Javascript Code, der drauf ist:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:

<script type="text/javascript" language="javascript">  
  function doAction(url, action){
	var urlstring = url+".php";
	var ajaxRequest;
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  ajaxRequest=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
	  }

	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){
			//->irrelevant
			
		}
	}
	
	ajaxRequest.open("POST", urlstring, true);
	ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	ajaxRequest.send("id=<?=$id?>");
}

function makeInput() 
{
	document.getElementById("farbe_alias_span").innerHTML = "<input type="text" name= "farbe_alias_input" id = "farbe_alias_input" value ="<?=$pferd["farbe_alias"]?>" onblur="changeFarbe();">";
	document.getElementById("farbe_alias_span").onclick="";
	document.getElementById("farbe_alias_input").focus();
}


function changeFarbe()
{
	alert("test1");
	var url = "ajax_changefarbe.php";
	var ajaxRequest;
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  ajaxRequest=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	alert("test2");
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){
			alert(ajaxRequest.responseText);
			var neue_farbe = document.getElementById("farbe_alias_input").value;
			document.getElementById("farbe_alias_span").innerHTML = neue_farbe;
			document.getElementById("farbe_alias_span").onclick="makeInput();";
		}
		alert("test4");
                alert(ajaxRequest.status);
	        alert(ajaxRequest.readyState);
	}
	alert("test3");
	var parameter = "id=<?=$id?>&farbe="+neue_farbe;
	ajaxRequest.open("POST", url, true);
	ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	ajaxRequest.send(parameter);
        alert(ajaxRequest.status);
	alert(ajaxRequest.readyState);
}

</script>

Die dazugehörige PHP Seite ist:

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

<?php
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0');
include("datenbank.php");

//Daten in Datenbank eintragen
$query = mysql_query("UPDATE pferde SET farbe_alias = '".$_POST["farbe"]."' WHERE id = '".$_POST["id"]."'") or die (mysql_error());
echo "erfolg";
exit;
?>

Angezeigt werden die alerts bis "test3", dann kommt nichts mehr. Weder alert(ajaxRequest.status); noch alert(ajaxRequest.readyState); führen zu irgendeiner Ausgabe. Wobei ich mir da nicht sicher bin, ob die an den richtigen Stellen platziert sind.
Ich habe auch versucht, alle Variablen in der zweiten AJAX Funktion umzubenennen, mit dem selben Ergebnis.
Allerdings muss ich anmerken, dass ich nicht wirklich eine Ahnung habe wie oder warum die ajaxRequest.onreadystatechange = function() funktioniert...Wenn sies denn tut. (Hat das was mit Objekten zu tun? Mit denen bin ich noch nicht ganz so vertraut...) Das einzige was mir auffällt ist, dass sie anscheinend gar nicht aufgerufen wird. Möglicherweise gibt es da einen Namenskonflikt? Aber wie kann bzw darf ich die umbenennen, wenn das der Fall ist?

Lg

Oli

Hi,

erstmal eine kleine Sicherheitsbelehrung:

php:
1: 2: 3:	// ... $query = mysql_query("UPDATE pferde SET farbe_alias = '".$_POST["farbe"]."' WHERE id = '".$_POST["id"]."'") or die (mysql_error()); // ...

Was passiert denn, wenn ich "id" mit dem Wert ' OR '1'='1 poste?

code:
1:	UPDATE pferde SET farbe_alias = '...' WHERE id = '' OR '1'='1'

Das selbe funktioniert natürlich auch bei "farbe"... Immer schön mysql_real_escape_string() benutzen, damit deine Seitenbesucher nicht einfach deine Querys nach belieben verändern können (!).

code:
1:	ajaxRequest.onreadystatechange = function(){

.. hat tatsächlich mit der Objektorientierung zutun. Es entsteht eine Methode auf dem Objekt ajaxRequest - nämlich ajaxRequest.onreadystatechange(). Diese Methode wird immer dann aufgerufen, wenn sich der Requeststatus ändert.

Zu deinem Problem habe ich momentan leider auch keine Lösung. Wenn "test4" niemals ausgegeben wird, erfolgt der ganze Request erst garnicht. onreadystatechange wird nämlich auch dann aufgerufen, wenn der Request fehlgeschlagen ist. Nur eben mit anderem Wert in readyState.

Kann man sich das irgendwo "live" ansehen oder ist das problematisch?
Welchen Browser verwendest du zum Testen? Geht es evtl. in anderen?

Falls du keine Lust hast dich weiter damit zu ärgern, kann ich dir ansonsten noch vorschlagen, dir jQuery anzusehen. Damit spart man sich relativ viel Arbeit (auch bei anderen Dingen) und zu heutigen Zeiten (schnelle Computer, schnelle Internetverbindung) ist die Bibliothek in der Ladezeit nun wirklich zu vernachlässigen.

LG

brain_surgery

Okay, ich hab jetzt mal die Sicherheitsdings eingefügt. großes Grinsen

Hab außerdem nur diese eine Abfrage auf eine neue Seite gepackt um sicherzugehen, dass ich nicht etwa den Verstand verliere (zu testen hier), aber es gibt mir genau das selbe Ergebnis. Getestet in Firefox und Chrome und von ein paar Freundinnen. Nichts. Ich versinke in Ratlosigkeit...
*flies into the sun*

Und jQuery habe ich mir tatsächlich schon versucht anzusehen, aber bisher blicke ich da noch kaum durch. xD Irgendwie scheint das nicht zu klappen, wenn man es in durch include() eingesetzten Code verwenden will? Aber ja, das ist dann eine ganz andere Geschichte und hat mit dem Thema hier denk ich nix zu tun. XuX

Lg!

EDIT: Alles klar, wir konnten das Problem lösen. Danke nochmal! x3
Es lag daran, dass die Variable neue_farbe verwendet wurde, bevor sie überhaupt definiert worden ist.

Forensoftware: Burning Board, entwickelt von WoltLab GmbH