AJAX moving in text from local textfile

Question

I cant seem to get a very simple ajax script to work. All I want to do is change the value of text with text contained in a local text file. This is what I have:

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc()
         {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
               xmlhttp = new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function()
            {
               if (xmlhttp.readyState == 4)
               {
                  document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
               }
            }

            xmlhttp.open("GET", "coordinates.txt", true);
            xmlhttp.send();

         }
      </script>
   </head>
   <body>

      <div id="myDiv"><h2>Let AJAX change this text</h2></div>
      <button type="button" onclick="loadXMLDoc()">Change Content</button>

   </body>
</html>

In the coordinates.txt file I have this:

<p>Test Coords</p>

When the button is clicked the text on the page should change to Test Coords, but for some reason it just clears the old text but doesn't insert the new text. Can anyone tell me what I'm doing wrong? This seems pretty simple and straight forward but for some reason will not work.

I don't think you can pull a file from the local file system. Especially with cross-domain policy. http://en.wikipedia.org/wiki/Same-origin_policy Put an `else{console.log("didn't work");}` after you check `readyState` — zero298, Jan 07 '14 at 22:05
You shoud look at http://stackoverflow.com/questions/14446447/javascript-read-local-text-file for some help. Also, use jQuery or some other cross browser library to do the Ajax work for you, rather than directly manipulating the XMLHttpRequest object yourself — Jason, Jan 07 '14 at 22:07
Is jQuery usable? I know people tend not to like recommending jQuery for a question that doesn't include it, but jQuery makes AJAX calls simpler to the point that IMO it's easier to learn jQuery than to learn to make robust AJAX calls without it. — JSP64, Jan 07 '14 at 22:12

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

There is nothing wrong with the code. I had the html file and the coordinates.txt in the same directory.

You have to enable Cross Origin Requests on the Chrome browser.

https://stackoverflow.com/a/3177718/1216965

edited May 23 '17 at 10:24

Community

1
1

answered Jan 07 '14 at 22:11

neowulf33

595
1
6
19

score 0 · Answer 2 · answered Jan 07 '14 at 22:12

If the text is clearing, there is good reason to believe that ajax is running correctly, that is readyState === 4.

Use console.log(xmlhttp.responseText) to see what you are actually getting back from your ajax request and post it.

Also, xhr is typically used for xmlhttp, if you want to follow a common naming practice for your variables.

AJAX moving in text from local textfile

2 Answers2