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"
".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);
}
}
}
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/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);
}
}
}
- At the moment when you click on the link it is acting exactly like that and taking me to a new page with the contents of the message.txt file – Colin747 Commented May 17, 2012 at 10:45
- What is the error you get in the console? – Koen Peters Commented May 17, 2012 at 10:45
- Your question is unclear. Do you get an error message? What's the intended behavior/gotten behavior? – Florian Margaine Commented May 17, 2012 at 10:46
- Sorry I don't know what you mean by the console? As I stated in my question it should bring up a pop up with the contents of the text file and I stated in a previous ment at the moment it is taking me to a new page with the contents of the text file. No error message appears – Colin747 Commented May 17, 2012 at 10:46
- I just copied the code and ran it. Aside from getting a 404 error on message.txt, it worked as expected. The link was not followed. – Quentin Commented May 17, 2012 at 10:51
2 Answers
Reset to default 4For 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 mand:
chrome.exe -allow-file-access-from-files
There might be a similar configuration for FireFox
Update:
reviewing your code, i figures you are paring 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./developerworks/web/library/wa-ajaxintro3/
Hope that help .