南京工业大学电子与信息工程学院
实 验 报 告
（ 2013 — 2014 学年 第 二 学期 ）
实验名称： AJAX
实训
班 级：
学 号：
姓 名：
指导教师： 段江
1 个人网站首页（必须包括个人简介（可以包括其他信息），包含注册页面
导航，登录页面导航，自定义标签页面导航）
1.1 简单文字说明（10 分）
整个 project 做的比较简单，但是基本的功能能够满足要求。这次的 project
主要应用了 Ajax 书中的第五章以及第七章中的知识点来实现其主要的功能，在
此过程中遇到了一些麻烦，特别在做自定义标签的时候输入用户名之后密码一
直都是 undefined，通过同学的帮助和老师的指导，找到了错误所在。我的个人
页面中包含了注册、登录、自定义标签以及个人基本信息的链接的实现。
1.2 首页效果图（5 分）
2 注册页面
2.1 注 册 页
面 效 果
图 （ 5
分）
2.2 用
户名已存在提示
2.2.1 建立 msql 数据库（5 分）
建库语句 create database ajaxs;
2.2.2 建立 mysql 数据表（5 分）
建表语句
USE ajaxs;
CREATE TABLE USERS(
USERNAME VARCHAR(50) PRIMARY KEY,
PASSWORD VARCHAR(50));
2.2.3 客户端函数---创建 xmlHTTPrequse 对象（5 分）
var req;
function validateUsername( ) {
Var url = "username?value=" +
encodeURI(document.getElementById("ajax_username").value);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest( );
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("Get", url, true);
req.onreadystatechange = callbackUsername;
req.send(null);
}
function validateUsername1( ) {
var url = "username?value=" +
encodeURI(document.getElementById("ajax_name").value);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest( );
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("Get", url, true);
req.onreadystatechange = callbackUsername;
req.send(null);
}
function signup( ) {
var name = document.getElementById("ajax_username").value;
var pass = document.getElementById("ajax_password").value;
var url = "signup?value=" + encodeURI(name) + "&vepass=" + encodeURI(pass);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest( );
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("Get", url, true);
req.onreadystatechange = callbacku;
req.send(null);
}
2.2.4 服务器端 Serlvet 根据客户端传来的用户名插入数据库，返回结果给
客户端（5 分）
private boolean existsUsername(String username) {
ResultSet result = null;
try {
Statement select = DatabaseConnector.getConnection( ).createStatement( );
String sql="SELECT * from USERS where USERNAME = '" + username +
"';";
result = select.executeQuery(sql);
if (result == null || result.next( )) {
return true;
}
} catch (SQLException e) {
}
return false;
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//processRequest(request, response);
String username = request.getParameter("value");
if (username!= null) {
if (existsUsername(username)) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter( ).write("true");
}
} else {
// if key comes back as a null, return a message
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter( ).write("Username null");
}
}
2.2.5 客户端的回调函数（5 分）
function callbackUsername( ) {
if (req.readyState == 4) {
if (req.status == 200) {
usernameCheck( );
}
}
}
function usernameCheck( ) {
- 1
- 2
前往页