在<body></body>之间增加一段form表单代码：
<form action="" method="post">用户名：<input type="text" value="">
<input type="button" value="唯一性检查">
<input type="submit" value="提交">
</form>
在开发框架的基础上再增加一个调用函数：
function userCheck() { var f = document.form1; var username = f.username.value; if(username=="") { window.alert("用户名不能为空。"); f.username.focus(); return false; } else { send_request('sample1_2.jsp?username='+username); } }看看sample1_2.jsp做了什么：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %> <% String username = request.getParameter("username"); if("educhina".equals(username)) out.print("用户名已经被注册，请更换一个用户名。"); else out.print("用户名尚未被使用，您可以继续。"); %>运行一下，嗯，没有弹出窗口，没有页面刷新，跟预想的效果一样。如果需要的话，可以在sample1_2.jsp中实现更复杂的功能。最后，只要将反馈信息打印出来就可以了。
我们在第五部分提到利用AJAX改进级联菜单的设计。接下来，我们就演示一下如何“按需取数据”。
首先，在<body></body>中间增加如下HTML代码：
<table cellspacing="0" cellpadding="0"> <tr> <td> <a href="javascript:void(0)">经理室</a> </td> </tr> <tr> <td> </td> </tr> <tr> <td> <a href="javascript:void(0)">开发部</a> </td> </tr> <tr> <td> </td> </tr> </table>在框架的基础上增加一个响应函数showRoles(obj)：
//显示部门下的岗位 function showRoles(obj) { document.getElementById(obj).parentNode.style.display = ""; document.getElementById(obj).innerHTML = "正在读取数据..." currentPos = obj; send_request("sample2_2.jsp?playPos="+obj); }修改框架的processRequest函数：
// 处理返回信息的函数 function processRequest() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回，开始处理信息 document.getElementById(currentPos).innerHTML = http_request.responseText; } else { //页面不正常 alert("您所请求的页面有异常。"); } } }最后就是smaple2_2.jsp了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %><%
String playPos = request.getParameter("playPos"); if("pos_1".equals(playPos)) out.print(" 总经理<br> 副总经理"); else if("pos_2".equals(playPos)) out.println(" 总工程师<br> 软件工程师");
%>
运行一下看看效果：
文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持Javascript的所有浏览器都支持DOM。本文所涉及的DOM，是指W3C定义的标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历这个树和检查、修改树的节点的方法和属性。
1