83383

AJAX not working on localhost

Question:

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>

<a href="message.txt" onclick="grabFile(this.href); return false;"> Click here </a>

</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); } } }

Answer1:

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 : <a href="http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/" rel="nofollow">http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/</a>

Hope that help .

Answer2:

For security reasons JavaScript's access to the file system on the client is restricted! you can <a href="http://en.wikipedia.org/wiki/JavaScript#Security" rel="nofollow">read more here</a>

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 <strong>must</strong> 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); } } }

Recommend

  • Is it mandatory to have a doGet or doPost method?
  • jinja2 template not found and internal server error
  • Javascript (MVC) load image (byte array) from database
  • How to add regEx in angular filter
  • JQuery form validation and submit scripts conflict
  • Find longest path less than or equal to given value of an acyclic, directed graph in Python
  • Send data from edittext to listview
  • Want to understand iframe breakout code
  • Why does the font in these TD elements render at different sizes?
  • Flask not finding files in my package's 'static' directory
  • google maps autocomplete bounces back already cleared text …odd…odd…odd
  • Jquery Mobile pageLoading() Method how does it work?
  • Why isn't obj.style.left = “200px”; working in this code?
  • Tell Git to stop prompting me for conflicts when none really exist?
  • Simulate click Geckofx vb,net
  • How to view images from protected folder with php?
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Display images in Django
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Play WS (2.2.1): post/put large request
  • Jquery UI tool tip close icon
  • Display issues when we change from one jquery mobile page to another in firefox
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • HTML download movie download link
  • Resize panoramic image to fixed size
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Data Validation Drop Down Box Arrow Disappearing
  • How to set the response of a form post action to a iframe source?
  • How do you join a server to an Active Directory (domain)?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • failed to connect to specific WiFi in android programmatically
  • How to push additional view controllers onto NavigationController but keep the TabBar?