使用Phonegap应用程序进行ajax请求的问题


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代码:
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 = "<div class='"entry'"><h2 class='"postTitle'">" + title + "<'/h2>";
            html += "<em class='"date'">" + pubDate + "</em>";
            html += "<p class='"description'">" + description + "</p>";
            html += "<a href='"" + link + "'" target='"_blank'">Read More >><'/a><'/div>";
            //put that feed content on the screen!
            $('#feed_content').append($(html));
        });
        $('#feed_content img.loader').fadeOut();
    }
    });
};

这里是rss-proxy.php,它从url加载XML并输出它:

<?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
?>

我终于设法解决了这个问题!事实证明,你需要白名单的服务器,你希望从你的PhoneGap应用程序在Xcode请求,如果你想做请求到某个域(无论是你的本地主机或其他)。我没有在早期发现这一点的原因是我没有检查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模拟器上编译并运行应用程序,我的本地主机服务器响应了一个非常成功的ajax响应!

对于您希望应用程序连接到的每个外部主机,您必须将其添加到ExternalHosts列表中。例如,如果您希望访问http://google.com/maps/api.php上的API,您必须将*.google.com添加到您的列表中。

当你试图找出服务器没有响应的原因时,这有点烦人,但我想这是出于安全原因。希望这能帮助那些在PhoneGap应用程序中遇到简单ajax请求的人!

看起来您正在本地运行服务器(基于192.168.x. x. net)。x IP地址),这意味着只有连接到您的网络的设备才能访问它。你可以把手机和电脑连接到同一个wifi网络上,作为临时解决办法。但是你需要把它托管在一个真实的服务器上,这样才能通过互联网访问它。

你也可以将路由器上的80端口转发到这个IP地址,然后在你的请求url中使用你的实际IP地址(参见whatsmyip.org)。但这不是一个真正稳定的解决方案。