Ajax XML 请求无法正常工作

Question

我正在尝试在选择下拉列表中的值时执行一个简单的ajax请求来加载一些XML。 XML 包含我根据用户选择切换的图像路径。它在 Firefox 中运行良好（我没有收到任何 Javascript 错误），但由于某种原因，Chrome 中没有任何反应。这是我到目前为止所拥有的：

        <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 中工作的帮助，以及任何使代码更好的提示。我是 ajax 的初学者。

Answer 1

此代码中的任何一段是否适用于您网站上的 Chrome 浏览器？如果是这样，它会走多远？如果您还没有，您应该使用 Chrome 开发人员的工具并在您的 javascript 中设置断点并逐步执行代码，直到它停止按预期工作。

如果我不得不猜测发生了什么——Chrome 可能不喜欢你正在使用的事实

xmlhttp.onreadystatechange

这一行应该是：

xmlhttp.onload

---

编辑内容：

查看您的代码后（根据您的评论回复），您似乎永远无法触发您选择的 onclick 事件。我玩弄了代码来测试它，确保它不会运行。以下根本不会发生，因为此事件不会触发。

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

改为，不要使用选项中的事件。使用 select 中的 onchange 事件。

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

请试试这个并告诉我它是否让你满意。您可以使用此信息来触发您的 xmlhttp 逻辑。

Answer 2

请检查状态码。之前可能已经请求了 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>