用于获取外部 JSON/XML 的 Javascript 小部件……如何？答案

【问题标题】：Javascript Widgets to grab external JSON/XML ... How?用于获取外部 JSON/XML 的 Javascript 小部件……如何？
【发布时间】：2012-04-01 22:51:49
【问题描述】：

我想为网页构建一个可嵌入的小部件，该小部件将访问提供 XML 或 JSON 的 API（我可以在这两种格式之间进行选择）。我想做的是让用户选择一段代码并将其粘贴到网站中，就像Twitter Widgets

由于跨域安全问题，我不能只执行 ajax 调用来加载这些外部数据集，所以我只能使用 iFrame 吗？我更喜欢输出更灵活的东西，以便用户可以通过 CSS 更改它。

除了在主机站点上开启跨域权限还有什么可以做的吗？

【问题讨论】：

标签： javascript ajax cross-domain widget

【解决方案1】：

了解 jsonp。

一般来说，一个过于简单的实现，只是为了解释它是如何工作的：

在客户端：

  var s = document.createElement("script");
  s.src = "http://yoursever.com/path/to/server/page?r=mySpecialCallback"
  document.body.appendChild(s);

  function mySpecialCallback(data){
      //do stuff with data that server returned 

  }

在服务器上，例如在 aspx 中

  <%=Request["r"]%>({name: "Don-Joy", age: 34 } );

或在 PHP 中

  <?php $_GET['r']?>({name: "Don-Joy", age: 34 } );

限制：

1 - 没有帖子。只获取。发送到服务器的数据仅限于适合 URL 的内容

2 - 服务器的响应不是纯 JSON - 它必须被包装在一个回调函数中，客户端给服务器它的名字 - 在这个例子中 - 使用 r 查询 -字符串参数。

玩得开心

【讨论】：

3 - （我的意思是 - 另一个限制） - 所有服务器响应 - 包括错误 - 必须是合法的 JavaScript，因为它们包含在

【解决方案2】：

JSONP 是你的朋友。只需在动态添加的链接脚本中发回数据即可。

首先，客户端通过以下方式将数据请求发送到您的服务器：

var script = document.body.appendChild(document.createElement("script"));
script.type = "text/javascript";
script.src = "http://yourserver/yourhandler?parameters=values";

然后，在您的机器上请求数据服务器端。以 JavaScript 形式返回响应。比如：

DataResponse({ /* data here */ });

该脚本被加载到之前创建的脚本元素中。在请求客户端上调用DataResponse()。

【讨论】：