2010-06-18 52 views
8

我已經用盡了所有的研究方法來解決這個問題,所以希望其他人能夠想到我以前沒有的東西。

相對直接的設置,我有一個JavaScript頁面,使一個Ajax請求到一個URL(在同一個域中)在後臺的Java Web應用程序做它的東西,並返回一個部分的HTML頁面(沒有HTML ,頭或身體標籤,只是內容)應插入頁面中的特定點。

所有聽起來都很簡單,我的代碼在IE,Firefox和Safari中都可以使用,但在Chrome中卻不行。在Chrome中,目標元素最終爲空,如果我在Chromes開發人員工具中查看資源請求,則響應內容也是空的。

所有非常混亂,我已經嘗試了無數的事情來解決它,我只是出於想法。任何幫助將不勝感激。

var container = $('#container'); 

$.ajax({ 
    type: 'GET', 
    url: '/path/to/local/url', 
    data: data('parameters=value&another=value2'), 
    dataType: 'html', 
    cache: false, 
    beforeSend: requestBefore, 
    complete: requestComplete, 
    success: requestSuccess, 
    error: requestError 
}); 

function data(parameters) { 
    var dictionary = {}; 
    var pairs = parameters.split('&'); 
    for (var i = 0; i < pairs.length; i++) { 
     var keyValuePair = pairs[i].split('='); 
     dictionary[keyValuePair[0]] = keyValuePair[1]; 
    } 
    return dictionary; 
} 

function requestBefore() { 
    container.find('.message.error').hide(); 
    container.prepend('<div class="modal"><div class="indicator">Loading...</div></div>'); 
} 

function requestComplete() { 
    container.find('.modal').remove(); 
} 

function requestSuccess(response) { 
    container.empty(); 
    container.html(response); 
} 

function requestError(response) { 
    if (response.status == 200 && response.responseText == 'OK') { 
     requestSuccess(response); 
    } else { 
     container.find('.message.error').fadeIn('slow'); 
    } 
} 

所有這些都在$(document).ready(function(){})中執行;

乾杯, 吉姆

@Oleg - 要求提供更多信息,響應的一個例子是,AJAX調用可能會收到。

<p class="message error hidden">An unknown error occured while trying to 
retrieve data, please try again shortly.</p> 
<div class="timeline"> 
    <a class="icon shuttle-previous" 
rel="max_id=16470650733&page=1&q=something">Newer Data</a> 
    <a class="icon shuttle-next" 
rel="max_id=16470650733&page=3&q=something">Older Data</a> 
</div> 
<ol class="social"> 
    <li class="even"> 
     <div class="avatar"> 
      <img src="sphere_normal.gif"/> 
     </div> 
     <p> 
      Some Content<br/> 
      <span class="published">Jun 18, 2010 11:29:05 AM</span> - <a 
target="_blank" href="">Direct Link</a> 
     </p> 
    </li> 
    <li class="odd"> 
     <div class="avatar"> 
      <img src="sphere_normal.gif"/> 
     </div> 
     <p> 
      Some Content<br/> 
      <span class="published">Jun 18, 2010 11:29:05 AM</span> - <a 
target="_blank" href="">Direct Link</a> 
     </p> 
    </li> 
</ol> 
<div class="timeline"> 
    <a class="icon shuttle-previous" 
rel="max_id=16470650733&page=1&q=something">Newer Data</a> 
    <a class="icon shuttle-next" 
rel="max_id=16470650733&page=3&q=something">Older Data</a> 
</div> 
+0

你運行這個本地? – 2010-06-18 10:27:42

+0

是的尼克所有這一切都運行在一個Java Web應用程序,因此在我的本地計算機上,目前爲http:// localhost:8090/ – roguepixel 2010-06-18 10:34:03

+3

@roguepixel - 要進行快速測試,請嘗試使用'--disable命令行上的「-web-security」選項相同的結果? – 2010-06-18 10:36:27

回答

1

我把你的源代碼和建立一個快速測試方案,但沒有複製你的問題。它在Firefox(3.6.3)和Chrome(5.0.375.70)中都適合我。我在本地和遠程服務器上都嘗試過。

所以你的代碼很可能不會被指責。但我也認爲這通常不是Chrome相關問題。

Other people似乎已經遇到了這個。儘管如此,更改內容類型在我的測試場景中沒有任何影響。它甚至在我將Content-Type設置爲image/jpeg時有效。

JQuery forums有人指出不同的行爲取決於他是否在本地或遠程服務器上運行他的應用程序。如果您遇到這種情況,您可以比較HTTP請求和響應頭以追蹤問題。

+0

感謝您的想法,我會多看一看請求和響應標題。 – roguepixel 2010-06-23 13:16:06

2

我剛剛解決了類似的問題,並認爲我會發布我的解決方案,以防其他人使用。

只有Firefox和Chrome顯示一個空的ajax響應,所以它似乎是一個跨域問題,但一切都在同一個域。

事實證明,'www。',我過分愚蠢地硬編碼到我的ajax網址是怪罪。如果我使用相對路徑,一切都會好起來的。

我的測試網站在特定時刻打開爲「http://domain.com」,沒有「www」,因此Firefox和Chrome將它視爲另一個域。導航到「http://www.domain.com」導致ajax調用在所有瀏覽器中都可用。

所以,給你寫:

網址: '/路徑/要/本地/ URL'

..按照慣例,當我們不想公開我們的道路時,我不禁想知道,事實上你是否寫過一條絕對的道路,就像我曾經......?

+0

你救了我的一天!我只是想在Chrome 8.0.552.237 AJAX調用
- 使用相對路徑的「bin/test.php的」(該服務器是在我的本地網絡) - >它工作正常
- 以絕對路徑的「http ://192.168.0.101/bin/test.php「(服務器在我的本地網絡) - >它不工作!

謝謝! – Stan 2011-01-31 13:15:39