Ajax not working when i read a local file

Question

Okay i cannot solve this problem for 2 days straight.. This examlpe here: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_xml2 works just fine on the w3schools site. But when i copy and paste the code in notepad++. It doesn't work. I have the XML file downloaded. Than i was reading that AJAX doesn't support work with local files. I don't get this?? I have an assingment for school to work with a local XML file. How can i work with local XML file and AJAX when AJAX doesn't support working with local files. And the only response that i get from the teaching assistant is that i should use firefox... But No.. it doesn't work on : Chrome, Internet Explorer, Mozila, Opera.. basicaly nothing...

I know that something similar has been asked here but i just can't make it work. If anyone got any idea how can i modify this given code to work localy, i would be thankful.. THANKS in advance..

<!DOCTYPE html>
<html>
    <head>
        <script>
            function loadXMLDoc(url) {
                var xmlhttp;
                var txt, x, xx, i;
                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 && xmlhttp.status == 200) {
                        txt = "<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
                        x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
                        for (i = 0; i < x.length; i++) {
                            txt = txt + "<tr>";
                            xx = x[i].getElementsByTagName("TITLE"); {
                                try {
                                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                                } catch (er) {
                                    txt = txt + "<td> </td>";
                                }
                            }
                            xx = x[i].getElementsByTagName("ARTIST"); {
                                try {
                                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                                } catch (er) {
                                    txt = txt + "<td> </td>";
                                }
                            }
                            txt = txt + "</tr>";
                        }
                        txt = txt + "</table>";
                        document.getElementById('txtCDInfo').innerHTML = txt;
                    }
                }
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }
        </script>
    </head>

    <body>
        <div id="txtCDInfo">
            <button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
        </div>
    </body>
</html>

Assuming you are running this request on your local file system, it will be blocked for security reasons. You need to run this code on a web server. The first lesson to learn here is don't use W3Schools. — Rory McCrossan, Dec 22 '14 at 15:37

score 4 · Answer 1 · answered Dec 22 '14 at 15:37

4

You can't work with local files. The local file system is sandboxed so that, for example, you can't double click an HTML document in an email attachment, open it in your browser and have it upload your private files to the sender's server.

If you want to test Ajax locally, then install a local webserver and test through it.

answered Dec 22 '14 at 15:37

Quentin

800,325
104
1,079
1,205

I never worked with a local webserver, but i will try – mouseepaad Dec 22 '14 at 15:38
Okay i will download XAMPP, and if i have trouble running this on it, i will ask here in comment section – mouseepaad Dec 22 '14 at 15:40

score 2 · Answer 2 · edited Apr 16 '18 at 06:14

The file can be coincidentally located on the same machine, but can't be accessed by the file system. It has to be accessed by a web server running on that machine.

So, for example, if you have a web server which serves files from:

c:\server\web\

Then your AJAX requests for the file wouldn't be to this:

c:\server\web\somefile.xml

It would be this:

http://localhost/somefile.xml

The file is "local" in the sense that it's on the same computer. But it's not "local" in the sense that it's coming from a URL and not from a file system path. For fairly obvious security reasons, browsers don't allow JavaScript code to access the file system. (Imagine a world where any website could read any file on your computer without asking.)

Both the HTML page which contains the JavaScript code as well as the file being read by the JavaScript code should be served from the web server, not opened from the file system.

Ajax not working when i read a local file

2 Answers2

Linked

Related