Problems doing ajax-requests with a Phonegap application
我正在尝试使用 Phonegap 和 jQuery 创建一个简单的 RSS 阅读器。
我正在关注本教程:http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/.
当我在浏览器中试用代码时,我已经设法让它工作得很好。 php 文件获取提要并像我期望的那样输出它。但是当我从我编译的 Phonegap 应用程序中运行相同的文件时,ajax 请求只返回 php 文件的内容(php 代码,而不是执行的结果)。
我花了几个小时在谷歌上搜索并尝试了许多教程和调整。我在官方的 Phonegap 论坛上也没有找到解决方案。我究竟做错了什么?问题似乎是 PHP 没有响应请求。我尝试将 php 文件移动到不同的域,但结果是一样的,它在我的浏览器中有效,但在编译的应用程序中无效。
这里是启动 ajax 代码的 jQuery 代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
|
function get_rss_feed () {
//clear the content in the div for the next feed.
$ ("#feed_content").empty().html (‘<img class="loader" src="js/images/ajax-loader.gif" alt=""/>’);
$.ajax({ url: ‘http://192.168.1.7/rssApp/www/rss-proxy.php?url=http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml’, success: function parseRSS(d) {
//find each ‘item’ in the file and parse it $(d).find(‘item’).each(function() {
//name the current found item this for this particular loop run var $item = $(this); // grab the post title var title = $item.find(‘title’).text(); // grab the post’s URL var link = $item.find(‘link’).text(); // next, the description var description = $item.find(‘description’).text(); //don’t forget the pubdate var pubDate = $item.find(‘pubDate’).text();
// now create a var ‘html’ to store the markup we’re using to output the feed to the browser window var html ="<h2 class="postTitle">" + title +"<///h2>"; html +="" + pubDate +""; html +="<p class="description">" + description +"</p>"; html +="Read More >><///a><///div>";
//put that feed content on the screen! $(‘#feed_content’).append($(html)); }); $(‘#feed_content img.loader’).fadeOut(); }
});
}; |
这里是从 url 加载 XML 并输出的 rss-proxy.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
<?php
// PHP Proxy
// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
// Author: Paulo Fierro
// January 29, 2006
// usage: proxy.php?url=http://mysite.com/myxml.xml
$session = curl_init($_GET[‘url’]); // Open the Curl session curl_setopt($session, CURLOPT_HEADER, false); // Don’t return HTTP headers curl_setopt($session, CURLOPT_RETURNTRANSFER, true); // Do return the contents of the call $xml = curl_exec($session); // Make the call header("Content-Type: text/xml"); // Set the content type appropriately echo $xml; // Spit out the xml curl_close($session); // And close the session ?> |
- 我建议从代码中删除该 IP 地址。
- 当您从模拟器或设备上的浏览器打开 .php 文件时会发生什么? PHP是否被执行?
- 感谢您的评论!我尝试从模拟器中的浏览器访问 .php 文件,它可以工作。但它只有在我将 URL 更改为相对而不是绝对的情况下才有效:url: ‘rss-proxy.php?url=http://www.nytimes.com/services/xml/rss/n??yt/GlobalHome.xml’。如果我现在使用移动 Safari 浏览器访问我在 htdocs 目录中的本地 MAMP 服务器上托管的 Phonegap 应用程序的 www 文件夹中的 index.html 文件,它可以工作!但不是来自已编译的 Phonegap 应用程序。当然,.php 文件与其他脚本文件一起位于 www 文件夹中。
我终于设法解决了这个问题!
事实证明,如果您想向某个域(无论是您的本地主机或其他什么)发出请求,您需要将您希望从 Xcode 中的 PhoneGap 应用程序请求的服务器列入白名单。
我之前没有发现这一点的原因是我没有检查 ajax 响应中的错误。一旦我这样做了,我得到了 http 状态代码 401(未经授权)和错误消息”Whitelist rejected“。
为了解决这个问题,我在我的项目中打开了文件 PhoneGap.plist,并在键 ExternalHosts 下添加了一个新项目,其值为:*.localhost。
我还将 ajax url 更改为:
url: ‘http://localhost/rssApp/www/rss-proxy.php?url=http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml’
我在 iOS 模拟器上编译并运行了应用程序,我的 localhost 服务器以非常成功的 ajax 响应进行了响应!
对于您希望应用程序连接到的每个外部主机,您必须将其添加到 ExternalHosts 列表中。例如,如果您希望访问 http://google.com/maps/api.php 上的 API,您必须将 *.google.com 添加到您的列表中。
当您试图找出服务器没有响应的原因时,这有点烦人,但我想出于安全原因,这很好。希望这可以帮助那些在 PhoneGap 应用程序中遇到简单 ajax 请求的人!
-
请接受您的回答,而不是在问题中写”已解决”;如果您必须等待一定时间才能做到这一点,那么请等待一定的时间:系统使您成为一个原因是有原因的。
-
另外,我可能会补充一点,如果您不想在 PhoneGap 应用程序中担心与 ExternalHosts 相关的任何限制,只需添加 *.* ,您就可以向任何服务器发送请求和接收响应.
-
抱歉 Tomalak,这是我第一次在这里发布问题。我还不习惯规则和惯例。我刚刚看到其他人在他们的问题中有 “SOLVED:” 前缀。
-
请指出它们,以便我可以相应地对其进行编辑!同时,我们的常见问题解答是一本不错的读物。
您似乎在本地运行您的服务器(基于 192.168.x.x IP 地址),这意味着只有连接到您的网络的设备才能访问它。您可以将手机连接到与计算机相同的 wifi 网络作为临时修复。但是您需要将其托管在真实服务器上才能通过 Internet 访问它。
您还可以将路由器上的端口 80 转发到该 IP 地址,然后在您的请求 url 中使用您的实际 IP 地址(请参阅 whatsmyip.org)。但这不是一个真正稳定的解决方案。
- 感谢杰森的回复!但是,我尝试将 php 脚本上传到由 web-hotel 托管的另一个外部 LAMP 服务器,并更改了我的 ajax 请求中的 url,但这也不起作用。在我的浏览器中,这样的解决方案仍然有效。当我用 Google 搜索时,我一直在寻找的解决方案是,它不应该比仅仅输入任何服务器端脚本的任何 URL 更难,它应该可以工作:
-
例如: ajax.open(“GET”,”http://search.twitter.com/search.json?q=bac??on”,true); 但我无法让它工作。顺便说一句,我使用的是iOS模拟器,而不是在实体手机上运行该应用程序。但是,这应该不是问题,我可以从模拟器中的移动 Safari 浏览器访问所有服务器。
-
wiki.phonegap.com/w/page/42450600/PhoneGap Ajax Sample 中的 ajax 培根示例在我的 Android 设备上运行良好
-
听起来您的 phonegap 配置搞砸了。您是否按照 phonegap.com/start#ios-x4 中列出的制作 phonegap 应用程序的所有步骤操作?
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268459.html