Menu
I have a simple HTML file, that gets data from the server and outputs it:
<html>
<head>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
function startRequest() {
xmlhttp.onreadystatechange = handleStateChange;
xmlhttp.open("GET", "http://new-host-2.home/test.html", true);
xmlhttp.send(null);
}
function handleStateChange() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
alert("The server replied with: ", xmlhttp.responseText);
}
else {
alert(xmlhttp.status);
}
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Woooo" onclick="startRequest()"/>
</form>
</body>
</html>
The file that is on the server, test.html looks like this:
<h1>Data received!</h1>
I keep getting 0 as a status, despite the fact that in the console, it says everything is fine, and gives a 200 status. When I change if (xmlhttp.status == 200) to if (xmlhttp.status == 0), it just outputs The server replied with:. Why is this? Am I messing something up?
EDIT: It might just be my server, I'm gonna switch to a different one.
The Headers might be helpful:
Response Headers
Accept-Ranges bytes
Connection Keep-Alive
Content-Length 13
Content-Type text/html
Date Sat, 09 Jun 2012 14:17:11 GMT
Etag "267749b-d-4c20a6d0ef180"
Keep-Alive timeout=15, max=100
Last-Modified Sat, 09 Jun 2012 13:52:22 GMT
Server Apache/2.2.19 (Unix) DAV/2
Request Headers
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Connection keep-alive
Host new-host-2.home
Origin null
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:13.0) Gecko/20100101 Firefox/13.0
566
alert function only takes one parameter, you're passing 2.
Give this a shot:
var xmlhttp = new XMLHttpRequest();
function startRequest() {
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
alert("The server replied with: " + xmlhttp.responseText);
else
alert(xmlhttp.status);
}
}
xmlhttp.open("GET", "http://new-host-2.home/test.html", true);
xmlhttp.send();
}
If it still doesn't work, it might be a security issue: http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/282972/why-am-i-getting-xmlhttprequest.status0
If it works in Safari, then try removing the domain in your request to make the path relative. Firefox might be thinking that you're attempting some cross-domain stuff.
var xmlhttp = new XMLHttpRequest();
function startRequest() {
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
alert("The server replied with: " + xmlhttp.responseText);
else
alert(xmlhttp.status);
}
}
xmlhttp.open("GET", "/test.html", true);
xmlhttp.send();
}
Pretty hard to say what exactly is the issue here. Here are something things I suspect it might be
1) Same host policy. Make sure the page you are requesting it from is on the exact same host. For instance one could be www. and other one not. Simplest way to do it is to omit the host part of the URL when making the AJAX request.xmlhttp.open("GET", "/test.html"); should just work.
2) Scoping issues. Perhaps you are reading state from a different object than the one making the request? Make sure you are reading the same object by getting it from the event passed to the callback. Btw XMLHttpRequest is not reusable anyway, so don't think you are saving some resources by making it global. Much easier to declare it inside the startRequest function.
Then change callback like this:
function handleStateChange(e)
{
var xmlhttp = e.target;
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
alert("The server replied with: " + xmlhttp.responseText);
else
alert(xmlhttp.status);
}
}
There are some very nice wrappers for making AJAX requests (jQuery in particular), but if you are bent on making your own (or just learning insides), then this is approx what you want:
function startRequest(url, callback)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function(e)
{
if (xmlhttp.readyState == 4 && xmlhttp.status >= 200 && xmlhttp.status < 300)
callback(xmlhttp.responseText);
};
xmlhttp.open("GET", url);
xmlhttp.send(null);
}
startRequest("/test.html", function(response) {alert("The server replied with: " + response);});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
