Ajax with javascript not working on wamp server

Question

I am new to ajax and was following a youtube tutorial to create a simple food search app where users enter food name in input field it shows the name below else it says that food not available but somehow its not working on wamp server ..it shows the error alert instead

here is my code

index.html

<!Doctype html>
<html lang = "en">
 <head>
  <title>Ajax app</title>
  <meta charset = "UTF-8">
  <style>

  </style>
  <script type="text/javascript" src="foodstore.js"></script>
 </head>
 <body onload="process()">

  <h3>The Chuff Bucket</h3>
    Enter the food you would like to order:
    <input type="text" id="userInput"/>
    <div id="underInput"></div>
  </body>
</html>

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("can't create that object boss");
        }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()
    {    
    //readystate 4 whenever response is ready and object done communicating
        if(xmlHttp.readyState==4){
            //state 200 means communiaction went ok
            if(xmlHttp.readyState==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");
            }
        }
    }

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","loaf","ham");
    if(in_array($food,$foodArray))
    {
        echo "We do have" .$food. "!";
    }
    elseif($food ="")
    {
        echo "Enter a food please.";
    }
    else
    {
        echo"sorry but we don't even sell" . $food. "!";
    }
 echo "</response>";
?>

any help will be highly appreciated ,thanks

Welcome to StackOverflow - please read our How to Ask page for hints on how to improve this question. Good questions tend to solicit quick, great answers from the community — blurfus
– blurfus, Commented Jan 1, 2020 at 2:05
Which alert message does it show ? "something went wrong" or "can't create that object boss" ? — Accountant م
– Accountant م, Commented Jan 1, 2020 at 2:15
@Sash_007 That means the server didn't response with 200 ok status code, you need to check what is the response in your browser network tab. — Accountant م
– Accountant م, Commented Jan 1, 2020 at 2:17

paulsm4 · Accepted Answer · 2020-01-01 02:28:18Z

1

Please do NOT use xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");. Your best bet is to combine jQuery, but "ActiveXObject("Microsoft.XMLHTTP")" is obsolete (even for Microsoft environments), and unsupported on many browsers.

Here's a simple example (no jQuery):

var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        console.log('myArr', myArr);
    }
};
xmlhttp.open("GET", url, true);

This syntax is supported on ALL contemporary browsers ... and has been supported by Microsoft since IE7 (since 2006).

ALSO:

You definitely want to learn about Chrome Developer Tools (part of the Chrome browser), if you're not already familiar with it:

https://developers.google.com/web/tools/chrome-devtools

edited Jan 1, 2020 at 2:28

answered Jan 1, 2020 at 2:22

paulsm4

123k23 gold badges175 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ajax with javascript not working on wamp server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related