使用jQuery从子域获取JSON [英] Get JSON from subdomains with jQuery

问题描述

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

I have user1.mydomain.com and user2.mydomain.com domains. I use api.mydomain.com to deal with my web app over AJAX/JSON. So, I want to make a POST request from user1.mydomain.com to api.mydomain.com/projects using jQUery something like this: {'action':'getActiveProjects'} to get list of active projects for user1 in JSON as a result. I found $.getJSON method but it seems there is no option for sending some data to server, just GET method. The other problem I face is same origin policy. So, how can I POST some JSON to server on another subdomain and get JSON response as a result?

推荐答案

使用 $.ajax 和JSON-P(通过指定dataType: "jsonp").链接文档中的详细信息.您的服务器将必须使用 JSON-P 进行响应，而不仅仅是JSON，但这非常简单如果您控制服务器，该怎么办.

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.

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

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).

这是一个使用jQuery的JSON-P示例:

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);
  }
});

实时复制

在服务器上，您会看到jQuery向URL添加了callback参数，例如在上面，它将是http://jsbin.com/ubucu4?callback=exampleCallback，但如果您喜欢jQuery控件，则其名称将更加奇特.您的服务器端代码应构造一个响应，该响应是一个JavaScript函数调用，即调用该函数.在以上示例中，我的答复是:

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"
});

这一切都是因为没有使用XMLHttpRequest而已，XMLHttpRequest受相同起源政策，JSON-P使用动态添加的script标签(很好).在我的示例中，标记看起来像

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>

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

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.

从技术上讲，您的JSON-P响应不是JSON；这是JavaScript，因此，仅将JSON-P与您信任的服务器(例如您自己的子域服务器)一起使用非常重要，因为您是直接向页面中注入代码的.否则，如果您使用的是不信任的服务器，则注入的代码很可能会从页面上读取信息并将其发送给第三方.请注意您的口号.

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.

这篇关于使用jQuery从子域获取JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！