File request . txt via AJAX

Question

I’m starting in my studies with Javascript with server interactions, and right away I can’t recover a text file to be shown via a Javascript Alert. From what I’ve studied, the file needs to be on a server. In other words, to make a request you need to do it through an "http://". At first, I’m doing it locally with Apache. And yet, it’s not working.

Follows 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:

The error that appears on the console:

Please... wait for us! Thank you!

Answer 1

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

Answer 2

Policy of the same origin

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

Because this policy is important?

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

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

Solutions

Your problem matches this constraint: your text file is available in the domain localhost, while the page trying to access it is being recovered via 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 make the browser 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 that pages access resources in different domains one can configure the server to allow such access through HTTP headers CORS (cross-origin Resource sharing). On your server you can set arbitrary rules for which domains to allow or deny access to certain domains, including being able to do so dynamically.