客户端:
实现注册的功能,对用户名进行验证
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册界面</title>
<script type="text/javascript">
//验证用户名是否重复
function checkName(obj) {
//1.根据浏览器创建异步引擎对象
xhr = createXMLHttpRequest();
//2.设置异步引擎对象的属性
//2.1设置回调方法
xhr.onreadystatechange = callback;
//2.2设置请求路径和请求方式
xhr.open("POST", "http://localhost:8080/RegisterAjax03/system/checkName.do", true);
//2.3设置请求的头文件信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.调用异步引擎对象的send方法请求,并传递请求的参数
//3.1数据打包
var data = "username=" + obj.value;
//3.2发送请求
xhr.send(data);
}
function createXMLHttpRequest() {
//ie8以上的浏览器创建异步引擎对象
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
function callback() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText.replace(/\r\n/g,'');
if ("success" == data) {
document.getElementById("message").innerHTML = "该用户名可以使用";
flag = true;
} else if ("fail" == data){
document.getElementById("message").innerHTML = "对不起,该用户名已经被占用";
flag = false;
}
}
}
function isLogin() {
if (flag == true) {
//1.根据浏览器创建异步引擎对象
xhr = createXMLHttpRequest();
//2.设置异步引擎对象的属性
//2.1设置回调方法
xhr.onreadystatechange = callbacklogin;
//2.2设置请求路径和请求方式
xhr.open("POST", "system/register.do", true);
//2.3设置请求的头文件信息
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//3.调用异步引擎对象的send方法请求,并传递请求的参数
//3.1数据打包
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = "username=" + username + "&password=" + password;
//3.2发送请求
xhr.send(data);
}else{
alert("请重新设置用户名");
}
}
function callbacklogin() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;
alert("注册成功");
}
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>用户名:</td>
<td><input type="text" id="username" οnblur="checkName(this)" /></td>
<td><span id="message"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="password" /></td>
<td></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button"
οnclick="isLogin()" value="注册" /></td>
</tr>
</table>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录界面</title>
<script type="text/javascript">
function isLogin() {
xhr = createXMLHttpRequest();
xhr.onreadystatechange = callBack;
xhr.open("POST", "http://127.0.0.1:8080/LoginAjax03/system/login.do",
true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = "username=" + username + "&password=" + password;
xhr.send(data);
}
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
function callBack() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText.replace(/\r\n/g,'');
if (data == "no") {
alert("登录失败,请仔细核对用户名和密码");
} else if (data == "yes") {
alert("登录成功")
}
}
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>用户名:</td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="password" /></td>
<td></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button"
οnclick="isLogin()" value="登录" /></td>
</tr>
<tr>
<td colspan="2" align="right"><a href="register.jsp">用户注册入口</a>
</td>
</tr>
</table>
</body>
</html>
package com.system.controller;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.util.DBUtil;
public class CheckNameController extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
// 数据库查询
Connection conn = null;
PreparedStatement pre = null;
ResultSet rs = null;
String data = "";
try {
conn = DBUtil.getConn();
String sql = "select username from t_login where username=?";
pre = conn.prepareStatement(sql);
pre.setString(1, username);
rs = pre.executeQuery();
if (rs.next()) {
data = "fail";
} else {
data = "success";
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pre, conn);
request.setAttribute("data1", data);
request.getRequestDispatcher("/checknamedata.jsp").forward(request, response);
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
}
服务端:
跨域实现用户的登录
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
${data }
package com.system.controller;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.util.DBUtil;
public class LoginController extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET");
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
Connection conn = null;
PreparedStatement pre = null;
ResultSet rs = null;
String data = "";
try {
conn = DBUtil.getConn();
String sql = "select * from t_login where username = ? and password = ?";
pre = conn.prepareStatement(sql);
pre.setString(1, username);
pre.setString(2, password);
rs = pre.executeQuery();
if (rs.next()) {
data = "yes";
}else{
data = "no";
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
request.setAttribute("data", data);
request.getRequestDispatcher("/data.jsp").forward(request, response);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
}
注意的几个点:
1.ajax从后台返回的值默认带一行空白行,需要对数据进行处理
var data = xhr.responseText.replace(/\r\n/g,'');
2.跨域请求的关键代码
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET");
3.在写代码中发现不同程序的返回值要用不同的data.jsp去处理,否则没有效果