JavaScript Problem mit Ajax

Biehler · 6 Oktober 2009

Hi,
es geht um folgendes Adressbuch:
https://5fs.de/phone/start.html

PIN: 127
Nummer: 015159178261

Einloggen funktioniert sowohl im Chrome, als auch im FF und IE.

Aber:
Wenn ich im Firefox eine Adresse hinufügen will, die bereits eistiert (in diesem Fall: asd), zeigt er die Meldung an "2Nummer hinzugefügt" (siehe unten).

Der Chrome zeigt immer die Meldung "Login erfolgreich" an.
Egal ob ich eine nicht vorhandene Nummer erfolgreich hinzufüge oder ob ich eine vorhandene Nummer einfügen will (was einen Fehler nach sich zieht).

Einzig und allein der Internet Explorer zeigt die Meldungen an, die er anzeigen soll.

Anzumerken ist evtl, dass der Firefox die Meldungen auch eine zeitlang richtig angezeigt hat, aber als ich dann den DIV Containern und Input Feldern CSS Klassen verpasste, wollte er nicht mehr.
Ohne Klassen gehts nicht, ich kann ja nicht zig verschiedene IDs anlegen bzw in jeden DIV Tag nen style Attribut reinkloppen.

Codes:

HTML:

// suggest.js
function makeHttpRequest() {
	var resObjekt = null;
	try {
			resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
		}
	catch(Error) {
		try {
			resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
		}
		catch(Error) {
			try {
				resObjekt = new XMLHttpRequest();
			}
			catch(Error) {
				alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
			}
		}
	}
	return resObjekt;
}
var resObjekt = makeHttpRequest();
 
function login() {
	if(document.gesamt.pin.value != "" && document.gesamt.num.value != "") {
		resObjekt.open('get', 'phone.php?do=login&pin=' + document.gesamt.pin.value+'&num='+document.gesamt.num.value, true);
		resObjekt.onreadystatechange = login2;
		resObjekt.send(null);
	}
}
function send_add() {
	if((document.add.uname.value != "") && (document.add.unr.value != "")) {
		resObjekt.open('get', 'phone.php?do=add&num=' + document.add.unr.value+'&name='+document.add.uname.value, true);
		resObjekt.onreadystatechange = add2;
		resObjekt.send(null);
	}else
		set_error("Bitte beide Felder ausfüllen");
}
function set_error(str1) {
	document.getElementById("error").style.display="block";
	document.getElementById("error").innerHTML=str1;
}
function add2() {
	if(resObjekt.readyState == 4) {
		if(resObjekt.responseText==100) {
			document.getElementById("error").style.display="block";
			document.getElementById("error").innerHTML="Nummer hinzugefügt"+resObjekt.responseText;
		}else if(resObjekt.responseText==101) {
			document.getElementById("error").style.display="block";
			document.getElementById("error").innerHTML="Fehler beim Hinzufügen";
		}else if(resObjekt.responseText==102) {
			document.getElementById("error").style.display="block";
			document.getElementById("error").innerHTML="Nummer bereits vorhanden";
		}else if(resObjekt.responseText==200) {
			document.getElementById("error").style.display="block";
			document.getElementById("error").innerHTML="Nicht eingeloggt!";
		}else{ 
			document.getElementById("error").style.display="block";
			document.getElementById("error").innerHTML="2Nummer hinzugefügt"+resObjekt.responseText;		
		}
	}	
	document.getElementById("add_form").style.display="none";
	document.getElementById("add").style.display="block";
	document.getElementById("show").style.display="block";
	refresh_show();
}
function login2() {
	if(resObjekt.readyState == 4) {
		if(resObjekt.responseText==100) {
			document.getElementById("add").style.display="block";
			document.getElementById("login").style.display="none";
			set_error("Login erfolgreich!");
			refresh_show();
		}else{
			document.getElementById("error").style.display="block";
			document.getElementById("error").innerHTML="Pin nicht gefunden";
		}
	}
}

function refresh_show(p_sort,page) {
	resObjekt.open('get', 'phone.php?do=show&sort='+p_sort+'&page='+page, true);
	resObjekt.onreadystatechange = refresh_show2;
	resObjekt.send(null);

}

function refresh_show2() {
/*rückgabe der phone.php: name,nummer|name,nummer|...*/
	txt=resObjekt.responseText;
	txt_ar=txt.split('|');
	tab="";
	for(var i=0;i<txt_ar.length-1;i++) {
		txt2=txt_ar[i].split(',');
		tab=tab+"<tr><td class='phone_tr'><a href='#'onClick=\"add_num('"+txt2[1]+"');\">"+txt2[0]+"</a></td><td class='phone_tr'>"+txt2[1]+"</td><td class='phone_tr'></td></tr>";
	}
	document.getElementById("show").innerHTML="<table>"+tab+"</table>";
}

HTML:

<html>
<head>
		<script language="JavaScript" src="suggest.js"></script>
<style>
input.phone_input {
font-size:8pt;
width:80px;
background-color:#FFF2E5;
border:1px solid black;
}
div.phone {
font-size:9pt;
}
td.phone_tr {
font-size:9pt;
font-weight:bold;
background-color:#FFF2E5;
}
</style>

	</head>
	<body>
		<div id="error"style="display:none;"class='phone'>
		</div>
		
		<div id="login"class='phone'>
			<form name="gesamt">
			<b>Pin:</b><br>
			<input name="pin" type="text"class='phone_input'><br>
			<b>Nummer:</b><br>
			<input type="text"name="num"class='phone_input'><br><br>
			<input type="button"onClick="login()"value="Login"class='phone_input'>
			</form>
		</div>
		
		<div id="add"style="display:none;"class='phone'>
