带有 jquery 的仪表板跨域 AJAX答案

【问题标题】：Dashboard Cross-domain AJAX with jquery带有 jquery 的仪表板跨域 AJAX
【发布时间】：2010-10-08 21:05:18
【问题描述】：

大家好，我正在为 Apple 的 Dashboard 开发一个小部件，但在尝试使用 jquery 的 ajax 函数从我的服务器获取数据时遇到了问题。这是我的 JavaScript 代码：

$.getJSON("http://example.com/getData.php?act=data",function(json) { 
    $("#devMessage").html(json.message)
    if(json.version != version) {
        $("#latestVersion").css("color","red")
    }
    $("#latestVersion").html(json.version)
})

服务器用这个 json 响应：

{"message":"Hello World","version":"1.0"}

但由于某种原因，当我运行这个时，小部件上的字段不会改变。通过调试，我了解到该小部件甚至不会向服务器发出请求，因此这让我认为 Apple 设置了某种外部 URL 块。不过我知道这不是真的，因为许多小部件都会打电话回家检查更新。

有人对可能出现的问题有任何想法吗？

编辑：此外，此代码在 Safari 中运行良好。

根据 Luca 的要求，下面是正在运行的 PHP 和 Javascript 代码：

PHP：

echo $_GET["callback"].'({"message":"Hello World","version":"1.0"});';

Javascript：

function showBack(event)
{
var front = document.getElementById("front");
var back = document.getElementById("back");

if (window.widget) {
    widget.prepareForTransition("ToBack");
}

front.style.display = "none";
back.style.display = "block";
stopTime();
if (window.widget) {
    setTimeout('widget.performTransition();', 0);
}
$.getJSON('http://nakedsteve.com/data/the-button.php?callback=?',function(json) { 
    $("#devMessage").html(json.message)
    if(json.version != version) {
        $("#latestVersion").css("color","red")
    }
    $("#latestVersion").html(json.version)
})
}

【问题讨论】：

标签： javascript jquery ajax widget dashboard

【解决方案1】：

在 Dashcode 中点击 Widget Attributes，然后点击 Allow Network Access 确保选中该选项。我已经构建了一些拒绝工作的东西，这就是解决方案。

【讨论】：

回复有点晚了，但成功了！

【解决方案2】：

当前标准不允许跨域 Ajax 请求（使用 XMLHttpRequest / ActiveX 对象），根据W3C spec：

本规范不包括以下功能正在考虑用于未来版本本规范：

跨站XMLHttpRequest；

但是，有 1 种技术可以通过在页面上包含脚本标记以及少量服务器配置来执行 ajax 跨域请求，JSONP。

jQuery 支持this，但不是用这个在你的服务器上响应

{"message":"Hello World","version":"1.0"}

你会想用这个来回应：

myCallback({"message":"Hello World","version":"1.0"});

myCallback 必须是您在 $.getJSON() 函数中传递的“回调”参数中的值。因此，如果我使用 PHP，这将起作用：

echo $_GET["callback"].'({"message":"Hello World","version":"1.0"});';

【讨论】：

我尝试添加 ?callback=?到 url 的末尾，我在服务器上使用了那个确切的 PHP 代码，但仍然没有。
我们能看到 Javascript 和 PHP 代码吗？ Javascript 控制台也输出任何错误吗？
好了，不，dashcode 没有在运行日志中报告任何内容。
仪表板小部件本质上是一个网页——向某处的服务器发出请求。没有跨域，即使 OQ（原始提问者）将其放入问题中。

【解决方案3】：

Apple 设置了某种外部 URL 块。

在 Info.plist 中，您需要将键 AllowNetworkAccess 设置为 true。

<key>allowNetworkAccess</key>
<true/>

您的代码可以在 Safari 中运行，因为它在仪表板服务器中不受限制，并且它不符合标准，因为它允许跨站点 AJAX。 FF IS 标准兼容，因为它不允许跨站点 ajax。

【讨论】：

【解决方案4】：

如果您正在创建仪表板小部件，为什么不使用 DashCode 代码库中的 XMLHttpRequest 设置功能。 Apple 内置了这些，因此您无需安装 3rd 方 JS 库。我不确定 JSON 支持，但也许从这里开始会引导您走向更好的方向。

【讨论】：

因为jQuery的ajax函数使用了1行代码，所以看起来更好。

【解决方案5】：

因此，另一种解决方案是创建自己的服务器端 Web 服务，您可以在其中控制 CORS，用户的 Web 浏览器无法访问另一个站点，但是如果您将另一个站点包装在您自己的 Web 服务中（在同一域），那么它不会导致问题。

【讨论】：

【解决方案6】：

有趣的是它可以在 Safari 中运行。据我所知，要执行 x-domain ajax 请求，您需要使用 jsonp dataType。

http://docs.jquery.com/Ajax/jQuery.getJSON

http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/

基本上你需要将callback=?添加到你的查询字符串中，jquery会自动用正确的方法替换它，例如：

$.getJSON("http://example.com/getData.php?act=data&callback=?",function(){ ... });

编辑：为了安全起见，将callback=? 位放在查询字符串的末尾。

【讨论】：