问题做Ajax的请求与PhoneGap的应用 [英] Problems doing ajax-requests with a Phonegap application

问题描述

我想创建一个简单的RSS阅读器的PhoneGap和jQuery。 我下面这个教程：<一href="http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/">http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/.

我已经成功地得到这个工作得很好，当我尝试了code。在我的浏览器。的PHP文件获取的饲料，就像我希望它给它的输出。 但是，当我从我的编译PhoneGap的应用程序中运行相同的文件中的AJAX请求刚返回的PHP文件中的内容（在PHP的code，不是执行的结果）。

我已经花了几个小时谷歌搜索这一点，并试图许多教程和调整。我发现，在官方的PhoneGap论坛没有任何的解决方案。我究竟做错了什么？这个问题似乎是PHP不响应请求。我试着到PHP文件移动到不同的领域，但结果是一样的，它工作在我的浏览器，但不是在编译的应用程序。

下面是jQuery的code发起的ajax- code：

 函数get_rss_feed（）{
    //清除DIV的内容为下料。
    $（＃feed_content）空（）的HTML。（'＆LT; IMG类=加载SRC =JS /图片/ AJAX-loader.gifALT =/＆GT;'）;

    $阿贾克斯（{
        网址： 'http://192.168.1.7/rssApp/www/rss-proxy.php?url=http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml',
        成功：函数parseRSS（D）{

        //找到该文件中的每个项和解析
        $（D）.find（'项目'）。每个（函数（）{

            //命名当前发现该项目为这个特殊的循环运行
            变量$项目= $（本）;
            //抓取文章标题
            VAR标题= $ item.find（标题）文本（）。
            //抓住文章的网址
            VAR链接= $ item.find（链接）文本（）。
            //下，描述
            Var描述= $ item.find（说明）文本（）。
            //不要忘了pubdate的
            。VAR pubdate的= $ item.find（'pubdate的）文本（）;

            //现在创建一个变种HTML来存储，我们使用的是输出原料到浏览器窗口的标记
            VAR HTML =＆LT; D​​IV CLASS = \项\＆GT;＆LT; H2类= \postTitle \＆gt;中+标题+＆LT; \ / H2＆gt;中;
            HTML + =＆LT; EM类= \日期\＆gt;中+ pubdate的+＆LT; / EM＆gt;中;
            HTML + =＆其中，P级= \描述\＆gt;中+ +描述＆所述; / P＆gt;中;
            HTML + =＆LT; A HREF = \+链接+\目标= \_空白\＆GT;阅读全文＆GT;＆GT;＆LT; \ / A＆GT;＆LT; \ / DIV＆gt;中;

            //把屏幕上的饲料内容！
            $（'＃feed_content）追加（$（HTML））;
        }）;
        $（'＃feed_content img.loader）淡出（）。
    }

    }）;

};
 

下面是在 RSS-proxy.php 的加载XML从URL，并将其输出：

 ＆LT; PHP
    // PHP代理
    //加载从任何位置的XML。用于与Flash / Flex的应用程序来绕过安全限制
    //作者：保罗菲耶罗
    // 2006年1月29日，
    //用法：proxy.php URL = HTTP：//mysite.com/myxml.xml

    $会话= curl_init（$ _ GET ['URL']）; //打开了Curl会议
    curl_setopt（$会议，CURLOPT_HEADER，假）; //不要返回的HTTP头
    curl_setopt（$会议，CURLOPT_RETURNTRANSFER，真正的）; //不要回电话的内容
    $ XML = curl_exec（$会议）; //使通话
    标题（内容类型：text / xml的）; //适当地设置内容类型
    回声$的xml; //吐出XML
    curl_close（$会议）; //并关闭会话
？＆GT;
 

解决方案

我终于成功地解决了这个！ 事实证明，你需要加入白名单，你想从X code本PhoneGap的应用程序，如果你想要做的请求某个域请求服务器（无论是本地主机或其他）。 我没有发现这一点，前面的原因是，我没有为您在Ajax响应的错误。有一次，我这样做，我得到了HTTP状态code 401 （未授权）和错误消息白名单拒绝

要解决这个问题我在我的项目，并在关键 ExternalHosts 我加了一个打开文件 PhoneGap.plist 与价值的新项目： *本地主机。 我也改变了AJAX网址：

网​​址： 'http://localhost/rssApp/www/rss-proxy.php?url=http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml'

我编译和运行在iPhone模拟器的应用程序，并用一个完全成功的Ajax响应我的本地服务器响应！

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

样，当您试图弄清楚为什么服务器没有响应，但我想这是很好出于安全原因的讨厌。希望这可以帮助其他人在那里谁的，从他们的PhoneGap应用程序简单的Ajax请求奋斗！

I'm trying to create a simple RSS reader with Phonegap and jQuery. I am following this tutorial: http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/.

I've managed to get this working just fine when I try out the code in my browser. The php-file fetches the feed and outputs it just like I expect it to. But when I run the same file from within my compiled Phonegap application the ajax-request just returns the contents of the php-file (the php-code, not the executed result).

I've spent hours Googling this and tried numerous tutorials and tweaks. I found no solutions in the offical Phonegap forums either. What am I doing wrong? The problem seems to be PHP not responding to the request. I've tried to move the php-file to a different domain but the result is the same, it works in my browser but not in the compiled app.

Here's the jQuery code that initiates the ajax-code:

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();
    }

    });

};

Here's the rss-proxy.php that loads the XML from the url and outputs it:

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

解决方案

I've finally managed to solve this! It turns out that you need to whitelist the server you wish to request from your PhoneGap application in Xcode if you want to do requests to a certain domain (be it your localhost or whatever). The reason that I didn't found this out earlier was that I didn't check for errors in the ajax response. Once I did that I got the http status code 401 (Unauthorized) and error message "Whitelist rejected".

To fix this I opened the file PhoneGap.plist in my project and under the key ExternalHosts i added a new item with the value: *.localhost. I also changed the ajax url to:

url: 'http://localhost/rssApp/www/rss-proxy.php?url=http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml'

I compiled and run the application on the iOS Simulator and my localhost server responded with a perfectly successful ajax response!

For every external host that you wish your application to connect to you must add it to the list of ExternalHosts. For example if you wish to access an API on http://google.com/maps/api.php you must add *.google.com to your list.

Kind of annoying when you try to figure out why the server isn't responding, but I guess it's good for security reasons. Hope this helps someone else out there who's struggling with simple ajax requests from their PhoneGap application!

这篇关于问题做Ajax的请求与PhoneGap的应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！