1
实验项目名称：
Ajax实现用户注册
一、实验目的和要求：
1. 了解Ajax的开发模式；
2. 掌握Ajax使用的技术；
3. 掌握Ajax的工作流程；
4. 掌握Ajax重构。
二、实验环境：
MyEclipse
三、预习内容：
1. Ajax的工作流程
2. Ajax重构
四、实验内容
1、建立数据库db和表user
2、创建项目并导入所需的包
3、实现Ajax重构
4、设计首页
5、设计用户注册页面
6、验证输入信息的有效性
7、保存用户注册信息
8、实时显示用户信息
注：（参照P291—P303）
在实验内容部分要进行
适当的扩展，并写出部分关
键代码。内容在3页—4页之
间。
2
五、总结
写出个人上机遇到的问题，以及收获，心得等。
课题：用户注册管理系统第1章概述第2章需求分析第3章功能设计第4章设计思路第5章关键代码第6章设计总结第1章概述1.1JAVA简介：Java是一种简单易用、完全面向对象、具有平台无关性且安全可靠的主要面向Internet的开发工具。
自从1995年正式问世以来，Java的快速发展已经让整个Web世界发生了翻天覆地的变化.Java无处不在，可应用于任何地方、任何领域。
Oracle公司董事长和首席执行官Larru Ellison说过;“Java 正在进入企业、家庭和学校.它正像Internet本身一样成为普遍存在的技术。
”1。
2运行环境系统：Windows 7JDK版本:8.0开发平台：Net Beans数据库：SQL2005第2章需求分析任何一个优秀的程序都有一个优秀的登录注册界面，因为能给用户好的第一印象，所以一个好的注册界面对一个程序来说很重要,是必不可少的。
第3章功能设计1、能够实现用户的快速注册，而且画面简单易懂.第4章设计思路4。
1设计思路登录界面点击注册，跳转到注册界面，提供了（用户名，密码,邮箱，电话，真实姓名，身份证号)等功能.4。
2数据库设计数据库在一个信息管理系统中占有非常重要的地位,数据库结构设计的好坏将直接对应用系统的效率，以及实现的效果产生影响.合理的数据库结构设计可以提高数据存储的效率,保证数据的完整和一致。
每个表的逻辑功能结构设计如下：普通用户信息表User，记录普通用户的信息管理员用户信息表Administer，记录管理员信息。
连接数据库的代码：代码1：Connection conn = null; // 创建Connection对象try ｛Class.forName（"com.microsoft。
sqlserver.jdbc。
SQLServerDriver"）; // 加载数据库驱动String url = ”jdbc:sqlserver://localhost:1433；databaseName=软件注册"；// 指定连接数据库的URLString user = "sa"；// 指定连接数据库的用户名String passWord = ”123456”; // 指定连接数据库的密码conn = DriverManager.getConnection(url, user，passWord）;Statement statement = conn.createStatement（)；ResultSet rs = statement。
实例通过 AJAX 加载一段文本： jQuery 代码： $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"",async:false}); $("#myDiv").html(htmlobj.responseText); }); });HTML 代码： <div id="myDiv"><h2>321 导航</h2></div> <button id="b01" type="button"></button>亲自试一试定义和用法ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。
简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建 的 XMLHttpRequest 对象。
大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获 得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
语法jQuery.ajax([settings])参数 settings描述 可选。
用于配置 Ajax 请求的键值对集合。
可以通过 $.ajaxSetup() 设置任何选项的默认值。
参数 options 类型：Object可选。
AJAX 请求设置。
所有选项都是可选的。
async 类型：Boolean 默认值: true。
默认设置下，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设 置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
AJAX在Java Web中的应用实例AJAX在Java Web中的实际应用：实例一：会员注册唯一性检查TestAjax (1)实例二：动态更新下拉列表TestAjaxXml (6)实例三：刷新页面局部内容（TestAjaxUpdateCounter） (7)实例四：交互式电子相册（TestAjaxPhoto） (9)实例五：访问Web服务（TestAjaxWebService） (11)实例六：创建工具提示（TestAjaxTool） (12)实例一：会员注册唯一性检查TestAjax会员注册唯一性检查的业务逻辑由一个名为CheckUser.java（见例程1）的HttpServlet 来实现，CheckUser在web.xml中配置（见例程2），然后在会员注册页index.htm（见例程3）中使用AJAX技术异步调用CheckUser完成会员注册有效性的检查。
操作步骤如下：1. 首先，创建一个Web工程TestAjax，步骤如下图所示：2. 然后，创建一个index.htm页面，在index.htm中放置一个表单用于提交验证数据，见例程3。
例程3使用AJAX技术的测试页面index.htm<html><head><title>注册用户唯一性检查</title><meta http-equiv="content-type" content="text/html; charset=gb2312"></head><script language="javascript">//定义一个变量用于存放XMLHttpRequest对象var xmlHttp;//该函数用于创建一个XMLHttpRequest对象function createXMLHttpRequest() {if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}}//这是一个启动AJAX异步通信的方法function beginCheck(){var tempLoginName = document.all.loginName.value;if (tempLoginName == ""){//如果尚未输入注册名alert("对不起，请您输入注册名!");return;}//创建一个XMLHttpRequest对象createXMLHttpRequest();//将状态触发器绑定到一个函数xmlHttp.onreadystatechange = processor;//通过GET方法向指定的URL建立服务器的调用xmlHttp.open("GET", "CheckUser?loginName="+tempLoginName);//发送请求xmlHttp.send(null);}//这是一用来处理状态改变的函数function processor () {//定义一个变量用于存放从服务器返回的响应结果var responseContext;if(xmlHttp.readyState == 4) { //如果响应完成if(xmlHttp.status == 200) {//如果返回成功//取出服务器的响应内容responseContext = xmlHttp.responseText;//如果注册名检查有效if (responseContext.indexOf("true")!=-1){alert("恭喜您，该注册名有效！");}else{alert("对不起，该注册名已被使用！");}}}}</script><body><form name="form1" action="CheckUser" method="post">请输入用户名：<input name="loginName" type="text" id="loginName"><input name="checkLoginName" value="有效性检查" onclick="beginCheck()" type="button"> </form></body></html>3. 接下来，创建一个名为CheckUser.java（见例程1）的HttpServlet来处理从index.htm 提交的请求，步骤如下图所示：例程1 CheckUser.java import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CheckUser extends HttpServlet {public CheckUser() {super();}public void destroy() {super.destroy();}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request,response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");PrintWriter out = response.getWriter();//这里假设已经注册过了四位用户String[] logined = {"admin","users","dywdyw","liubin"};//接收从客户端提交的loginName参数String loginName=request.getParameter("loginName");//创建一个存放响应内容的字符串String responseContext = "true";for(int i=0;i<logined.length;i++){//遍历已注册用户列表，如果发现提交的注册名已存在，则修改响应内容if(loginName.equals(logined[i])) responseContext = "false";}//将处理结果返回给客户端out.println(responseContext);out.flush();out.close();}public void init() throws ServletException {}}4. 最后在index.htm中加入AJAX通信代码，实现与服务端的异步通信。
