CODEWITHSUNDEEP
phpjavascripthtmlajaxjson
nathansizemore
nathansizemore

Reputation: 3196

Request ready state always returns 0?

I am new to JavaScript and trying to play with some Ajax to dynamically load HTML into a <div> element. I have a PHP page that spits out a JSON with the HTML needed to insert into the <div>. I have been testing and cannot get the call to work. I started to do alerts on my readystate, and I get 0 and then nothing else. From my understanding, the function sendData() should be called every time the readystate changes, but it appears to only do it once, or the readystate never changes, so it only gets called once...?

This is my PHP

<?php
    $array['html'] = '<p>hello, menu here</p>';
    header('Content-type: application/json');
    echo json_encode($array);
?>

This is my HTML

<!DOCTYPE html>
<html>
<head>
<title>Veolia Water - Solutions and Technologies Dashboard</title>  
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
<meta name="description" content="Veolia Water - Dashboard"/>
<meta http-equiv="imagetoolbar" content="no" />
<meta author="Nathan Sizemore"/>
<link rel="stylesheet" href="./css/stylo.css" media="screen"/>
</head>
<body>
    <div id="menu">
    </div>
    <div id="content">
    </div>
</body>
<script src="./js/dashboard.js"></script>
</html>

This is my JavaScript

var request;
window.onload = function() 
{
     load_menu();
}

//Load menu function
function load_menu()
{   
    request = getHTTPObject();
    alert(request.readyState);
    request.onreadystatechange = sendData();
    request.open("GET", "./php/menu.php", true);
    request.send(null);
}

function getHTTPObject()
{
    var xhr = false;
    if (window.XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    } 
    else if (window.ActiveXObject) 
    {
        try
        {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                xhr = false;
            }
        }
    }
    return xhr;
}

function sendData()
{
    alert(request.readyState);
    // if request object received response
    if (request.readyState == 4)
    {
        var json = JSON.parse(request.responseText);
        document.getElementById('menu').innerHTML = json.html;
        alert(json.html);
    }
}

Thanks in advance for any help!

Nathan

Upvotes: 0

Views: 547

Answers (3)

Ian
Ian

Reputation: 50903

Use this:

request.onreadystatechange = sendData;

Note that the () are removed from sendData()

What you had before was immediately executing sendData and returning its result to onreadystatechange. Since nothing is actually returned, the value is undefined. It wasn't actually setting anything to onreadystatechange and therefore not actually executing anything when the state changes. The onreadystatechange property expects a reference to a function...which is exactly what sendData is.

In your code, since sendData was executed once (accidentally), the state reported is 0 (the XHR's initial state).

Upvotes: 2

apsillers
apsillers

Reputation: 115960

request.onreadystatechange = sendData();

should be

request.onreadystatechange = sendData;

You're calling sendData immediately and using the result of that function as the listener, rather than using the function itself.

Upvotes: 1

Andreas
Andreas

Reputation: 21911

Change this line

request.onreadystatechange = sendData();

To this

request.onreadystatechange = sendData;

The first code calls sendData and assigns the result as the handler.
The second one assigns the function itself.

Upvotes: 1

Related Questions