AJAX开发简略 (第二部分)
a 浏览器http_request = new XMLHttpRequest();if (http_request.overrideMimeType) {//设置MiME类别http_request.overrideMimeType("text/xml");}}else if (window.ActiveXObject) { // IE浏览器try {http_request = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {http_request = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {}}}if (!http_request) { // 异常，创建对象实例失败window.alert("不能创建XMLHttpRequest对象实例.");return false;}http_request.onreadystatechange = processRequest;// 确定发送请求的方式和URL以及是否同步执行下段代码http_request.open("GET", url, true);http_request.send(null);}// 处理返回信息的函数 function processRequest() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回，开始处理信息 alert(http_request.responseText); } else { //页面不正常 alert("您所请求的页面有异常。"); } } }</script>7.3、简单的示例
接下来，我们利用上面的开发框架来做两个简单的应用。
A、数据校验
在用户注册的表单中，经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口，或者window. showModalDialog的对话框。不过，这两个都需要打开窗口。采用AJAX后，采用异步方式直接将参数提交到服务器，用window.alert将服务器返回的校验信息显示出来。代码如下：
我们在第五部分提到利用AJAX改进级联菜单的设计。接下来，我们就演示一下如何“按需取数据”。
接下来，我们利用上面的开发框架来做两个简单的应用。
A、数据校验
在用户注册的表单中，经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口，或者window. showModalDialog的对话框。不过，这两个都需要打开窗口。采用AJAX后，采用异步方式直接将参数提交到服务器，用window.alert将服务器返回的校验信息显示出来。代码如下：
在<body></body>之间增加一段form表单代码：
<form name="form1" action="" method="post">
用户名：<input type="text" name="username" value="">
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
<input type="submit" name="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 width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="20"><a href="javascript:void(0)" onClick="showRoles(''pos_1'')">经理室</a></td> </tr> <tr style="display:none"> <td height="20" id="pos_1"> </td> </tr> <tr> <td height="20"><a href="javascript:void(0)" onClick="showRoles(''pos_2'')">开发部</a></td> </tr> <tr style="display:none "> <td id="pos_2" height="20"> </td>