Requesting a .txt file via AJAX

Question

Requesting a .txt file via AJAX

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

I'm starting in my Javascript studies with interactions with the server, and right away I can not retrieve a text file to be shown via a Javascript alert. From what I've studied, the file must be on a server. In other words, to make a request one must be through an "http: //". At first, I'm doing this locally with Apache. And yet, it's not working.

Follow the code:

window.onload = function(){
    document.getElementById("button").onclick = function(){
        //alert("Ok");
        var ajax = new XMLHttpRequest(); 
        ajax.onreadystatechange = function(){ 
            if( ajax.readyState == 4) { 
                alert(ajax.responseText);
            }                                 
        }
        ajax.open("POST", "http://localhost/ajax/texto.txt");
        ajax.send(null); //Inicia a requisição para o servidor.
        return false;
    }
}

 <h1 id="button">Teste</h1>

The result that appears to me:

Theerrorthatappearsintheconsole:

Please ... I look forward! Thanks!

javascript html ajax

asked by anonymous 22.04.2015 / 23:37

2 answers

3

You need to use the webserver on both ends. The code is OK, but the screenshot shows that ajax.html is being accessed in the browser with file:/// . You need to access it with HTTP as well.

22.04.2015 / 23:45

http_build_query function Good graphic library for beginners? [closed]

score 2 · Accepted Answer

Policy of same origin

There is a security feature in browsers called Same-origin policy source) that is responsible for restricting access to available resources on servers other than the server from which the current page came from. This policy is important because it prevents a site from accessing your personal data from another site.

Why is this policy important?

Imagine that you access a page on a malicious website. This page, without your noticing, could execute an AJAX request for another site (a social network, internet banking). If you are logged in to this other site, the site will have full access to all the information visible on it. This would be a giant security breach.

So browsers by default restrict access to any resource that does not come from the same source as the page trying to access it.

Solutions

Your problem hits this restriction: your text file is available in the localhost domain, while the page attempting to access it is being retrieved via the local file system (note the URL: file:///C:/Users/... ). Soon the browser blocks access.

The best solution to your problem is to make your HTML page available on the same server as your text file (your Apache instance) and access the page there (something like http://localhost/ajax.html ). This will cause the browser to identify that the resource is in the same domain as the page and allow access.

In other more complex cases, where it is really necessary for pages to access resources in different domains, you can configure the server to allow such access through HTTP headers CORS (cross-origin resource sharing) . On your server you can define arbitrary rules for which domains allow or deny access to certain domains, including by dynamically doing so.