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 -- ".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 / or / 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 e load() works, across domains, if the HTML file at the specified URL has solely one line?

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./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./ or http://www.example./ 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 e load() works, across domains, if the HTML file at the specified URL has solely one line?

• javascript
• jquery
• html
• ajax

• 1 It depends on the server. If the server allows: Access-Control-Allow-Origin: * then it works. – Praveen Kumar Purushothaman Commented Jul 22, 2017 at 21:33
• 1 Downvoters explain, please. I don't see anything innately wrong with my question. – Kartik Chugh Commented Jul 22, 2017 at 21:47
• Hey, it could be because their vote is locked. I edited the question and added a vote as well. Soon it will go off. It's 0 now. – Praveen Kumar Purushothaman Commented Jul 23, 2017 at 8:09

3 Answers 3

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.

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);
        }).plete(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.

I realized there was no way the function could be violating the Same-Origin Policy.

Sending a GET request to the HTML page via Hurl.It yielded the reason:

GET http://www.tutorialspoint./jquery/result.html

HEADERS

...

*Access-Control-Allow-Origin: *

...