1.背景
在很多网站上实现注册功能的时候,书要输入用户名,光标离开文本框的时候,提示:用户名已经存在。
1.1技术概述
【AJAX】
1.AJAX:异步的JavaScript And XML。
- 使用的是老技术,用的是新思想。
了解同步和异步的区别:
AJAX的功能,完成页面的局部刷新,不中断用户的体验。
有了AJAX后,可以将部分代码写到客户端浏览器:RIA:rich Internet Appication. FLEX:AS 脚本编程。
XML:使用XML作为数据传递的格式:JSON:
【XMLHttpRequest】
属性:
- onreadystatechange:当XMLHttpRequest状态改变的时候触发的一个函数。
- readyState : XMLHttpRequest的状态(0 未初始化,1初始化,2发送数据,3数据传送中,4完成)
- status:获得响应吗的状态码
- responseText:获得响应的文本信息
- responseXML:获得响应的XML数据
方法
- open(请求方式,请求路径,是否异步)—一步向服务器发送请求;
- send(请求参数)—发送请求
- sendRequestHeader(头信息,头的值)—–处理POST请求方式的中文问题
创建XMLHttpRequest对象:
- IE:将XMLHttpRequest对象封装在一个ActiveXObject组件。
- FireFox:直接创建XMLHttpRequest对像。
【AJAX的入门】
AJAX的编写的步骤
- 第一步:创建异步的对象
- 第二部:设置对象状态的改变的触发
- 第三部:设置向后台提交的路径
- 第四部:发送请求的命令
GET方式提交请求
【案例】
JSP页面
<%@ 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>Ajax Get</title>
<script type="text/javascript" src="${ pageContext.request.contextPath }/01_Ajax_get/ajaxGet.js">
</script>
</head>
<body>
<div id="d1" style="width:300px;height:300px;border:1px solid blue">
</div>
<input id="bt1" type="button" value="AJAX get request" onclick="ajax_get()">
</body>
</html>
js页面
function ajax_get(){
// 创建异步请求对象
var xhr = createXMLHttp();
// 设置状态改变的监听 回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//请求成功
if(xhr.status == 200){//响应成功
// 获取响应的数据
var data=xhr.responseText;
// 将数据写入到DIV中
document.getElementById("d1").innerHTML = data;
}
}
}
// 设置请求路径,get 请求的参数要写在路径的后面
xhr.open("GET","/day15AJAX/ServletDemo1?name=aaa&password=1234",true);
// 发送请求
xhr.send(null);
}
function createXMLHttp(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return xmlHttp;
}
Servlet
package com.itheima.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ServletDemo1")
public class ServletDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// System.out.println("hello...");
String name = request.getParameter("name");
String password = request.getParameter("password");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("hello ajax ....+"+name+"\t"+password);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
POST方式提交请求
*修改C:\tomcat\conf\web.xml中的Servlet-lists属性为true,可以不同输入地址后面的路径:http://localhost:8080/AJAX 下面的列表都会显示出来jsp
<%@ 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>Insert title here</title>
<script type="text/javascript" src="${ pageContext.request.contextPath }/02_ajax_post/ajaxPost.js">
</script>
</head>
<body>
<div id="d1" style="width:300px;height:300px;border:1px solid blue">
</div>
<input id="bt1" type="button" value="AJAX get request" onclick="ajax_post()">
</body>
</html>
js
function ajax_post(){
// 创建异步请求对象
var xhr = createXMLHttp();
// 设置状态改变的监听 回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//请求成功
if(xhr.status == 200){//响应成功
// 获取响应的数据
var data=xhr.responseText;
// 将数据写入到DIV中
document.getElementById("d1").innerHTML = data;
}
}
}
// 设置请求路径,get 请求的参数要写在路径的后面
xhr.open("POST","/day15AJAX/ServletDemo1",true);
// 发送请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=奚唐敏&password=123");
}
function createXMLHttp(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return xmlHttp;
}
servlet
package com.itheima.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ServletDemo1")
public class ServletDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// System.out.println("hello...");
String name = request.getParameter("name");
String password = request.getParameter("password");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("hello ajax get....+"+name+"\t"+password);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// doGet(request, response);
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("hello ajax post....+"+name+"\t"+password);
}
}
3.验证用户是否存在
【步骤一】:创建表和数据库
【步骤二】:设计一个注册页面
【步骤三】:在用户名的文本框中使用onblur时间触发一个函数
【步骤四】:AJAX的异步操作,将文本框的值传到Servlet中
【步骤五】:Servlet中根据传入的用户名去数据库进行查询
【步骤六】:处理查询结果。
js
function checkUsername(){
var username = document.getElementById("username").value;
// 创建异步请求对象
var xhr = createXMLHttp();
// 设置状态改变的监听 回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//请求成功
if(xhr.status == 200){//响应成功
var data = xhr.responseText;
if(data == 1){
document.getElementById("s1").innerHTML = "<font color='green'>could be</font>";
}else{
document.getElementById("s1").innerHTML = "<font color='green'>couldn't be</font>";
}
}
}
}
// 设置请求路径,get 请求的参数要写在路径的后面
xhr.open("GET","/day15AJAX/ServletDemo2?username="+username,true);
// 发送请求
xhr.send(null);
}
function createXMLHttp(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return xmlHttp;
}
jsp
<%@ 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>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/03_ajax_register/ajaxRegister.js"></script>
</head>
<body>
<div id="d1" style="width:300px;height:300px;border:2px solid blue">
<table>
<tr>
<td>username:</td>
<td><input id="username" type = "text" name = "username" onblur="checkUsername()"><span id="s1"></span></td>
</tr>
<tr>
<td>password:</td>
<td><input type = "text" name = "username"><span id="s1"></span></td>
</tr>
<tr>
<td>nickname:</td>
<td><input type = "text" name = "username"><span id="s1"></span></td>
</tr>
<tr>
<td>type:</td>
<td><input type = "text" name = "username"><span id="s1"></span></td>
</tr>
<tr>
<td>regiter</td>
<td><input id="d12" type = "submit" value = "register" ></td>
</tr>
</table>
</div>
</body>
</html>
servlet
package com.itheima.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Domain.User;
import Service.UserService;
/**
* 异步校验用户名
*/
@WebServlet("/ServletDemo2")
public class ServletDemo2 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().println("hello hhl");
try{
// 接受参数
String username = request.getParameter("username");
System.out.println("name:"+"\t"+username);
// 调用业务层
UserService userService = new UserService();
User user = userService.findByUsername(username);
if (user == null) {
// 用户名可以注册
response.getWriter().println(1);
}else{
// 用户名已存在
response.getWriter().println(0);
}
}catch (Exception e) {
// TODO: handle exception
throw new RuntimeException();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}