Javascript Ajax XML请求无法正常工作
我正在尝试执行一个简单的ajax请求,以便在选择下拉列表中的值时加载一些XML。XML包含我根据用户选择的内容切换的图像路径。它在Firefox中工作得很好,我没有收到任何Javascript错误,但由于某些原因,Chrome中什么也没有发生。这就是我到目前为止所做的:Javascript Ajax XML请求无法正常工作,javascript,xml,ajax,google-chrome,Javascript,Xml,Ajax,Google Chrome,我正在尝试执行一个简单的ajax请求,以便在选择下拉列表中的值时加载一些XML。XML包含我根据用户选择的内容切换的图像路径。它在Firefox中工作得很好,我没有收到任何Javascript错误,但由于某些原因,Chrome中什么也没有发生。这就是我到目前为止所做的: <script type="text/javascript"> function loadXMLDoc(url) { var xmlhttp;
<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的初学者。在您的网站上,这段代码中有没有任何一段可以在Chrome中使用?如果是,它能走多远?如果你还没有,你应该使用Chrome开发者的工具,在你的javascript中设置断点,并逐步执行代码,直到它停止工作 如果让我猜一猜发生了什么,Chrome可能不喜欢你使用
xmlhttp.onreadystatechange
这一行应该是:
xmlhttp.onload
编辑内容:
根据注释响应查看代码后,您似乎永远无法触发选项的onclick事件。我使用代码来测试它,确保它不会运行。以下情况不会发生,因为此事件不会触发
<option onclick="alert('test');">Nissan</option>
相反,不要使用选项中的事件。使用“选择”菜单中的onchange事件
<select onchange="alert(options[selectedIndex].text);">
请试试这个,如果你喜欢的话告诉我。您可以使用此信息触发xmlhttp逻辑。请检查状态代码。可能会发生这样的情况:之前已请求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>
您可能会发现使用jQuery更容易,它将为您处理AJAX跨浏览器兼容性。鉴于您似乎已经在使用jQuery设置CSS,您也应该明确地将其用于AJAX。您可能还想使用它来创建新元素。至于Chrome中的实际问题——我不知道。我一直想尝试将所有内容切换到所有jquery,但不幸的是,我刚刚进入ajax,需要做大量的研究。但与此同时,我做了/没有做的一些愚蠢的事情导致它甚至没有在chrome中加载xml文件。我试过了超越自我的把戏,但没用。游乐场的样品在这里。页面加载良好,但在选择其中一个值时,函数不会加载xml。我试着把它改为.onload,但仍然没有结果。很抱歉,我没有给你评分,你的答案也完全正确。我只是读了莫勒博士的第一本。非常感谢。在本例中如何附加该参数?我相信firebug会将响应显示为304.url=url+'?'+new Date.getTime,但是看到我更新的帖子了吗?上面的编辑成功了!奇怪的是为什么onclick没有启动,但非常感谢。对于部分选项nissan,这是可行的,但我得到了一个错误uncaughttypeerror:当我尝试选择第三个选项时,无法读取undefined的属性“firstChild”。知道吗?原来错误是我使用的是.nodeValue而不是.data。现在工作。