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