第一个Ajax实例
工作中，经常涉及到一些棘手的问题：可以使用Ajax轻松搞定。
但是由于本人不了解Ajax技术，所以没有贸然将Ajax技术添加到项目中。
通过一些其他手段，实现了相仿的功能，显然：走了很多的弯路。
最近，比较清闲，就通过卓越亚马逊，订购一本《DWR实践》。
开始了，Ajax学习之旅... ...
在此申明：
我的随笔中，绝大多数的代码，摘录之《DWR实践》一书。
通过摘录于此，绝无商业侵权之意，纯粹是个人学习的需要。
下面是第一个Ajax实例：
不用通过Web 服务器，简单实现Ajax效果，可以清晰地了解到Ajax的实现原理
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>一个简单的不涉及服务器的Ajax实例</title>
<script type="text/javascript">
//this is a reference to an XMLHttpRequest object
var xhr = null;
//this function is called any time a selection is made in the first
function updateCharacters(){
var selectShow = document.getElementById("selShow").value;
if(selectShow == ""){
document.getElementById("divCharacters").innerHTML = "";
return ;
}
//instantiate an XMLHttpRequest object
if(window.XMLHttpRequest){
// Non-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>