一个简单的Ajax实例:选择一部著作,会通过 Ajax 实时获得相关的名字。
把4个html文件放到 web站点 的同一个文件下。
index.html
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<title>一个简单的不涉及服务器的Ajax实例</title>
<script type=\"text/javascript\">
// 声明一个引用 XMLHttpRequest 的变量
var xhr = null;
// 选择一个著作时调用的函数
function updateCharacters() {
var selectShow = document.getElementById(\"selShow\").value;
if (selectShow == \"\") {
document.getElementById(\"divCharacters\").innerHTML = \"\";
return ;
}
// 实例化一个 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
// 非IE
xhr = new XMLHttpRequest();
} else {
// IE
xhr = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
xhr.onreadystatechange = callbackHandler;
url = selectShow + \".html\";
xhr.open(\"post\", url, true);
xhr.send(null);
}
// this is the function that will repeatedly be called by our
// XMLHttpRequest object during the life cycle of request
function callbackHandler() {
if (xhr.readyState == 4) {
document.getElementById(\"divCharacters\").innerHTML = xhr.responseText;
}
}
</script>
</head>
<body>
我们的第一个Ajax实例
<br></br>
选择一个名著:
<br>
<select onchange=\"updateCharacters();\" id=\"selShow\">
<option value=\"\"></option>
<option value=\"xyj\">西游记</option>
<option value=\"hlm\">红楼梦</option>
<option value=\"shz\">水浒传</option>
<option value=\"sgyy\">三国演义</option>
</select>
<br></br>
返回,名著中主要任务:
<br>
<div id=\"divCharacters\">
<select>
</select>
</div>
</body>
</html>
xyj.html
<select>
<option>唐僧</option>
<option>孙悟空</option>
<option>猪八戒</option>
<option>唐僧</option>
<option>观音姐姐</option>
<option>西天如来</option>
</select>
hlm.html
<select>
<option>贾宝玉</option>
<option>林黛玉</option>
<option>薛宝钗</option>
</select>
shz.html
<select>
<option>林冲</option>
<option>李逵</option>
<option>宋江</option>
<option>时迁</option>
</select>
sgyy.html
<select>
<option>刘备</option>
<option>关羽</option>
<option>张飞</option>
<option>曹操</option>
<option>小乔</option>
<option>诸葛亮</option>
</select>
本文地址:https://www.stayed.cn/item/8438
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我