如何将本地javascript变量设置为远程网站上的json数据

我的网站上有一个javascript代码，有一个变量：

var remoteJsonVar;

另一方面，远程网站上有一个json文件

我需要将变量remoteJsonVar设置为此远程数据

我确信这很简单，但我找不到解决办法

---

一个小的工作示例会很好。

因为您试图从不同的来源获取数据，如果您想完全在客户端完成这项工作，您应该使用JSON，而不仅仅是JSON，因为这是一个简单的示例。如果您只需在查询字符串中添加一个

回调

参数，则Facebook支持此功能，例如：

https://graph.facebook.com/?ids=http://www.stackoverflow.com?callback=foo

然后在脚本中定义一个函数（在全局范围内），该函数的名称在

回调

参数中给出，如下所示：

function foo(data) {
    remoteJsonVar = data;
}

您可以通过创建

script

元素并将

src

设置为所需的URL来触发它，例如：

var script = document.createElement('script');
script.src = "https://graph.facebook.com/?ids=http://www.stackoverflow.com?callback=foo";
document.documentElement.appendChild(script);

请注意，对函数的调用将是异步的

现在，由于您可能希望有多个未完成的请求，并且您可能不希望在完成后将该回调留在周围，因此您可能希望更复杂一些，并创建一个随机回调名称，等等。下面是一个完整的示例：

|

请注意，当您使用JSONP时，您对另一端的站点非常信任。从技术上讲，JSONP根本不是JSON，它让远程站点有机会在您的页面上运行代码。如果你相信另一端，那很好，但要记住可能会被滥用

您没有提到使用任何库，因此我没有使用任何上述库，但我建议您查看一个好的JavaScript库，如、、或。上面的许多代码已经用一个好的库为您编写了。例如，下面是使用jQuery的上述内容：

|

---

什么是“JSON脚本”？或者直接下载并解析。@LightnessRacesinOrbit:客户端，如果它位于不同的源上，则不能。但如果你的意思是使用服务器而不是客户端，是的，绝对是这样。哦，很好。当然同时，我也从未真正理解为什么JSON-P可以绕过SOP。@LightnessRacesinOrbit:SOP从未应用于

script

元素，而在供应商可能考虑这样做的时候，我认为很多人都在使用CDN或其他不同来源的静态资源（这是假设）这将是不受欢迎的。当然，同样需要大量的信任，因为你基本上是让其他网站完全访问你的页面，他们想做什么就做什么~发抖~：-）真的。我个人通过Web服务器代理所有“动态”外部请求。这很少是一个愚蠢的通行证，但我仍然不确定这真的让我更安全。但是嘿。

(function() {

  // Your variable; if you prefer, it could be a global,
  // but I try to avoid globals where I can
  var responseJsonVar;

  // Hook up the button
  hookEvent(document.getElementById("theButton"),
            "click",
            function() {
      var callbackName, script;

      // Get a random name for our callback
      callbackName = "foo" + new Date().getTime() + Math.floor(Math.random() * 10000);

      // Create it
      window[callbackName] = function(data) {
          responseJsonVar = data;
          display("Got the data, <code>shares = " +
            data["http://www.stackoverflow.com"].shares +
            "</code>");

          // Remove our callback (`delete` with `window` properties
          // fails on some versions of IE, so we fall back to setting
          // the property to `undefined` if that happens)
          try {
              delete window[callbackName];
          }
          catch (e) {
              window[callbackName] = undefined;
          }
      }

      // Do the JSONP request
      script = document.createElement('script');
      script.src = "https://graph.facebook.com/?ids=http://www.stackoverflow.com&callback=" + callbackName;
      document.documentElement.appendChild(script);
      display("Request started");
  });

  // === Basic utility functions

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }

  function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
      element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
      element.attachEvent("on" + eventName, function(event) {
        return handler(event || window.event);
      });
    }
    else {
      throw "Browser not supported.";
    }
  }
})();

jQuery(function($) {

  // Your variable
  var responseJsonVar;

  $("#theButton").click(function() {
    display("Sending request");
    $.get("https://graph.facebook.com/?ids=http://www.stackoverflow.com&callback=?",
          function(data) {
            responseJsonVar = data;
            display("Got the data, <code>shares = " +
              data["http://www.stackoverflow.com"].shares +
              "</code>");
          },
          "jsonp");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});