Request ready state always returns 0?
Question
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
3 answers
solution1
2 ACCPTED 2013-04-05 20:42:56
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 return ed, 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).
solution2
1 2013-04-05 20:43:02
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.
solution3
1 2013-04-05 20:43:41
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.