CODEWITHSUNDEEP
phpjavascriptajax
Georas ViverosAguilera
Georas ViverosAguilera

Reputation: 5

Cannot read property 'readyState' of undefined

spend hours to find what has gone wrong, but failed.. since I'm new to Ajax, so I've no idea what I'm seeing. really need you guys to find the bug.

HTML

    <!doctype 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>

javascript :

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");
    }
    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 went wrong');
        }
    }
}

PHP (I think this file caused the problem)

<?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. '!';
    }else if($food == ''){
        echo 'Enter a food name.';
    }else 
    {
        echo "no, we don't sell " .$food. "!";
    }

echo '</response>';

?>

Upvotes: 0

Views: 10909

Answers (2)

Paul Roub
Paul Roub

Reputation: 36448

Your object creation logic seems backward (should try to create the modern object when you can, do the IE thing only if necessary), and mis-capitalized.

Try:

  if (window.XMLHttpRequest) {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch(e) {
            xmlHttp = false;
        }
    } else {
        try{
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }catch(e){
            xmlHttp = false;
        }
    }

Upvotes: 2

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107566

JavaScript is case sensitive. You've got some syntax errors due to improper casing on some of the objects you're trying to create:

ActiveXobject

should be

ActiveXObject
       ^

and

XmlHttpRequest

should be

XMLHttpRequest
 ^^

The end result is that you're trying to create things that don't exist, resulting in the xmlHttp variable that is always false or undefined.

Upvotes: 2

Related Questions