<body>
<form action="">
<select id="college" name="college" ></select>
</form>
<script>
var xmlHttp = "";
function getXmlHttpRequest(){
if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
else
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
return xmlHttp;
}
function checkName()
{
//獲得HttpRequest對象
xmlHttp = getXmlHttpRequest();
//得到url
url="jsonserver.jsp";
//打開請求
xmlHttp.open("get",url,true);
//指定回調函數
xmlHttp.onreadystatechange = getResult;
//向服務器發送請求
xmlHttp.send(null);
}
function getResult()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
//eval 將json格式轉化爲javascript類型的字符串，但是注意eval可能對本地計算機具有不安全性
var result = eval('('+xmlHttp.responseText+')');
for(var i=0;i<result.length;i++)
{
document.getElementById("college").options.add(new Option(result[i].cname,result[i].vlaue));
}
}
}
document.onreadystatechange = getCollege;//獲取列表內容
function getCollege()
{
if(document.readyState == "complete")
checkName();
}
</script>
</body>
</html>
jsonserver.jsp
<%
response.setHeader("Content-Type","text/xml");
response.setHeader("charset","utf-8");
String result ="[{\"value\":0,\"cname\":\"軟件學院\"},{\"value\":\"1\",\"cname\":\"計算機學院\"}]";
System.out.println(result);
out.print(result);
out.flush();
%>