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请求无法正常工作

回答

相关问题