大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > Ajax获得站点文件内容实例

Ajax获得站点文件内容实例

关键词:站点文件内容Ajax  阅读(504) 赞(12)

[摘要]本文是对Ajax获得站点文件内容实例的讲解,对学习JavaScript编程技术有所帮助,与大家分享。

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


相关评论