精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站开发>ajax教程>正文

AJAX开发简略 (第二部分)


来源:柯自聪 时间:06-11-28 点击: 点击这里收藏本文
7.3、简单的示例
  接下来,我们利用上面的开发框架来做两个简单的应用。

A、数据校验
  在用户注册的表单中,经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口,或者window. showModalDialog的对话框。不过,这两个都需要打开窗口。采用AJAX后,采用异步方式直接将参数提交到服务器,用window.alert将服务器返回的校验信息显示出来。代码如下:

  在<body></body>之间增加一段form表单代码:

<form name="form1" action="" method="post">
用户名:<input type="text" name="username" value="">&nbsp;
<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中实现更复杂的功能。最后,只要将反馈信息打印出来就可以了。


B、级联菜单
  我们在第五部分提到利用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>
    </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="" %>
9 7 3 1 2 3 4 5 6 7 8 9 10 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.