使用Phonegap應用程序執行ajax請求的問題

Question

我正在嘗試使用Phonegap和jQuery創建一個簡單的RSS閱讀器。 我正在關注本教程：http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/。

當我在瀏覽器中試用代碼時，我已經成功實現了這項工作。 php文件提取feed並將其輸出，就像我期望的那樣。 但是，當我從編譯的Phonegap應用程序中運行相同的文件時，ajax-request只返回php文件（php代碼，而不是執行結果）的內容。

我花了幾個小時搜索這個，並嘗試了大量的教程和調整。我在官方的Phonegap論壇上也找不到解決方案。我究竟做錯了什麼？這個問題似乎是PHP沒有迴應請求。我試圖將php文件移到不同的域，但結果是一樣的，它在我的瀏覽器中工作，但不在編譯的應用程序中。

這裏是jQuery代碼初始化Ajax代碼：

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

Answer 1

我終於設法解決了這個問題！ 事實證明，如果您想對某個域（不管您是本地主機還是其他域）發出請求，您需要將您希望從PhoneGap應用程序請求的服務器列入白名單。 之前我沒有發現的原因是我沒有檢查ajax響應中的錯誤。一旦我這樣做，我得到了http狀態代碼401（未授權）和錯誤消息「Whitelist rejected」。

爲了解決這個問題我在我的項目打開的文件PhoneGap.plist和下方的按鍵ExternalHosts我添加了一個新項目，其值爲：*.localhost。 我也改變了AJAX網址：

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請求中掙扎的人！

Answer 2

它看起來像在本地運行服務器（基於192.168.xx IP地址），這意味着只有連接到網絡的設備才能訪問它。您可以將手機連接到與您的計算機相同的WiFi網絡作爲臨時修復。但是你需要在真正的服務器上託管它，以便通過互聯網訪問它。

您也可以將路由器上的端口80轉發到此IP地址，然後在您的請求url中使用您的實際IP地址（請參閱whatsmyip.org）。但這不是一個真正穩定的解決方案。