Loading .js file cross domain using ajax

Question

I'm trying to access a cross domain .js file using ajax:

$.ajax({
    type:'get',
    crossDomain:true,
    url: "http://localhost/62588/scripts/bootStrapper.js",
    contentType: "application/json",
    dataType: 'jsonp'    
}).done(callback);

I have a callback at the moment:

getBootStrapperScript(function (callback) {         
       //do somethibg
})

I get the following error:

XMLHttpRequest cannot load http://localhost/62588/scripts/bootStrapper.js. Origin http://localhost:62607 is not allowed by Access-Control-Allow-Origin.

I have been reading about JSONP but I'm not sure how to use it to load a .js file from anoather domain.

If I change the above code to use 'jsonp' for the datatype but I then get this errer:

GET http://localhost/62588/scripts/bootStrapper.js?callback=jQuery18206067646441515535_1354459693160&_=1354459696966 404 (Not Found)

How can I load cross domain js files?

This may help you, http://stackoverflow.com/questions/6114436/access-control-allow-origin-error-sending-a-jquery-post-to-google-apis — Adil, Dec 02 '12 at 14:58
There's a special function that does this for you, it's called [**$.getScript()**](http://api.jquery.com/jQuery.getScript/), and it get's the external javascript file and inserts it. An other way would be to look at how Google does it with stuff like the analytics file, inserting a script tag into the head, and do something like that. Using an Ajax call with jsonp is **NOT** the way to do it. — adeneo, Dec 02 '12 at 15:00
Why the down vote? Genuinely interested so I can provide better questions in future :) — davy, Dec 02 '12 at 16:02

Darin Dimitrov · Accepted Answer · 2012-12-02T15:27:33.440

6

Don't use any AJAX, simply use the $.getScript function:

$.getScript('http://localhost/62588/scripts/bootStrapper.js').done(callback);

As you know, you could be pointing the <script> tag to any domain you wish without violating the same origin policy. That's the basis of JSONP. But you don't need any JSONP, because all you need is to reference a script form a remote domain, which is as simple as pointing the <script> tag to this script or if you want to do it dynamically use the $.getScript function that jQuery has to offer you.

UPDATE:

The $.getScript function will append a random cache busting parameter to the url. If you want to get a cached version of your script you could define a custom cachedScript function as shown in the documentation:

jQuery.cachedScript = function(url, options) {
    options = $.extend(options || {}, {
        dataType: 'script',
        cache: true,
        url: url
    });
    return jQuery.ajax(options);
};

and then:

$.cachedScript('http://localhost/62588/scripts/bootStrapper.js').done(callback);

edited Dec 02 '12 at 15:27

answered Dec 02 '12 at 15:01

Darin Dimitrov

1,023,142
271
3,287
2,928

thanks, I still get the error: GET http://localhost/62588/scripts/bootStrapper.js?_=1354460928278 404 (Not Found). :( – davy Dec 02 '12 at 15:09
What happens when you type `http://localhost/62588/scripts/bootStrapper.js?_=1354460928278` in your browser address bar? Is the script served? Or do you get 404? If the script is served without an error I would be greatly surprised. If you get 404, well, then, make sure you have provided a correct url to your script in the $.getScript function - one that actually exists on your server at the specified address :-) – Darin Dimitrov Dec 02 '12 at 15:11
yeah, 404 but with only http://localhost:62588/Scripts/bootStrapper.js - the script is served. – davy Dec 02 '12 at 15:22
Weird, your web server doesn't serve the script if there are query string parameters? The `_=1354460928278` bit is to ensure that you get a fresh version of the script from the server. If you don't want this random query string parameter to be appended to the url you could set the `cache: false` parameter. Read the documentation of the `$.getScript` function I've linked to in my answer. There's a section called `Caching Responses` at the end. Look at the example provided there. They define a custom `jQuery.cachedScript` function. I have updated my answer to provide an example. – Darin Dimitrov Dec 02 '12 at 15:23
Actually - I'm an idiot: Real reason - look at the url: $.getScript('http://localhost/62588/ the '/' after localhost should actually be a ':' - thanks Darin. – davy Dec 02 '12 at 16:34

Loading .js file cross domain using ajax

1 Answers1

Linked