ajax下拉選單

摘要:ajax下拉選單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>

</head>

<body>
<script>
function creatRequestObj(){
var request = null;
try {
//IE7,or non-IE browser
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
//IE browser
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
//other IE browser
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
//not support
request = null;
}
}
}
return request;
}

//create XMLHttpRequest Object
var request = null;
request = creatRequestObj();
if (request == null){
//無法取得XMLHttpRequest物件時發出警告
alert("Error creating request object!");
}

//Send data to Server
function sendData() {
var url = "ajax.php";
request.open("GET", url, true);//開啟連線,選擇連線方式GET,POST
request.onreadystatechange = updatePage;//狀態完成時所要執行的函式
request.send(null);//送出

}

function updatePage() {
if (request.readyState == 4) {//完成狀態有好幾種,4代表資料傳回完成
var data = request.responseText;//取得傳回的資料存在變數中

document.getElementById("show").innerHTML=data;

}
}

</script>
<h1>Hello~ Ajax</h1>

<select onChange="sendData();" >
<option>11111</option>
<option>11111</option>
<option>11111</option>
</select>

<div id="show"> </div>
</body>
</html>

ajax

<?php

   echo "<select>";
   echo "<option>55555</option>";
   echo "</select>";
?>