带有 jquery 的仪表板跨域 AJAX
Posted
技术标签:
【中文标题】带有 jquery 的仪表板跨域 AJAX【英文标题】:Dashboard Cross-domain AJAX with jquery 【发布时间】: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)
)
【问题讨论】:
【参考方案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=?
位放在查询字符串的末尾。
【讨论】:
以上是关于带有 jquery 的仪表板跨域 AJAX的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Ajax POST 不适用于 MailChimp