Ajax XML請求無法正常工作

我試圖做一個簡單的ajax請求來加載一些XML時，當下拉選擇一個值。 XML包含根據用戶選擇的內容切換的圖像路徑。它在Firefox中效果很好（我沒有得到任何Javascript錯誤），但由於某種原因，Chrome中沒有任何反應。這是我到目前爲止：Ajax XML請求無法正常工作

 <script type="text/javascript"> 
     function loadXMLDoc(url) { 

      var xmlhttp; 
      var txt, txtBase, txtOverlay1, txtOverlay2, txtBlack, name, img; 

      if (window.XMLHttpRequest){ 
       // code for IE7+, Firefox, Chrome, Opera, & Safari 
       xmlhttp=new XMLHttpRequest(); 
       xmlhttp.overrideMimeType("text/xml"); 
      } 
      else { 
       // code for IE6 & IE5 
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xmlhttp.onreadystatechange=function() { 

       if (xmlhttp.readyState==4 && xmlhttp.status==200) { 

        txtBase='<img id="original"'; 
        txtOverlay1='<img id="overlay1" class="overlay"'; 
        txtOverlay2='<img id="overlay2" class="overlay"'; 
        txtBlack='<img id="opacity" class="overlay"'; 

        img=xmlhttp.responseXML.documentElement.getElementsByTagName("IMG"); 
        name=img[0].getElementsByTagName("NAME"); 

        txtBase = txtBase + name[0].firstChild.nodeValue + '/>'; 
        txtOverlay1 = txtOverlay1 + name[1].firstChild.nodeValue + '/>'; 
        txtOverlay2 = txtOverlay2 + name[2].firstChild.nodeValue + '/>'; 
        txtBlack = txtBlack + name[3].firstChild.nodeValue + '/>'; 

        txt = txtBase + txtOverlay1 + txtOverlay2 + txtBlack; 
        document.getElementById('inner_container').innerHTML = txt; 
        $(".red").css({"font-size":"2.0em"}); 
        $(".blue, .green").css({"font-size":"1.0em"}); 
       } 
      } 
      xmlhttp.open("GET",url,true); 
      xmlhttp.send(); 
     } 
    </script>

而我用它調用它。

  <select> 
       <option id="selected">Select a car</option> 
       <option onclick="loadXMLDoc('http://www.brandybrowauto.com/files/nissan.xml')">Nissan</option> 
       <option onclick="loadXMLDoc('http://www.brandybrowauto.com/files/mazdaspeed3.xml')">Mazdaspeed3</option> 
      </select>

任何幫助，得到這個在Chrome瀏覽器會在使代碼更是極大的讚賞，也是任何提示。我是阿賈克斯的初學者。

來源

2011-12-08 Src1988

你可能會發現它更容易使用jQuery，它會處理AJAX跨瀏覽器的兼容性爲您服務。 –

鑑於您似乎已經在使用jQuery來設置CSS，您應該明確地將它用於Ajax。你可能也想用它來創建你的新元素。（至於在Chrome中的實際問題 - 我不知道。） – nnnnnn

我一直想要嘗試和切換到所有的jQuery，但不幸的是，我只是進入ajax，將不得不做很多研究。但在此期間，我必須做些愚蠢的事情/不這樣做，導致它甚至沒有在chrome中加載xml文件。我嘗試了overrideMime技巧，無濟於事。 – Src1988

請檢查狀態碼。可能發生xml文件在之前被請求並且服務器發送另一個狀態碼，例如， 304

jQuery自動將一個隨機參數附加到URL以防止出現這種情況（您也可以這樣做）。

編輯：

看來，點擊處理程序不火。使用該標記的選擇，而不是：

<select onchange="if(this.value)loadXMLDoc(this.value)"> 
    <option value="0" id="selected" selected="selected">Select a car</option> 
    <option value="/files/nissan.xml">Nissan</option> 
    <option value="/files/mazdaspeed3.xml">Mazdaspeed3</option> 
</select>

來源

2011-12-08 04:55:00

我如何在這個例子中附加這個參數？我相信在螢火蟲它顯示響應爲304. – Src1988

'url = url +'？'+ new Date（）。getTime（）;'，但看到我更新的帖子（） –

您的編輯做了詭計！奇怪爲什麼onclick沒有開火，但非常感謝。 – Src1988

這段代碼是否可以在您的網站的Chrome中爲您工作？如果是這樣，它走多遠？如果您還不是，那麼您應該使用Chrome開發人員的工具並在您的javascript中設置斷點並逐步完成代碼，直到它停止按預期工作。

如果我不得不採取在發生了什麼猜測 - 鉻可能不喜歡你正在使用

xmlhttp.onreadystatechange

該行可能應，而不是一個事實：

xmlhttp.onload

內容編輯：

看你的代碼後（根據您的評論的反應），似乎是Y你永遠無法觸發你選擇的onclick事件。我玩弄了代碼來測試它，確保它不會運行。以下情況不會發生，因爲此事件不會觸發。

<option onclick="alert('test');">Nissan</option>

INSTEAD，不要使用選項中的事件。使用select中的onchange事件。

<select onchange="alert(options[selectedIndex].text);">

請試試這個，告訴我它是否讓你滿意。你可以使用這些信息來觸發你的xmlhttp邏輯。

來源

2011-12-08 04:50:58 invalidsyntax

遊樂場樣品在這裏。 http://www.brandybrowauto.com/files/test2.html 頁面加載正常，但選擇其中一個值後，函數不會加載xml。我試圖改變它.onload而不是什麼。 – Src1988

我已更新我的帖子。請讓我知道這是否有效。 – invalidsyntax

謝謝，但莫勒博士的解決方案奏效。 – Src1988

Ajax XML請求無法正常工作

回答

相關問題