JavaScript:使用JSONP时加载/包含另一个JS文件

时间:2015-11-11 18:32:33

标签: javascript json ajax cross-domain jsonp

让我先说一下我已经阅读How do I include a JavaScript file in another JavaScript file?以了解如何在另一个JS文件中加载一个JS文件。我的用例与原始问题略有不同。

我有两台服务器,A和B.服务器A托管我们的内容管理系统。服务器B托管我们的可下载文件。在服务器B上,我们有一些自动生成的元数据文件,这些文件本质上是包含有关可下载软件包的元数据的JSON文件。

我已经成功创建了一个测试环境,其中服务器A上的内容管理系统能够使用JSONP从服务器B拉入并显示元数据。但是,在此测试中,我必须编辑元数据文件以添加函数和eval语句,如下所示:

/**
 * 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) + ');' ); 

理想情况下,元数据文件仅包含元数据,例如:

{
  "product": "hello world",
  "version": "1.2.3",
  "date": "October 22, 2015",
  "release_notes": "<p>Lorem ipsum dolor sit amet.</p>"
}

我会有第二个文件来加载函数和元数据。我已尝试在“loader”文件中执行以下操作,但在AJAX调用中,状态代码为0而不是200,因为浏览器栏中的地址是服务器A以及我正在尝试获取元数据文件的地址来自服务器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 + ');' );

有没有办法让我将JSON文件动态加载到JS文件中,并通过JSONP从另一个域调用JS文件?

0 个答案:

没有答案