当前位置：文江博客话题详情

Javascript Widgets 获取外部 JSON/XML ...如何？

发布于 2024-10-21 10:31:19 字数 331 浏览 6 评论 0原文

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

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

除了在宿主站点上开放跨域权限之外，还有什么可以做的吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倾其所爱 2024-10-28 10:31:19

了解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 查询字符串参数。

玩得开心

Read about jsonp.

Generally, an oversimplified implementation, just to explain how it works would be:

on the client:

  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 

  }

on the server, for example in aspx

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

or in Php

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

The limitations:

1 - no post. only GET. data sent to the server is limited to what fits in a URL

2 - the response of the server is not pure JSON - it has to be wrapped in a callback function, that the client gives the server it's name - in this example - using the r query-string parameter.

Have Fun

回复收藏 0 原文

萤火眠眠 2024-10-28 10:31:19

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() 在请求客户端上调用。

JSONP is your friend. Just send back the data in a dynamically added linked script.

First, Data request is sent by the client to your server via something like:

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

Then, request the data server-side on your machine. Return the response as JavaScript. Something like: