How come jQuery.load() can work Cross-Domain if the URL has "just one HTML line"?

Question

On my website, I'm attempting to code a JavaScript script that, upon a button being clicked, scrapes data from the HTML source of some websites and displays the parsed/cleaned data on my site.

Upon reading TutorialsPoint's JQuery - Ajax page, which showcases the jQuery.load() method,

<script type = "text/javascript" language = "javascript">
     $(document).ready(function() {
        $("#driver").click(function(event){
           $('#stage').load('/jquery/result.html');
        });
     });
</script>

I decided to try it on my site. I changed the URL from the relative one to the absolute one -- "http://www.tutorialspoint.com/jquery/result.html" -- and to my surprise, it is actually functioning (click EXTRACT DATA). This contradicts my understanding, upon reading dozens of SO threads, as well as the jQuery.load() API, that the HTTP request would be subject to the Same-Origin-Policy.

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol. ~API

When I change the URL to things like http://google.com/ or http://www.example.com/ the script doesn't function.

A line on the aforereferenced tutorial page caught my eye:

Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside tagged with ID stage. Assuming, our /jquery/result.html file has just one HTML line

How come load() works, across domains, if the HTML file at the specified URL has solely one line?

Answer 1

It's not about the files or structure. It's about enabling Cross Origin Request Sharing. If the concerned server, or the request has the following header:

Access-Control-Allow-Origin: *

This will enable the AJAX to fetch files from cross-domain as well.

Indeed, sending an HTTP GET request via Hurl.it, for example, confirms that the header is present.

Answer 2

Internally load() is just a shortcut for $.ajax, the code for load() is

function load(url, params, callback) {
    // ... some checks and stuff
        jQuery.ajax({
            // settings
        }).done(function (responseText) {
            self.html(selector ?
            jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) : responseText);
        }).complete(callback && function (jqXHR, status) {
            self.each(callback, response || [jqXHR.responseText, status, jqXHR]);
        });
    }
    return this;
}

In this case the server is returning the correct headers for a CORS requests, if you look at the request, the response headers include

Access-Control-Allow-Headers:X-Requested-With
Access-Control-Allow-Origin:*

meaning it allows requests from different origins, so it has nothing to do with load() at all, any ajax request would work fine to that URL, as it's not subject to the same-origin policy

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser.