客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
| 一个简单的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> |
请发表评论