使用 jQuery 从子域获取 JSON

发布于 2024-10-19 04:53:23 字数 409 浏览 7 评论 0原文

我有 user1.mydomain.com 和 user2.mydomain.com 域。我使用 api.mydomain.com 通过 AJAX/JSON 处理我的 Web 应用程序。因此，我想使用 jQUery 从 user1.mydomain.com 向 api.mydomain.com/projects 发出 POST 请求，如下所示：{'action' :'getActiveProjects'} 以 JSON 格式获取 user1 的活动项目列表。我找到了 $.getJSON 方法，但似乎没有选项可以将一些数据发送到服务器，只有 GET 方法。我面临的另一个问题是同源政策。那么，如何将一些 JSON 发布到另一个子域上的服务器并获得 JSON 响应结果呢？

原文

分享到QQ

分享到微博

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

发布评论

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

甜是你 2024-10-26 04:53:23

通过指定 使用 $.ajax 和 JSON-P >数据类型：“jsonp”。链接文档中的详细信息。您的服务器必须使用 JSON-P 进行响应，而不仅仅是 JSON，但这非常简单如果你控制了服务器就要做。

或者，如果您只需要支持相当新的浏览器（而不是 IE），您可以将服务器设置为支持 CORS。但这仅在最近的浏览器中支持，尽管 IE8 支持它，但它并不通过通常的 XMLHttpRequest 对象透明地支持它，而是需要一个完全不同的传输对象（XDomainRequest)，jQuery 还不能自动为您处理。

下面是一个使用 jQuery 的 JSON-P 示例：

$.ajax({
  // The source URL
  url: "http://jsbin.com/ubucu4",

  // Tell jQuery you're doing JSON-P
  dataType: "jsonp",

  // Include some data with the request if you like;
  // this example doesn't actually *use* the data
  data: {some: "data"},

  // You can control the name of the callback, but
  // usually you don't want to and jQuery will handle
  // it for you. I have to here because I'm doing this
  // example on JSBin.
  jsonpCallback: "exampleCallback",

  // Success callback
  success: function(data) {
    display("Received data, typeof data = " + typeof data);
    display("data.foo = " + data.foo);
    display("data.bar = " + data.bar);
  },

  // Error callback      
  error: function(jxhr, status, err) {
    display("Error, status = " + status + ", err = " + err);
  }
});

Live copy

在服务器上，您会看到 jQuery 添加了 < URL 的 code>callback 参数，例如在上面它是 http://jsbin.com/ubucu4?callback=exampleCallback 但如果你喜欢 jQuery 控制它的名称将是更有异国情调一点。您的服务器端代码应该构建一个 JavaScript 函数调用的响应，调用该函数。我在上面的示例中的回应是：

exampleCallback({
    "foo": "This is foo",
    "bar": "This is bar"
});

这一切都发生是因为而不是使用 XMLHttpRequest，它受同源策略，JSON-P使用动态添加的script标签（这很好）。在我的示例中，标签将类似于

<script type='text/javascript' src='http://jsbin.com/ubucu4?callback=exampleCallback'></script>

浏览器将检索脚本（即您的 JSON-P 响应）并执行它。这意味着回调被调用，并且您的数据被提供给您的脚本。

从技术上讲，您的 JSON-P 响应并不是 JSON；而是 JSON。它是 JavaScript，因此，您必须仅将 JSON-P 与您信任的服务器（例如您自己的子域服务器）一起使用，因为您是直接将代码注入到页面中。否则，如果您使用一些不信任的服务器，则注入的代码很可能会读取页面上的信息并将其发送给第三方。让你的口号保持谨慎。

Using $.ajax and JSON-P by specifying the dataType: "jsonp". Details in the linked docs. Your server will have to respond with JSON-P rather than just JSON, but that's pretty easy to do if you control the server.

Alternately, if you only need to support fairly recent browsers (and not IE), you can set up your server to support CORS. But that's only supported in recent browsers, and although IE8 supports it, it doesn't support it transparently through the usual XMLHttpRequest object, but instead requires a completely different transport object (XDomainRequest), which jQuery doesn't handle automatically for you (yet).

Here's a JSON-P example using jQuery:

$.ajax({
  // The source URL
  url: "http://jsbin.com/ubucu4",

  // Tell jQuery you're doing JSON-P
  dataType: "jsonp",

  // Include some data with the request if you like;
  // this example doesn't actually *use* the data
  data: {some: "data"},

  // You can control the name of the callback, but
  // usually you don't want to and jQuery will handle
  // it for you. I have to here because I'm doing this
  // example on JSBin.
  jsonpCallback: "exampleCallback",

  // Success callback
  success: function(data) {
    display("Received data, typeof data = " + typeof data);
    display("data.foo = " + data.foo);
    display("data.bar = " + data.bar);
  },

  // Error callback      
  error: function(jxhr, status, err) {
    display("Error, status = " + status + ", err = " + err);
  }
});

Live copy

On the server, you'll see that jQuery has added a callback parameter to the URL, e.g. in the above it would be http://jsbin.com/ubucu4?callback=exampleCallback but if you like jQuery control it the name will be a bit more exotic. Your server-side code should construct a response that is a JavaScript function call, calling that function. My response in the above example is:

exampleCallback({
    "foo": "This is foo",
    "bar": "This is bar"
});

This all happens because instead of using XMLHttpRequest, which is subject to the Same Origin Policy, JSON-P uses a dynamically-added script tag (which is fine). In my example, the tag will look something like

<script type='text/javascript' src='http://jsbin.com/ubucu4?callback=exampleCallback'></script>

The browser will retrieve the script, which is your JSON-P response, and execute it. That means the callback gets called, and your data is supplied to your script.

Your JSON-P response isn't, technically, JSON; it's JavaScript, and for that reasons it's essential that you only use JSON-P with servers you trust (such as your own subdomain servers), since you're injecting code directly into the page. Otherwise, if you're using some server you can't trust, the code that gets injected may well read information off the page and send that to some third party. Let caution by your watchword.

回复收藏 0 原文