<a href="#" onClick="document.getElementById('show').style.display='none';document.getElementById('add_form').style.display='block';document.getElementById('add').style.display='none';">Eintrag hinzufügen</a>
		</div>
		<div id="add_form"style="display:none;"class='phone'>
				<form name="add">
				<b>Name:</b><br>
				<input type="text"name="uname"class='phone_input'><br>
				<b>Nummer:</b><br>
				<input type="text"name="unr"class='phone_input'><br><br>
				<input type="button"value="Abschicken"onClick="send_add()"class='phone_input'>
				</form>
		</div>
		
		<div id="show"class='phone'>
		
		</div>

			
	</body>
</html>

FF zeigt "2Nummer..." an, bedeutet quasi, dass in dem Fall resObjekt.responseText 0 (oder sonstwas) sein muss.
Kann aber eigentlich nicht sein, da die Responsecodeausgabe seitens des PHP Scriptes funktioniert.
Im IE geht es ja auch :ugly:

Ich vermute mal, dass ich da durch den schlechten Programmierstil was derbe versaut hab, es aber selber ned seh

BAERnado · 6 Oktober 2009

Hi,
es scheint, dein GET-Request funktioniert nicht ordentlich, denn beim Ajax-Request passiert bei mir folgendes:

GET https://5fs.de/phone/phone.php?do=add&num=123&name=test

asd,asd|asd5,as5d|asd899,asd99|asd8993,asd993|asd123,asd123|asdasdd,asdaasd|asdasdd,asdasdas|Hans,112233|test,123|

Es scheint, als wenn das serverseitige Script die Anfrage nicht korrekt bearbeitet. Hilfe würde da vor allem ein Alert oder ein console.log schaffen, damit du genauer verfolgen kannst, was wo ankommt.
Da der ResponseText auf Zahlen gegengecheckt wird und "2Nummer ..." als letzte Lösung ohne Bedingung stattfindet, ists bei dieser Serverantwort klar.

chrissel · 7 Oktober 2009

Hast du dir das schon mal mit Firebug angeschaut im Firefox?
Ist ziemlich praktisch was man mit dem Addon alles so sieht..

Biehler · 7 Oktober 2009

Nein, aber Danke für den Tipp.
Werd ich nachher gleich mal probieren !

Edit:
Thx ihr seid göttlich.
Durch die Hinweise bin ich draufgekommen.
Hab zweimal auf ein so enn Objekt zugegriffen und das hat Probleme verursacht.
Hab jetzt für die Anzeige der Einträge nen extra HttpRequest Objekt angelegt und nu gehts

CrazySash · 7 Oktober 2009

Wenn du die Möglichkeit hast, denk mal über JSON als Austauschformat statt.

Das erspart dir so ein geparse wie hier...

Biehler schrieb:

HTML:

 function refresh_show2() {
/*rückgabe der phone.php: name,nummer|name,nummer|...*/
    txt=resObjekt.responseText;
    txt_ar=txt.split('|');
    tab="";
    for(var i=0;i<txt_ar.length-1;i++) {
        txt2=txt_ar[i].split(',');
        tab=tab+"<tr><td class='phone_tr'><a href='#'onClick=\"add_num('"+txt2[1]+"');\">"+txt2[0]+"</a></td><td class='phone_tr'>"+txt2[1]+"</td><td class='phone_tr'></td></tr>";
    }
    document.getElementById("show").innerHTML="<table>"+tab+"</table>";
}

BAERnado · 9 Oktober 2009

Zu dem Beitrag von CrazySash:
man kann dabei ganz komfortabel komplette Arrays, oder Objekte in einen String wandeln und zudem ist auch bereits ein Schutz gegen Injections drin. Beim Threadersteller kanns Probleme geben durch | und , im Namen.
Außerdem lässt sich ein Objekt somit auch von JavaScript zu PHP und andersrum übergeben.

Biehler · 9 Oktober 2009

Ich hab mich da mal schon kurz reingelesen. is mir im Moment ehrlich gesagt zu kompliziert.
Hauptsache, die Sache läuft erstmal.

B2T · 10 Oktober 2009

Was soll an JSON kompliziert sein? In PHP >=5.2 rufst Du die Funktion json_encode() auf.

Zum Dekodieren brauchst Du entsprechende JavaScript-Funktionalität, die Du Dir eben von JSON.org eventuell besorgen kannst. Oder per Tipp aus IETF RFC4627, wobei man mit eval immer vorsichtig umgehen sollte:

RFC4627_6_IANA_Considerations schrieb:
A JSON text can be safely passed into JavaScript's eval() function
(which compiles and executes a string) if all the characters not
enclosed in strings are in the set of characters that form JSON
tokens. This can be quickly determined in JavaScript with two
regular expressions and calls to the test and replace methods.

PHP:

var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test( text.replace(/"(\\.|[^"\\])*"/g, ''))) && eval('(' + text + ')');

JavaScript Problem mit Ajax

Biehler

BiehlerProductions

BAERnado

Member

chrissel

Woohooo!

Biehler

BiehlerProductions

CrazySash

Well-known member

BAERnado

Member

Biehler

BiehlerProductions

B2T

Noch da? Ich auch!

Ähnliche Themen