JQuery AJAX cannot find a text file in the same directory

Question

I am trying to use jQuery AJAX to pull text from a text file called "randomtext.txt"in the same directory as the html file and place it inside a div with an id of ajax_div, upon the click of a button. However, this does not work.The browser cannot find the text file. I checked the browser log on chrome and I get this error:

XMLHttpRequest cannot load file:///C:/xampp/htdocs/randomtext.txt. Received an invalid response. Origin 'null' is therefore not allowed access.

Firefox logs this error:

[20:07:55.847] syntax error @ file:///C:/xampp/htdocs/randomtext.txt:1 [20:07:55.849] syntax error @ file:///C:/xampp/htdocs/jquery_ajax.html:1

The following is my code:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src ="jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button#ajax_click").click(function() {
                jQuery.ajax({url: "randomtext.txt",success: function(result) {$("div#ajax_div").html(result);}});
            });
        });
    </script>
</head>
<body>
    <div id = "ajax_div"></div>
    <button id="ajax_click">Click me!</button>
</body>
</html>

I've gone through other solutions such as putting in the entire file directory in place of the url, but to no avail.

Thank You

I see that you are using xampp, but you are working localy. xampp provides you an apache server, service that should be started in your machine. Just type `http://localhost/` at browser and look if you see the index file stored in xampp htdocs folder — kosmos, Jun 02 '14 at 14:46

score 4 · Answer 1 · edited May 23 '17 at 11:49

4

You cannot use ajax to load local files due to security access restrictions.

This may help; How to launch html using Chrome at "--allow-file-access-from-files" mode?

Another solution could be to use XAMPP, WAMP or just to develop on server.

edit: Oh, didnt notice You are Using xampp; just run Your file through http://localhost/ instead of file://.

edited May 23 '17 at 11:49

Community

1
1

answered Jun 02 '14 at 14:32

entio

2,520
1
16
29

Okay I did as you said and chrome's command line reads Command Line chrome --allow-file-access-from-files --flag-switches-begin --flag-switches-end But I get a new error now: XMLHttpRequest cannot load http://localhost/randomtext.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file://' is therefore not allowed access. – saad Jun 02 '14 at 15:09
Interestingly enough, when I save it as a .php file, the ajax works. – saad Jun 02 '14 at 15:17
1

the best way is always to deploy scripts to remote server. There are many issues and struggles with local development, and i really dont know what is causing this issue, however, there are some topics on stackoverflow confirming Your words. Sorry :/ – entio Jun 02 '14 at 15:27
@saad see my answer: CORs will usually fail when you're mixing localhost and `file` URLs despite referring to the same box. – Ben Jun 02 '14 at 15:34

score 3 · Answer 2 · answered Jun 02 '14 at 14:31

The error you're getting indicates that you're using file:// URLs. You will probably find that running this code on a local http server instance will alleviate the issue (i.e. loading up proper http resources via ajax).

As an aside, mixing file:///c:/ and http://localhost requests -- even if your browser allows the former -- still may fail for ajax calls as the browser will not detect that these URLs are coming from the same same host (even though they are on the same machine).

Thank you. I get an error even after using http://localhost. The problem is solved, however when you use http://localhost AND change the file type to PHP. — saad, Jun 02 '14 at 15:43

JQuery AJAX cannot find a text file in the same directory

2 Answers2