在<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文档，定义了遍历这个树和检查、修改树的节点的方法和属性。
7.4.1、DOM眼中的HTML文档：树
在DOM眼中，HTML跟XML一样是一种树形结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。如下图：
这个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。
7.4.2、HTML文档的节点DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型： 接口 nodeType常量 nodeType值 备注
Element Node.ELEMENT_NODE 1 元素节点
Text Node.TEXT_NODE 3 文本节点
Document Node.DOCUMENT_NODE 9 document
Comment Node.COMMENT_NODE 8 注释的文本
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断
Attr Node.ATTRIBUTE_NODE 2 节点属性