CODEWITHSUNDEEP
javascriptjqueryajax
saad
saad

Reputation: 211

JQuery AJAX cannot find a text file in the same directory

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

Upvotes: 0

Views: 3916

Answers (2)

entio
entio

Reputation: 4263

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://.

Upvotes: 4

Ben
Ben

Reputation: 7597

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).

Upvotes: 3

Related Questions