my restaurant menue did not work in my first Ajax learning

+1 tuerxun yashengjiang · February 2, 2016
hey , bucky , i know you love girls, but please take a time for my ajax  error i am new learner , 
here is my test page 

http://www.adanaenglish.com/adanafood/

here is my codes : in   foodstore.php,  foodstore.js , index.html 

index file  
<!DOCTYPE html>
<html>
    <head>

     <script type="text/javascript" src="foodstore.js"></script>

    </head>
<body onload="process()">
 
 <h3>adana food </h3>
 Please tell me the food you want
 <input type="text" id="userInput" />
 <div id="underInput" />

</body>
</html>

here is php page 
<?php

header('Cotent-Type: text/xml');
 echo'<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>'; 

 echo'<response>';
    $food = $_GET['food'];
$foodArray = array('baklava','kebab','ayran','soud','pizza'); 
if(in_array($food,$foodArray))
echo 'we do have'.$food.'!';
elseif($food=='')
     echo 'enter your food';
else
   echo 'we do not  have '.$food.'!';
 
 echo '</response>';
?>

here is Js page 

var xmlHttp = createXmlHttpRequestObject();


function createXmlHttpRequestObject(){
 
              var xmlHttp;
          

              if(window.ActiveXObject){
               try{
  xmlHttp = new Active.XObject("Microsoft.XMLHTTP");
  }catch(e){
  xmlHttp = false;  
  }    
 }else{   
   try{   
  xmlHttp = new XMLHttpRequest();    
    }catch(e){
  xmlHttp = false;
  
            }  
            }
  if(!xmlHttp)
  alert("can not creat that object");
  else 
  return xmlHttp;
 } 
               
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
     food = encodeURIComponent(document.getElementById("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 style=color:blue">' + message + '</span>;
setTimeout('process()',1000);

}else{
alert('something wrong');
}
}
}

Post a Reply

Replies

Oldest  Newest  Rating
0 Christian McFadden · February 9, 2016
Your html and php look good, but there is an error in your javascript. Near the end of one line you're missing an end quote.

So this:

document.getElementById("underInput").innerHTML = '<span style=color:blue">' + message + '</span>;

should be this:

document.getElementById("underInput").innerHTML = '<span style=color:blue">' + message + '</span>';

I'm not sure that's the only error, just the only one I spotted. Hope that helps.
  • 1

Javascript

103,552 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators