ajax關於主流中的異類：應對Opera（四）

時間 2020-08-21

標籤 ajax 關於主流異類應對 opera 欄目 Ajax 简体版

原文原文鏈接

修改示例以支持Operajavascript

<!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。html