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> 

 

你可能感兴趣的:(Ajax获得站点文件内容实例)