修改示例以支持Opera
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<button>Apples</button>
<button>Cherries</button>
<button>Bananas</button>
</div>
<div id="target">
press a button
</div>
<script type="text/javascript">
var buttons=document.getElementsByTagName("button")
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
var httpRequest;
function handleButtonPress(e){
httpRequest=new XMLHttpRequest();
httpRequest.onreadystatechange=handleResponse;
httpRequest.open("GET",e.target.innerHTML+".html")
httpRequest.send()
}
function handleResponse(){
if(httpRequest.readyState==4&&httpRequest.status==200){
document.getElementById("target").innerHTML=httpRequest.responseText;
}
}
</script>
</body>
</html>
第一个问题是Opera在触发readystatechange事件时不会生成一个Event对象。这就意味着必须把XMLHttpRequest对象指派给一个全局变量,这样才能在以后引用它。我定义一个名为的var,随后在handleButtonPress函数创建对象以及handleResponse函数处理已经完成的请求时调用了它。看上去可能不像是什么大问题,但如果用户在请求处理过程中按下按钮,全局变量就会被指派给一个新的XMLHttpRequest对象,你就无法再与原来那个请求交互了。
第二个问题是Opera没有在XMLHttpRequest对象上定义就绪状态常量,这就意味着你必须用之前表格中展示的数值来比对readyState属性的值。必须得检测4个值,而不是XMLHttpRequest.DONE。