Ajax获得站点文件内容实例

一个简单的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>

 

posted @ 2014-05-14 14:08  技术狂  阅读(433)  评论(0)  编辑  收藏  举报