angularjs jsonp 在本地不起作用

Posted 2023-05-09

【中文标题】angularjs jsonp 在本地不起作用

【英文标题】：angularjs jsonp don't work localy

【发布时间】：2012-07-04 19:19:28

【问题描述】：

我尝试了一个 Angular 演示并想玩 jsonp，但我无法让它工作，所以我将相同的代码粘贴到 jsbin 中，这样我可以问你们有什么问题。请注意它确实有效。

在我的开发站点上再次尝试了完全相同的代码。它不起作用。我可以在 webkit 中看到网络日志，我用 http 代码 200 返回了一个有效的 json。但是没有执行回调。

我最终在同一个请求上尝试了 jQuery-Ajax，并且效果很好。对我来说

$(document).ready(function() 
    $.getJSON('http://angularjs.org/greet.php?callback=?&name=Super%20Hero', function(data) 
        console.log(data); // Works
    );
);

这是我的代码的演示，它不能在本地运行 http://jsbin.com/ojibel/edit#html,live.

编辑：

我从 .html 切换到 .php 扩展名，它开始工作了。所以它必须与apache做点什么？

【参考方案1】：

在 JQUERY api doc 中提到

“但是，由于 JSONP 和跨域 GET 请求不使用 XHR，在这些情况下，传递给成功回调的 jqXHR 和 textStatus 参数是未定义的。”

我在http://jsbin.com/ojibel/3/edit修改了你的代码

如果您看到我创建了一个名为 getData 的函数，并且我将其作为回调 URL 传递，因此我可以在控制台中显示它。

JSONP 的工作方式是尝试将 URL 添加为脚本标签，并将 URL 的输出视为脚本，并且代码按原样执行。所以如果你有回电 xyx 在输出中你会得到类似

xyz(DATA_FROM_SERVER)

与

相同

<script>xyz(DATA_FROM_SERVER)</script>

【讨论】：

效果很好，但我对此并不满意。例如，我无法访问其他参数，例如 xhr.status 等

如果您尝试访问跨域，则无法访问 xhr.status 或任何其他回调。再次请通过 jquery 所说的工作原理。 ------------------- "但是，由于 JSONP 和跨域 GET 请求不使用 XHR，在这些情况下传递给成功回调的 jqXHR 和 textStatus 参数是未定义的。”因此，在进行跨域时，无法获得它们。 JSONP 不是 ajax。跨域 AJAX 根本不可能。你需要明白这一点。

【参考方案2】：

当您说它“不起作用”时，您能描述一下您正在采取的步骤以及预期与实际的结果是什么？

请注意，在您的示例中，您将 $http 与 $templateCache 一起使用，并且在 html 文件的底部有 <script type="text/ng-template" id="http-hello.html">Hello, $http!</script>，它将使用 http-hello.html 请求的响应填充缓存，所以如果您获取 / http-hello.html，将不会向服务器发出请求，并且将使用缓存的内容调用回调。