Problemi con richieste ajax con un'applicazione PhoneGap

Question

Sto cercando di creare un semplice lettore RSS con PhoneGap e jQuery. Sto seguendo questo tutorial: http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/.

Sono riuscito a farlo funzionare bene quando provo il codice nel mio browser. Il file php recupera il feed e lo emette esattamente come mi aspetto. Ma quando eseguo lo stesso file dall'applicazione Phonegap compilata, la richiesta ajax restituisce semplicemente il contenuto del file php (il codice php, non il risultato eseguito).

Ho passato ore a cercare su Google e ho provato numerosi tutorial e trucchi. Neanche ho trovato soluzioni nei forum ufficiali di PhoneGap. Che cosa sto facendo di sbagliato? Il problema sembra essere il PHP che non risponde alla richiesta. Ho provato a spostare il file php in un dominio diverso ma il risultato è lo stesso, funziona nel mio browser ma non nell'app compilata.

Ecco il codice jQuery che avvia la volta 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(); 
    } 

    }); 

}; 

Ecco il rss-proxy.php che carica il codice XML dall'URL e l'emette:

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

Sono finalmente riuscito a risolvere questo! Si scopre che è necessario inserire nella whitelist il server che si desidera richiedere dall'applicazione PhoneGap in Xcode se si desidera eseguire richieste a un determinato dominio (sia esso il localhost o qualsiasi altra cosa). Il motivo per cui non l'ho trovato prima è che non ho controllato gli errori nella risposta ajax. Una volta fatto, ho ricevuto il codice di stato http 401 (Non autorizzato) e il messaggio di errore "Whitelist rejected".

Per risolvere questo problema ho aperto il file PhoneGap.plist nel mio progetto e sotto la chiave ExternalHosts ho aggiunto un nuovo articolo con il valore: *.localhost. Ho anche cambiato l'url Ajax per:

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

ho compilato ed eseguito l'applicazione sul simulatore iOS e il mio server localhost risposto con una risposta ajax perfettamente riuscita!

Per ogni host esterno che si desidera collegare alla propria applicazione, è necessario aggiungerlo all'elenco di ExternalHosts. Ad esempio se desideri accedere a un'API su http://google.com/maps/api.php devi aggiungere *.google.com al tuo elenco.

Tipo di fastidio quando si tenta di capire perché il server non risponde, ma suppongo che sia utile per motivi di sicurezza.Spero che questo aiuti qualcun altro là fuori che sta lottando con semplici richieste di ajax dalla loro applicazione PhoneGap!

Answer 2

E ' sembra che tu stia eseguendo il tuo server localmente (basato sull'indirizzo IP 192.168.xx), il che significa che solo i dispositivi connessi alla tua rete possono accedervi. È possibile connettere il telefono alla stessa rete Wi-Fi del computer come una soluzione temporanea. Ma avrai bisogno di ospitarla su un server reale per renderlo accessibile su Internet.

È inoltre possibile inoltrare la porta 80 del router a questo indirizzo IP e quindi utilizzare l'indirizzo IP effettivo (vedere whatsmyip.org) nell'URL della richiesta. Ma questa non è una soluzione veramente stabile.