javascript - AJAX tutorial not working

I was following Bucky's (the new boston) tutorial on Ajax and got stuck right on the 1st lesson =|

Here's my problem:

Ajax isn't working. I set some checkpoint alerts on .js and found that "readyState" never hits 4 - I only get 3 alerts:

f(process) 1st checkpoint - readyState: 0
f(process) 2nd checkpoint - readyState: 0
f(handleServerResponse) 1st checkpoint - readyState: 1

I'm running on localhost with Xampp, browsers are Chrome and Firefox.

Here's the code:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <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" />
    </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', 'loaf', 'ham');
        if(in_array($food, $foodArray))
            echo 'We do have ' . $food . '!';
        elseif($food=='')
            echo 'Enter a food you idiot';
        else
            echo 'Sorry punk we dont sell no ' . $food . '!'
    echo '</response>';

?>

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 hoss!");
    else
        return xmlHttp;
}

function process(){
    alert("1st checkpoint f(process) - readyState: " + xmlHttp.readyState);//
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
        alert("2nd checkpoint f(process) - readyState: " + xmlHttp.readyState);//
        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(){
    alert("1st checkpoint f(handleServerResponse) - readyState: " + xmlHttp.readyState);//
    if(xmlHttp.readyState==4){
        alert("2nd checkpoint f(handleServerResponse) - readyState: " + xmlHttp.readyState);//
        if(xmlHttp.status==200){
            xmlReponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlReponse.documentElement;
            message = xmlDocumentElement.firstChild.data;
            document.getElementById("underInput").innerHTML = message;
            //setTimeout('process()', 1000);
        }else{
            alert('Something went wrong!');
        }
    }
}

Any help appreciated!

I was following Bucky's (the new boston) tutorial on Ajax and got stuck right on the 1st lesson =|

Here's my problem:

Ajax isn't working. I set some checkpoint alerts on .js and found that "readyState" never hits 4 - I only get 3 alerts:

f(process) 1st checkpoint - readyState: 0
f(process) 2nd checkpoint - readyState: 0
f(handleServerResponse) 1st checkpoint - readyState: 1

I'm running on localhost with Xampp, browsers are Chrome and Firefox.

Here's the code:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <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" />
    </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', 'loaf', 'ham');
        if(in_array($food, $foodArray))
            echo 'We do have ' . $food . '!';
        elseif($food=='')
            echo 'Enter a food you idiot';
        else
            echo 'Sorry punk we dont sell no ' . $food . '!'
    echo '</response>';

?>

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 hoss!");
    else
        return xmlHttp;
}

function process(){
    alert("1st checkpoint f(process) - readyState: " + xmlHttp.readyState);//
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
        alert("2nd checkpoint f(process) - readyState: " + xmlHttp.readyState);//
        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(){
    alert("1st checkpoint f(handleServerResponse) - readyState: " + xmlHttp.readyState);//
    if(xmlHttp.readyState==4){
        alert("2nd checkpoint f(handleServerResponse) - readyState: " + xmlHttp.readyState);//
        if(xmlHttp.status==200){
            xmlReponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlReponse.documentElement;
            message = xmlDocumentElement.firstChild.data;
            document.getElementById("underInput").innerHTML = message;
            //setTimeout('process()', 1000);
        }else{
            alert('Something went wrong!');
        }
    }
}

Any help appreciated!

Share Improve this question asked Sep 1, 2014 at 3:27 DBS 3015 silver badges14 bronze badges

1 Have you thought of using jQuery instead? – zsawaf Commented Sep 1, 2014 at 3:28
3 the first problem is xmlHttp.onreadystatechange = handleServerResponse();.. you need to assign a function reference to the statechange don't invoke the function xmlHttp.onreadystatechange = handleServerResponse; – Arun P Johny Commented Sep 1, 2014 at 3:29
@zsawaf Yeah I did, no success. I have tried everything actually, this tutorial being my last resort... I'm stuck with Ajax for days already. – DBS Commented Sep 1, 2014 at 3:31
you are trying to read the value of userInput in onload handler... where it is empty... probably you might want to use a click handler? – Arun P Johny Commented Sep 1, 2014 at 3:33
try something like jsfiddle/arunpjohny/kp36er5u/1 – Arun P Johny Commented Sep 1, 2014 at 3:38

| Show 2 more ments

5 Answers 5

Sorted by: Reset to default 5

This is from Bucky's AJAX tutorials. And if you are interesed here is full working code :

index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
    <h3>The Chuff Bucker</h3>
    Enter the food you would like to order:
    <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.'!';
elseif ($food=='')
    echo 'Enter a food you idiot';
else
    echo 'Sorry punk we dont sell no '.$food.'!';
echo '</response>';
?>

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;
}

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);//cekaj 1s pa probaj opet
}
}

function handleServerResponse(){
if(xmlHttp.readyState==4){ 
    if(xmlHttp.status==200){
        xmlResponse = xmlHttp.responseXML; //izvlaci se xml sto smo dobili
        xmlDocumentElement = xmlResponse.documentElement;
        message = xmlDocumentElement.firstChild.data;
        document.getElementById("underInput").innerHTML = message;
        setTimeout('process()', 1000);
    }else{
        alert('Someting went wrong !');
    }
}
}

Here is how I would approach the problem.

var userInput = $("#userInput").val();
$.ajax({
   url: 'foodstore.php',
   data: userInput,
   method: 'GET',
   success: function(response){
       $("#underInput").html(response);
   }
});

A lot cleaner as you can see! And does the same thing :)

In foodstore.js, inside process(), replace this line:

xmlHttp.onreadystatechange = handleServerResponse();

with this line:

xmlHttp.onreadystatechange = handleServerResponse;

This is because you are passing the function itself, not the return value after the function is called. See http://www.reddit./r/learnprogramming/ments/24iqej/javascriptjquery_why_are_parentheses_not_always/

When I was having trouble with this, I changed this line

alert('Someting went wrong !');

to this:

alert('Someting went wrong ! readyState = ' + xmlHttp.readyState + ', Status = ' + xmlHttp.status);

I noticed that my status was always 0, so I looked in my console and got this error:

XMLHttpRequest cannot load file: foodstore.php?food="+food

Looking into this error I found this answer to a similar problem.

Basically, my browser was blocking my XMLHttpRequest request for security reasons. I upload these files (+ bug fixes) to a personal web server and the AJAX worked! There are also several other workarounds listed in the link above.

Make sure that the folder you are working is in the htdocs folder of XAMPP!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AJAX tutorial not working - Stack Overflow

index.html:

foodstore.php:

foodstore.js:

index.html:

foodstore.php:

foodstore.js:

5 Answers 5

与本文相关的文章

评论列表(0)