Let me preface this by saying I have read How do I include a JavaScript file in another JavaScript file? to understand how to load one JS file in another JS file. My use case is a little different than the original question.
I have two servers, A and B. Server A hosts our content management system. Server B hosts our downloadable files. On server B, we have some auto-generated metadata files that are essentially JSON files that contain metadata about our downloadable packages.
I have successfully created a test situation where the content management system on server A is able to pull in and display the metadata from server B using JSONP. However, in this test, I had to edit the metadata file to add a function and an eval statement, like this:
/**
* Get the value of a querystring
* @param {String} field The field to get the value of
* @param {String} url The URL to get the value from (optional)
* @return {String} The field value
* http://gomakethings.com/how-to-get-the-value-of-a-querystring-with-native-javascript/
*/
var getQueryString = function( field, url ) {
var href = url ? url : location.href;
var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
var string = reg.exec(href);
return string ? string[1] : null;
};
var json = {
"product": "hello world",
"version": "1.2.3",
"date": "October 22, 2015",
"release_notes": "<p>Lorem ipsum dolor sit amet.</p>" };
eval( getQueryString("callback") + '(' + JSON.stringify(json) + ');' );
Ideally, the metadata file would contain only the metadata, such as this:
{
"product": "hello world",
"version": "1.2.3",
"date": "October 22, 2015",
"release_notes": "<p>Lorem ipsum dolor sit amet.</p>"
}
And I would have a second file to load the function and the metadata. I have tried doing the following in the "loader" file, but in the AJAX call, the status code is 0 instead of 200 because the address in the browser bar is server A and the address where I'm trying to get the metadata file from is server B.
/**
* Get the value of a querystring
* @param {String} field The field to get the value of
* @param {String} url The URL to get the value from (optional)
* @return {String} The field value
* http://gomakethings.com/how-to-get-the-value-of-a-querystring-with-native-javascript/
*/
var getQueryString = function( field, url ) {
var href = url ? url : location.href;
var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
var string = reg.exec(href);
return string ? string[1] : null;
};
var json = "";
var xhr = new XMLHttpRequest();
var filename = "http://server-B.com/" + getQueryString("file") + ".json";
alert(filename);
xhr.onreadystatechange = function() {
if (xhr.readyState === 1) { alert("server connection established"); }
if (xhr.readyState === 2) { alert("request received"); }
if (xhr.readyState === 3) { alert("processing request"); }
if (xhr.readyState === 4) { alert("request finished status=" + xhr.status); }
if (xhr.readyState === 4 && xhr.status === 200) {
json = xhr.responseText;
alert(json);
}
};
xhr.open("GET", filename, true);
xhr.send();
eval( getQueryString("callback") + '(' + json + ');' );
Is there some way for me to dynamically load a JSON file into a JS file, and call the JS file via JSONP from another domain?
