I'm trying to get an AJAX example working but i'm unable to get it working. Are you able to run it on XAMPP fine?
I've three files, message.txt, index.html, ajaxtest.js. When you click on the hyperlink it should bring up a pop up with the contents of message.txt. (all files are in the same directory)
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Using XMLHttpRequest</title>
<script type="text/javascript" src="ajaxtest.js"></script>
</head>
<body>
<p>
<a href="message.txt" onclick="grabFile(this.href); return false;">
Click here
</a>
</p>
</body>
</html>
ajaxtest.js
function getHTTPObject() {
var xhr = false;
if (window.XMLHttpRequest) { //see if a XMLHttpRequest exists
xhr = new XMLHttpRequest(); //if it exists change "xhr" to a new instance of the object
}
else if (window.ActiveXObject) { //see if ActiveX exists (for IE)
try { //Allows newer versions of IE to use the newer ActiveX object
xhr = new ActiveXObject("Msxml2.AMLHTTP"); //if it exists change "xhr" to a new instance of the object
}
catch(e) { //catches an error and resets "xhr" to false
try { //Allows older versions of IE to fall back onto the older version using "try...catch"
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //if it exists change "xhr" to a new instance of the object
}
catch(e) {
xhr = false;
}
}
}
return xhr;
}
function grabFile(file) {
var request = getHTTPObject();
if (request) {
request.onreadystatechange = function() {
displayResponse(request);
};
request.open("GET", file, true);
request.send(null);
}
}
function displayResponse(request) {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
alert(request.responseText);
}
}
}
For security reasons JavaScript's access to the file system on the client is restricted! you can read more here
If you are using google chrome you have to startup the executable with -allow-file-access-from-files command:
chrome.exe -allow-file-access-from-files
There might be a similar configuration for FireFox
Update: reviewing your code, i figures you are comparing request.status against OK(200), and Not Modified (304) headers! These are HTTP response headers returned from a web server, so when you run the code on a web server you must check response headers, otherwise, when running locally using file:/// protocol you always get 0 as for the response header
Here's a workaround, you can check the domain, if you are running locally then no need to check for response status:
function displayResponse(request) {
if (request.readyState == 4) {
if (!document.domain || request.status == 200 || request.status == 304) {
alert(request.responseText);
}
}
}
As I have tried with your example , your request object is not hitting state 4 and using again . check request.status before the below code, its getting 0 value always . And that's why you script is not alerting response .
if (request.status == 200 || request.status == 304) {
alert(request.responseText);
}
Check this for your solutions : http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/
Hope that help .