CJay: Ajax

Hallo liebes Forum
Ich habe irgendein Problem mit meinem Ajax Code, denn er functioniert nicht ;D
 kukt es sich einer bitte an.
über die Lösung würd ich mich freun!

index.php:

<!DOCTYPE html>  
<html>  
	<head>  
		<script type="text/javascript" src="connect.js"></script>  
		<style type="text/css">  
  
		</style>  
	</head>  
	<body onload="process()">  
		<h3>Ajax</h3>  
		Enter a Food:  
		<input type="text" id="userInput"/>  
		<div id="underInput"></div>  
	</body>  
</html>

connect.js:

var xmlHttp = createXmlHttpRequestObject();  
  
function createXmlHttpRequestObject(){  
	var xmlHttp;  
	  
	if(window.ActiveXObject){  
		try{  
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
		}catch(e){  
			xmlHttp = false;  
		}  
	}else{  
		try{  
			xmlHttp = new XMLHttpRequest();  
		}catch(e){  
			xmlHttp = false;  
		}  
	}  
	if(!xmlHttp){  
		alert("Ajax geht ned");  
	}else{  
		return xmlHttp;  
	}  
}  
function process(){  
	if(xmlHttp.readyState===0 || xmlHttp.readyState==4){  
		food = encodeURIComponent(document.getElementById("userInput").value);  
		xmlHttp.open("GET","contact.php?food=" + food,true);  
		xmlHttp.onreadystatechange = handleServerResponse();  
		xmlHttp.send(null);  
	}else{  
		setTimeout(process(),1000);  
	}	  
}  
function handleServerResponse(){  
	if(xmlHttp.readyState==4){  
		if(xmlHttp.status==200){  
			xmlResponse = xmlHttp.responseXML;  
			xmlDocumentElement = xmlResponse.documentElement;  
			message = xmlDocumentElement.firstChild.data;  
			document.getElementById("underInput").innerHTML ="<span style='color:blue'>" + message + "</span>";  
			setTimeout(process(),1000);  
		}else{  
			alert('Something went wrong!');  
		}  
	}  
}

contact.php:

<?php  
header('Content-Type: text/xml');  
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';  
echo '<response>';  
	$food = $_GET["food"];  
	$foodArray = array('tuna','beef','bacon','ham');  
	if(in_array($food,$foodArray)){  
		echo 'Enter a Food';  
	}elseif($food==""){  
		echo 'Gib was ein';  
	}else{  
		echo 'Sorry wir konnten '.$food.'nicht finden !';}  
echo '</response>';  
?>
  1. denn er functioniert nicht ;D

    Das ist keine Fehlerbeschreibung!

    Was erwartest du und was ist das fehlerhafte Verhalten?
    Was sagt die Fehlerkonsole?
    Probiere mit Ausgaben zu testen wo der Fehler auftritt. Z.B. mit console.log() oder alert()

    MfG
    bubble

  2. Hallo CJay,

    du solltest dir die Abläufe bei einem asynchronen http-Request noch einmal verdeutlichen. Mir hat das Studium dieser Seite https://developer.mozilla.org/de/docs/AJAX/Einführung sehr geholfen. Zu deinem Code: die setTimeout-Aufrufe sind überflüssig, wenn nicht sogar falsch.

    Gruß, Jürgen

  3. Hallo liebes Forum, ich habe irgendein Problem ...

    das ist sehr explizit spezifiziert.

    meine erfahrung ist, zum testen (und lernen?) sollte man erst mal das ganze gedöns weglassen, also browserprüfung raus, nur einen einzelwert holen und dann kucken obs läuft. erst danach step by step das gedöns rein und schritt für schritt in echtzeit testen.

    ich verstehe z.b. nicht wieso du dir daten auch bei state 0 holst und was es mit dem timeout auf sich hat.

    auch nach GET, wenn du z.b. so schreibst

        AJAX.onreadystatechange = function () {  
          if (AJAX.readyState == 4) {  
            deine_function(AJAX.responseText); }  
        }
    

    ist das schon viel übersichtlicher. in deine_function(wert) {} kannst du dann mit den daten wert rumfuhrwerken, ohne state nochmals zu prüfen.

    also ich würde bei "hello world" anfangen, wenn du das problem nicht benennen kannst.

    • Gustl