I have just started to learn Ajax and have watched a tutorial on how to write a small input that checks whether a foodstore has something in stock or whether it hasn't.
I have double-checked the code several times but it still does not execute anything. I would be glad if anyone could help me here.
The code is basically three files:
Index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
<h3>The Food Store</h3>
<p>Enter the food you would like to have:</p>
<input type="text" id="userInput">
<div id="underInput"/>
</body>
</html>
foodstore.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', 'bacon', 'beef', 'ham');
if(in_array($food,$foodArray)) {
echo 'We do have '.$food'!';
echo '</response>';
}
}
?>
and finally the foodstore.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("Cant create that object!");
else {
return xmlHttp;
}
}
// This is now the communication part!
function process() {
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
food = encodeURIComponent(document.getElmentById("userInput").value);
xmlHttp.open("GET", "foodstore.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 styel="color:blue">' + message + '</span>';
setTimeout('process()',1000);
}else{
alter('Something went wrong!');
}
}
}
I would really appreciate some help. I also read in the youtube-comments that jQuery would rather be easier to use as far as the js part goes. Is that true?
Many thanks!
