How to conditionally load an external json file from a cdn into my javascript?

Question

I have a json file hosted on a cdn. I have a mobile app which needs to have a minimal memory footprint and a minimal loadtime. Right now, I have the json file served from the server through a RESTful GET API. This json file needs to be loaded conditionally based on user input. However, this json file is heavy(37k) and is impacting the page load time(1.3secs). To handle this, I am trying to host these json files on a cdn and access them from my javascript based on user input.

I have tried the jQuery $.getJSON(given up because of cross domain requests). Is there any good and reliable and non-ugly way to access this json in my javascript?

I am looking for something like this:

url="http://cdn1.xxxx.xxx/?city="+$('#city').val()+".json";
$.getJSON( url, request, function( data, status, xhr )){}); 

The point is to use this json as a source for jQuery autocomplete text box. Any alternate solutions to optimize load times are also welcome!

Answer 1

you can still keep the CDN hosting and use this library for crossdomain requests. Just include the library and it should work with $.getJson, $.ajax etc

GIT: https://github.com/padolsey/jQuery-Plugins

JS File https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

INFO http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/