![8d973d87510901cb71337c9d3d08abc2.png](https://i-blog.csdnimg.cn/blog_migrate/6efeac88646ef33d72e9e24e896ced39.jpeg)
案例1,注册页面时,提示用户名被占用
![ce4872ea1613b54b0dacbf63a1a455ba.gif](https://i-blog.csdnimg.cn/blog_migrate/b68b7ffff4c8c9e1c2f6c11a3076b7fd.gif)
思路:
1、用户书写用户名信息,在失去焦点时进行用户校验
2、失去焦点发送请求到服务器,服务器根据用户名信息去数据库中查询该用户名是否存在
3、将校验结果响应给客户端
4、在当前页面,也就用户名输入框后显示提示语
技术:
使用ajax技术
一般是需要先进行格式校验的,但这里仅演示校验是否是否注册用户名被占用
jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<head>
<base href="<%=basePath%>">
<title>Title</title>
<script type="text/javascript">
function checkUserNamer() {
//获取用户信息
var uname=document.getElementById("uname").value;
//创建ajax引擎对象
var ajax;
if (XMLHttpRequest){//其他浏览器
ajax=new XMLHttpRequest();
}else if(ActiveXObject){//ie浏览器
ajax = new ActiveXObject("Msxml2.XMLHTTP")
}else {
alert("浏览器版本过低,请及时更新浏览器");
return;
}
//声明监听函数
ajax.onreadystatechange=function () {
//判断ajax状态码
if (ajax.readyState==4){
//判断响应状态码
if (ajax.status==200){
//获取响应数据
var data = ajax.responseText;
if (eval(data)){
//处理响应数据
var usp = document.getElementById("usp");
usp.style.color="red";
usp.innerHTML="用户名存在,请重新命名";
}else {
//处理响应数据
var usp = document.getElementById("usp");
usp.style.color="green"
usp.innerHTML="用户名可用";
}
}
}
}
//创建并发送请求
ajax.open("get","register?uname="+uname);
ajax.send(null);
}
</script>
</head>
<body>
用户名:<input type="text" name="uname" id="uname" value="" onblur="checkUserNamer()"/><span id="usp"></span>
</body>
</html>
UserServlet
package com.lin.servlet;
import com.lin.pojo.User;
import com.lin.service.UserService;
import com.lin.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
public class UserRegister extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setContentType("text/html;charset=utf-8");
//获取请求信息
String uname = req.getParameter("uname");
//处理请求信息
UserService service = new UserServiceImpl();
User user= service.selUname(uname);
System.out.println(user);
if (user!=null){
resp.getWriter().write("true");
}else {
resp.getWriter().write("false");
}
}
}
UserService
package com.lin.service;
import com.lin.pojo.User;
import org.apache.ibatis.annotations.Param;
public interface UserService {
User selUname(@Param("uname") String uname);
}
UserServiceimpl
package com.lin.service.impl;
import com.lin.mapper.UserMapper;
import com.lin.pojo.User;
import com.lin.service.UserService;
import com.lin.util.MyBatisUtil;
import org.apache.ibatis.session.SqlSession;
public class UserServiceImpl implements UserService {
@Override
public User selUname(String uname) {
SqlSession session = MyBatisUtil.getSession();
UserMapper mapper = session.getMapper(UserMapper.class);
session.close();
return mapper.selUname(uname);
}
}
UserMapper
package com.lin.mapper;
import com.lin.pojo.User;
public interface UserMapper {
User selUname(String uname);
}
UserMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--
namespace: 命名空间, 可以随意定义, 一般情况下要写全限定路径
MyBatis管理SQL语句是通过namespace+id来定位的
-->
<mapper namespace="com.lin.mapper.UserMapper">
<select id="selUname" resultType="com.lin.pojo.User" >
select * from t_user where uname=#{uname}
</select>
</mapper>
个人封装ajax
纵观上面的ajax的流程书写我们可以发现是有许多东西可以提取的,提取后完全可以降低我们书写的重复冗余代码,实际上这里是可以不用看的,因为jQuery中有人比我们封装的更好,但是还是要领会一下封装的精髓-有复制粘贴的冲动的时候,就可以进行封装了
封装的js
/*
mothod : 请求方式
url : 请求地址
data : 请求参数 请求参数的格式为键值对格式的字符串,不同的键值对使用&符号隔开,如果没有请求数据传入null
示例:"a=1&b=2"
deal200 : 响应处理参数
该参数接收js的函数对象函数对象中声明ajax响应数据的处理逻辑代码
注意:函数对象需要声明一个形参用来接收要处理的响应数据
ansyc : 是否同步异步开启
* */
function myAjax(method,url,data,deal200,ansyc) {
//创建ajax引擎对象
var ajax;
if (XMLHttpRequest){//其他浏览器
ajax=new XMLHttpRequest();
}else if(ActiveXObject){//ie浏览器
ajax = new ActiveXObject("Msxml2.XMLHTTP")
}else {
alert("浏览器版本过低,请及时更新浏览器");
return;
}
//声明监听函数
ajax.onreadystatechange=function () {
if (ajax.readyState==4){
if (ajax.status==200){
//获取响应数据
var data = ajax.responseText;
if (deal200){//相当于Booleandeal200
deal200(data);
}
}
}
}
if ("get"==method.toLowerCase()){
//创建并发送请求
ajax.open("get",url+(data==null?"":"?"+data),ansyc);
ajax.send(null);
}else if ("post"==method.toLowerCase()){
//创建并发送请求
ajax.open("post",url+(data==null?"":"?"+data),ansyc);
//设置请求数据为键值对数据
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(data);
}
}
页面引用
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<head>
<base href="<%=basePath%>">
<title>Title</title>
<script type="text/javascript" src="js/AjaxUtil.js"></script>
<script type="text/javascript">
function checkUserNamer() {
//获取用户信息
var uname=document.getElementById("uname").value;
myAjax("get","register","uname="+uname,function (data) {
if (eval(data)){
//处理响应数据
var usp = document.getElementById("usp");
usp.style.color="red";
usp.innerHTML="用户名存在,请重新命名";
}else {
//处理响应数据
var usp = document.getElementById("usp");
usp.style.color="green"
usp.innerHTML="用户名可用";
}
})
}
</script>
</head>
<body>
用户名:<input type="text" name="uname" id="uname" value="" onblur="checkUserNamer()"/><span id="usp"></span>
</body>
</html>
上面已经介绍了一下自己封装ajax的流程,那这里呢就开始介绍学习jQuery中为我们封装的ajax,我们自己封装的不是不好,而是考虑的没有有多年工作经验的别人封装的好,所以既然有更好的工具,为什么不能拿来用呢?
jquery是js的一个轻量型框架,已经将jis创建的操作进行了封装,而ajax也是js的一部分,所以jQuery也已经将ajax进行了封装。
jQuery对ajax有很好的支持, 分为三个层次:
> 第一级别: $.ajax: 最基本的封装
> 第二级别:
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
- $.get(url,data,fun)
示例:
url:请求地址
data:请求参数,参数格式为json对象
fun:回调函数,主义要声明一个形参,用来接收响应数据
$.get("register",{uname:$("#uname").val()},function (data) {
})
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
- $.post(url,data,fun)
示例:
url:请求地址
data:请求参数,参数格式为json对象
fun:回调函数,注意要声明一个形参,用来接收响应数据
$.post("register",{uname:$("#uname").val()},function (data) {
})
- $.getJSON(json格式参数)
参照api吧- -
> 第三级别: obj.load
如果有特殊的订制要求,可以使用。
jQuery.ajax()
使用jQuery封装的ajax写的页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<head>
<base href="<%=basePath%>">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" >
//页面加载后开始执行
$(function () {
//给用户名文本框添加失去焦点事件
$("#uname").blur(function () {
//发起ajax请求,校验用户名是否被注册
$.get("register",{uname:$("#uname").val()},function (data) {
if (eval(data)){
//处理响应数据
var usp = document.getElementById("usp");
usp.style.color="red";
usp.innerHTML="用户名存在,请重新命名";
}else {
//处理响应数据
var usp = document.getElementById("usp");
usp.style.color="green"
usp.innerHTML="用户名可用";
}
})
})
})
</script>
</head>
<body>
用户名:<input type="text" name="uname" id="uname" value=""/><span id="usp"></span>
</body>
</html>
![f61c443b4f5f8f0fdfe27970d7947426.png](https://i-blog.csdnimg.cn/blog_migrate/d1ef484db8794cb8c77776aae69e892b.jpeg)
写法代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<style>
#box {
width: 300px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getMsg3() {
// load方法, 发送一次get方式的ajax请求, 将响应内容填充到元素内显示
// url, data, callback
$("#box").load("demo", function() {
alert("操作完成!");
});
}
function getMsg2() {
// $.get用于发送一次get方式的ajax请求
// $.post用于发送一次post方式的ajax请求
// 有四个参数, url, data, success, dataType
$.post("demo", {"username":"zhangsan", "password" : "123"}, function(data) {
$("#box").html(data);
}, "html");
}
function getMsg() {
// $.ajax, 需要传递的参数可以使用json格式的对象来表示
$.ajax({
"url" : "demo1234", // 请求路径
"type" : "post", // 请求方式
"data" : {"username":"zhangsan", "password" : "123"},// 携带的数据
"dataType" : "html", // 预期响应数据的格式
"async" : true, // 是否使用异步请求
"success" : function(data) {
$("#box").html(data);
},
"error" : function() {
alert("服务器忙...");
}
});
}
</script>
</head>
<body>
<div id="box"></div>
<input type="button" value="getMsg" onclick="getMsg3();">
<script>
document.write(Math.random());
</script>
</body>
</html>