Problems doing ajax-requests with a Phonegap application

Question

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

Answer 1

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!

Answer 2

It looks like you are running your server locally (based on the 192.168.x.x IP address) which means that only devices connnected to your network can access it. You could connect the phone to the same wifi network as your computer as a temporary fix. But you're going to need to host this on a real server for it to be accessible over the internet.

You could also forward port 80 on your router to this IP address and then use your actual IP address (see whatsmyip.org) in your request url. But that's not a really stable solution.