IC SunsetThe developerWorks Connections platform will be sunset on December 31, 2019. On January 1, 2020, this community and its apps will no longer be available. More details available on our FAQ.
Topic
  • 1 reply
  • Latest Post - ‏2014-09-20T11:14:56Z by jitupkp
hiphop12ism
hiphop12ism
1 Post

Pinned topic [AJAX] Website not Working [Newbie]

‏2013-05-27T05:27:54Z | ajax

Hey, fellas. I have just started LEARNING AJAX. I am having prblems in the first website only. So this website is like a restaurant menu, which tells you the avaible food. With respect to the user's query.

But its not displaying the end result. As i think, it is not reaching till the lastfile.

I am uploading the codes for all the php, javascript, and html files.

THE HTML FILE (NOTHING SPECIAL :P) [FOODSTORE.HTML]:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="foodstore.js"> </script>
  5. </head>
  6. <body>
  7. <input type="text" id="userInput" onkeyup="process()" />
  8. <div id="underInput" />
  9. </body>
  10. </html>

_____________________________________________________________________________
THE JAVASCRIPT FILE: [foodstore.js]:

  1. var xmlHttp = createXmlHttpRequestObject();
  2.  
  3. function createXmlHttpRequestObject() {
  4.  
  5. var xmlHttp;
  6.  
  7. if (window.ActiveXObject){
  8. try{
  9. xmlHttp = new ActiveXObject("Microsofot.XMLHTTP");
  10. } catch (e) {
  11. xmlHttp = false;
  12. }
  13. }else{
  14. try{
  15. xmlHttp = new XMLHttpRequest();
  16. } catch (e) {
  17. xmlHttp = false;
  18. }
  19. }
  20.  
  21. if (!xmlHttp) {
  22. alert("Could not create XML Object");
  23. } else {
  24. return xmlHttp;
  25. }
  26. }
  27.  
  28.  
  29.  
  30.  
  31. function process() {
  32.  
  33.  
  34. food = encodeURIComponent(document.getElementById("userInput").value);
  35. //alert(food);
  36. xmlHttp.open("GET", "foodstore.php?food="+food, true);
  37. xmlHttp.onreadystatechange = handleServerResponse;
  38. xmlHttp.send();
  39.  
  40. }
  41.  
  42. function handleServerResponse () {
  43.  
  44. if ( xmlHttp.readyState==4 )
  45. if ( xmlHttp.status==200) {
  46. xmlResponse = xmlHttp.responseXML;
  47. xmlDocumentElement = xmlResponse.documentElement;
  48. message = xmlDocumentElement.firstChild.textContent;
  49. document.getElementById("underInput").innerHTML = '<span style="color:blue">' + message + '</span>';
  50. }
  51. }

__________________________________________________________

the php file: [foodstore.php]

  1. <?php
  2. header('Content-Type: text/xml');
  3. echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
  4.  
  5. echo '<response>';
  6. $food=$_GET['food'];
  7. $foodArray = array('tuna','bacon','beef','loaf','ham');
  8.  
  9. if (in_array($food,$foodArray)) {
  10. echo "We do have ".$food;
  11. } elseif ($food==''){
  12. echo "Enter food";
  13. } else {
  14. echo "Sorry, we do not have ".$food;
  15. }
  16.  
  17. echo '</response>';
  18. ?>

_______________________________________

Also, for clarification:

For the server factor, earlier I was using xampp. { ACTUALLY, I AM QUITE FAMILIAR WITH JAVASCRIPT AND PHP, but ajax is a very new topic for me}. Obviuosly it didnt work. So for experiment's sake , I registered on serverfree.com. But still no new development!

in case you WANT TO visit the file: => http://tattikhale.bugs3.com/foodstore.html

ALSO IF YOU ARE ABLE TO SOLVE THE ABOVE PROBLEM: PLEASE UPLOAD IT AND DO GIVE ME THE LINK.

THANKS IN ADVANCE....

P.S: PLEASE HELP THE NOOB. HE IS REALLY STUCK.. :(