ajax关于主流中的异类：应对Opera（四）

修改示例以支持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。