我有user1.mydomain.com
和user2.mydomain.com
域。我api.mydomain.com
过去常常通过 AJAX/JSON 处理我的网络应用程序。因此,我想从使用 jQUery 发出一个 POST 请求,如下所示:user1.mydomain.com
以JSON 格式获取 user1 的活动项目列表。我找到了方法,但似乎没有向服务器发送一些数据的选项,只有 GET 方法。我面临的另一个问题是同源政策。那么,如何将一些 JSON 发布到另一个子域上的服务器并获得 JSON 响应?api.mydomain.com/projects
{'action':'getActiveProjects'}
$.getJSON
3 回答
通过$.ajax
指定dataType: "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);
}
});
在服务器上,您会看到 jQuery 已callback
在 URL 中添加了一个参数,例如,在上面会添加参数,http://jsbin.com/ubucu4?callback=exampleCallback
但如果您喜欢 jQuery 控制它,名称会更奇特。您的服务器端代码应该构造一个响应,它是一个 JavaScript 函数调用,调用该函数。我在上面的例子中的回答是:
exampleCallback({
"foo": "This is foo",
"bar": "This is bar"
});
这一切都发生了,因为JSON-P没有使用受Same Origin PolicyXMLHttpRequest
约束的 using ,而是使用动态添加的标签(这很好)。在我的示例中,标签看起来像script
<script type='text/javascript' src='http://jsbin.com/ubucu4?callback=exampleCallback'></script>
浏览器将检索脚本,即您的 JSON-P 响应,并执行它。这意味着回调被调用,并且您的数据被提供给您的脚本。
从技术上讲,您的 JSON-P 响应不是 JSON。它是 JavaScript,因此必须仅将 JSON-P 与您信任的服务器(例如您自己的子域服务器)一起使用,因为您将代码直接注入页面。否则,如果您使用的是一些您无法信任的服务器,则被注入的代码很可能会从页面上读取信息并将其发送给某个第三方。让你的口号谨慎。