Hi everyone

I've been looking at some code from the 'Ajax for Dummies' book (page 67). I'm running the code samples on an XAMPP installation with both files in the C:\xampp\htdocs folder which (appears) to have been set up as 'localhost'. However, there are 3 odd things about this code.

1 It will not work as stated unless I change the line
XMLHttpRequestObject.status == 200
to
XMLHttpRequestObject.status == 0

2 If instead of the line
onclick = "javascript: getData('data.txt',
'targetDiv')" (which works) I put - as suggested in the book -
onclick = "javascript: getData('http://localhost/data.txt',
'targetDiv')" - it does not work. It's as if it doesn't recognise local host.

3 If I move the html file and the data.txt file together to any folder outside of the local host altogether, having implemented the above changes, it still works! I thought AJAX was only supposed to work out of a server environment?

Can anyone enlighten me as to what may be going on? Has anyone been able to make this work in a localhost setup?

<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200 ) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "javascript: getData('data.txt',
'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>

1. XMLHttpRequestObject.status returns HTTP status codes; if it returns a 200, which you check for here, that means that everything is OK.
See http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html for more info. I suggest you read this too: http://www.modelworks.com/ajax.html

2. Have you changed any settings related to redirecting or port usage? I have changed my access port to a number higher than 10000 for ISP reasons, therefore when I try to access localhost it doesn't work I have to access it by:
localhost:[port number] (as in: localhost:54321 for example)
There is nothing wrong with leaving out the directories and just typing the filename, better yet, this makes sure if you change the directory of the file, you do not have to scan each php file in which you use that data.txt and change it to newmap/data.txt

3. Are you still running from your htdocs, then that should work, also, how are you accessing this file then if it is not placed in your localhost as you say. Either way, because the directory of the data.txt is not specified it is exactly normal that everything still works.

Hope this helps,
if you have any questions, please post them.

Hi Brechtjah - thanks for the reply, but it hasn't really helped so far.

The function in the line XMLHttpRequestObject.onreadystatechange = function() is being called even though the XMLHttpRequestObject.status hasn't changed (it was 0 before and it is 0 after - I checked by putting in an Alert() to trap the value.) The value 0 seems to be the default, though this it isn't explicitly stated in the w3.protocol list you gave. This makes me think the XMLHttpRequestObject isn't really doing anything - except that the XMLHttpRequestObject.readyState definitely ==4 and the XMLHttpRequestObject.responseText has definitely returned the right text.

Re point 2: Interesting possibility though I haven't deliberately changed any settings (how would I find out what the port number used by localhost is?) I checked by trying 'http://localhost:80/data.txt' but that made no difference. I agree that leaving out the full address would usually be easier to maintain, except that the example in the book implied that using localhost in the reference as stated ought to work.

Re point 3: How am I accessing the file outside of localhost? I just drag the html file and drop it onto a Firefox window. The url field automatically resolves to the file address (file:///C:/Users/Me/desktop/index.html) of what I've dropped in there and I run it - ie outside of htdocs - and it clicking the Display Message button works (albeit having to test for XMLHttpRequestObject.status==0 as before). In this scenario I have data.txt on the desktop also.

Any ideas?

1. onreadystatechange Event
Fires when the readyState method changes.

2. In your httpd.conf file in xammp/apache/conf
#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses (0.0.0.0)
#
#Listen 12.34.56.78:80
Listen >PORT_NUMBER<

3. The data you are retrieving, is it located in a database or not? If not then it's normal that it works since Apache does not need to be run.

Hope this helps you further, don't hesitate to ask questions : - )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.