ajax
同步现象：
客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。
异步现象：
客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。
简单来说：就是在一个网页上，实现局部刷新可以用ajax技术。
运行原理：
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
JSON数据格式：
作用：json是一种与语言无关的数据交换的格式，使用后台数据交换，移动端与服务端的进行前据交换。
json格式：
1）对象格式：{"key1":obj,"key2":obj,"key3":obj...}
2）数组/集合格式：[obj,obj,obj...]
注意：对象格式和数组格式可以互相嵌套
注意：json的key是字符串 json的value是Object
json解析：
json是js的原生内容，也就意味着js可以直接取出json对象中的数据。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>json01</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul>
<li id="bj" name="beijing">北京</li>
</ul>
</body>
<script language="JavaScript">
/**
* 案例一
* {key:value,key:value}
*
* class Person{
* String firstname = "张";
* String lastname = "三丰";
* Integer age = 100;
* }
*
* Person p = new Person();
* System.out.println(p.firstname);
*/
var person={"firstname":"张","lastname":"三丰","age":"100"};
alert(person.firstname+"..."+person.lastname+"..."+person.age);
</
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>json02</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul>
<li id="bj" name="beijing">北京</li>
</ul>
</body>
<script language="JavaScript">
/**
* 案例二
* [{key:value,key:value},{key:value,key:value}]
*
*/
var java0803=[
{"name":"海绵宝宝","age":59},
{"name":"蟹老板","age":18},
{"name":"颇老板","age":28}
];
alert(java0803[0].name+"..."+java0803[0].age);
</script>
</html>
Jquery的Ajax技术：
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种。
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
（3）$.ajax( { option1:value1,option2:value2... } );
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
<%@ 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}/jquery-1.11.3.min.js "></script> </head> <body> <input type="button" value="get异步请求" onclick="get()"> <input type="button" value="post异步请求" onclick="post()"> <input type="button" value="$Ajax的post异步请求" onclick="ajax()"> </body> <script type="text/javascript"> function ajax(){ $.ajax({ async:true, url:"${pageContext.request.contextPath}/Ajax02Servlet", type:"post", data:{"uname":"张三"}, success:function(data){ alert(data.name); }, dataType:"json" }); } function post(){ $.post( "${pageContext.request.contextPath}/Ajax02Servlet", {"uname":"张三"}, function(data){ alert(data.name); }, "json" ); } function get(){ $.get( "${pageContext.request.contextPath}/Ajax01Servlet", {"uname":"张三"}, function(data){ alert(data.name); }, "json" ); } </script> </html>
package com.oracle.web; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Ajax02Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取请求参数 String name=request.getParameter("uname"); System.out.println(name); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write("{\"name\":\""+name+"\"}"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
package com.oracle.web; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Ajax01Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取请求参数 String name=request.getParameter("uname"); //解决乱码 name=new String(name.getBytes("ISO8859-1"),"UTF-8"); System.out.println(name); //解决乱码 response.setContentType("text/html;charset=UTF-8"); response.getWriter().write("{\"name\":\""+name+"\"}"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
package com.oracle.web; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Ajax01Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取请求参数 String name=request.getParameter("uname"); //解决乱码 name=new String(name.getBytes("ISO8859-1"),"UTF-8"); System.out.println(name); //解决乱码 response.setContentType("text/html;charset=UTF-8"); response.getWriter().write("{\"name\":\""+name+"\"}"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
运用ajax技术检验用户名是否可用：
//校验用户名是否存在 public int checkUsername(String username) throws SQLException{ QueryRunner qr=new QueryRunner(MyDBUtils.getDataSource()); String sql="select count(*) from users where username=? "; Long row=qr.query(sql,new ScalarHandler<Long>(),username); return row.intValue(); }
//校验用户名是否存在 public int checkUsername(String username){ int row=0; try { row=userDao.checkUsername(username); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return row; }
package com.oracle.web.user; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.oracle.service.UserService; public class CheckUsernameServlet extends HttpServlet { private UserService userService=new UserService(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取用户名 String username=request.getParameter("username"); // int row=userService.checkUsername(username); response.getWriter().write("{\"row\":"+row+"}"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head></head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>会员注册</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="js/jquery.validate.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <!-- 引入自定义css文件 style.css --> <link rel="stylesheet" href="css/style.css" type="text/css" /> <style> body { margin-top: 20px; margin: 0 auto; } .carousel-inner .item img { width: 100%; height: 300px; } font { color: #3164af; font-size: 18px; font-weight: normal; padding: 0 10px; } .error{ color:red; } </style> </head> <body> <!-- 引入header.jsp --> <jsp:include page="/header.jsp"></jsp:include> <div class="container" style="width: 100%; background: url('image/regist_bg.jpg');"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8" style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;"> <font>会员注册</font>USER REGISTER <form id="myform" class="form-horizontal" style="margin-top: 5px;" action="/Market02/RegisterServlet" method="post"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">用户名</label> <div class="col-sm-6"> <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username" onblur="checkUsername(this)"> <span id="mes"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-6"> <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" name="password"> </div> </div> <div class="form-group"> <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label> <div class="col-sm-6"> <input type="password" class="form-control" id="confirmpwd" placeholder="请输入确认密码" name="password"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-6"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email"> </div> </div> <div class="form-group"> <label for="usercaption" class="col-sm-2 control-label">姓名</label> <div class="col-sm-6"> <input type="text" class="form-control" id="usercaption" placeholder="请输入姓名" name="name"> </div> </div> <div class="form-group opt"> <label for="inlineRadio1" class="col-sm-2 control-label">性别</label> <div class="col-sm-6"> <label class="radio-inline"> <input type="radio" name="sex" id="sex1" value="male"> 男 </label> <label class="radio-inline"> <input type="radio" name="sex" id="sex2" value="female"> 女 </label> <label for="sex" class="error" style="display:none">性别不能为空</label> </div> </div> <div class="form-group"> <label for="date" class="col-sm-2 control-label">出生日期</label> <div class="col-sm-6"> <input type="date" class="form-control" name="birthday"> </div> </div> <div class="form-group"> <label for="date" class="col-sm-2 control-label">验证码</label> <div class="col-sm-3"> <input type="text" class="form-control" name="checkCode"> </div> <div class="col-sm-2"> <img src="./image/captcha.jhtml" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" width="100" value="注册" name="submit" style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;"> </div> </div> </form> </div> <div class="col-md-2"></div> </div> </div> <!-- 引入footer.jsp --> <jsp:include page="/footer.jsp"></jsp:include> </body> <script type="text/javascript"> function checkUsername(obj){ //获取用户要输入的用户名 var username=$(obj).val(); $.ajax({ url:"${pageContext.request.contextPath}/CheckUsernameServlet", type:"post", data:{"username":username}, async:true, success:function(data){ //取值 var row=data.row; //存在 if(row>0){ $("#mes").css("color","red"); $("#mes").html("用户名不可用"); }else{ $("#mes").css("color","green"); $("#mes").html("用户名可用"); } }, dataType:"json" }) } </script> </html>
将Jquery插件与ajax技术结合起来：
自定义校验规则步骤如下：
(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params){})
(2) 在rules中通过校验规则名称使用校验规则
(3) 在messages中定义该规则对应的错误提示信息
其中： value是校验组件的value值
element是校验组件的节点对象
params是校验规则的参数
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head></head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>会员注册</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="js/jquery.validate.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <!-- 引入自定义css文件 style.css --> <link rel="stylesheet" href="css/style.css" type="text/css" /> <style> body { margin-top: 20px; margin: 0 auto; } .carousel-inner .item img { width: 100%; height: 300px; } font { color: #3164af; font-size: 18px; font-weight: normal; padding: 0 10px; } .error{ color:red; } </style> </head> <body> <!-- 引入header.jsp --> <jsp:include page="/header.jsp"></jsp:include> <div class="container" style="width: 100%; background: url('image/regist_bg.jpg');"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8" style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;"> <font>会员注册</font>USER REGISTER <form id="myform" class="form-horizontal" style="margin-top: 5px;" action="/Market02/RegisterServlet" method="post"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">用户名</label> <div class="col-sm-6"> <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-6"> <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" name="password"> </div> </div> <div class="form-group"> <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label> <div class="col-sm-6"> <input type="password" class="form-control" id="confirmpwd" placeholder="请输入确认密码" name="password"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-6"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email"> </div> </div> <div class="form-group"> <label for="usercaption" class="col-sm-2 control-label">姓名</label> <div class="col-sm-6"> <input type="text" class="form-control" id="usercaption" placeholder="请输入姓名" name="name"> </div> </div> <div class="form-group opt"> <label for="inlineRadio1" class="col-sm-2 control-label">性别</label> <div class="col-sm-6"> <label class="radio-inline"> <input type="radio" name="sex" id="sex1" value="male"> 男 </label> <label class="radio-inline"> <input type="radio" name="sex" id="sex2" value="female"> 女 </label> <label for="sex" class="error" style="display:none">性别不能为空</label> </div> </div> <div class="form-group"> <label for="date" class="col-sm-2 control-label">出生日期</label> <div class="col-sm-6"> <input type="date" class="form-control" name="birthday"> </div> </div> <div class="form-group"> <label for="date" class="col-sm-2 control-label">验证码</label> <div class="col-sm-3"> <input type="text" class="form-control" name="checkCode"> </div> <div class="col-sm-2"> <img src="./image/captcha.jhtml" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" width="100" value="注册" name="submit" style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;"> </div> </div> </form> </div> <div class="col-md-2"></div> </div> </div> <!-- 引入footer.jsp --> <jsp:include page="/footer.jsp"></jsp:include> </body> <script type="text/javascript"> $.validator.addMethod("isExist", function(value,element,params){ var flag=true; $.ajax({ url:"${pageContext.request.contextPath}/CheckUsernameServlet", type:"post", data:{"username":value}, async:false, success:function(data){ //取值 var row=data.row; //存在 if(row>0){ flag=false; } }, dataType:"json" }); return flag; }); $("#myform").validate({ rules:{ "username":{ "required":true, "isExist":true, }, "password":{ "required":true, "rangelength":[6,9] }, "confirmpwd":{"required":true,"equalTo":"#password"}, "email":{ "required":true, "email":true }, "sex":"required" }, messages:{ "username": {"required":"用户名不能为空！", "isExist":"用户名已存在" }, "password":{ "required":"密码不能为空！", "rangelength":"请输入6-9为密码！" }, "confirmpwd":{"required":"确认密码不能为空!", "equalTo":"两次密码不一致"}, "email":{ "required":"邮箱不能为空1", "email":"邮箱格式不正确！" } }, "sex":"性别不能为空！" }); </script> </html>
ajax技术的应用：
json的转换插件：
将java的对象或集合转成json形式字符串
常用的json转换工具有如下几种：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴
json的转换插件是通过java的一些工具，直接将java对象或集合转换为json字符串。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <style> #content{ width:177px; background:white; border:1px solid grey; position:absolute; z-index:1000; } </style> <!-- 登录 注册 购物车... --> <div class="container-fluid"> <div class="col-md-4"> <img src="img/logo2.png" /> </div> <div class="col-md-5"> <img src="img/header.png" /> </div> <div class="col-md-3" style="padding-top:20px"> <ol class="list-inline"> <c:if test="${!empty user}"> <li><a href="#">${user.username }</a></li> </c:if> <c:if test="${empty user}"> <li><a href="login.jsp">登录</a></li> <li><a href="register.jsp">注册</a></li> </c:if> <!-- <li><a href="login.jsp">登录</a></li> --> <!-- <li><a href="register.jsp">注册</a></li> --> <li><a href="cart.jsp">购物车</a></li> <li><a href="order_list.jsp">我的订单</a> <li><a href="index.jsp">退出</a> </ol> <%-- <ol class="list-inline"> <c:if test="${empty user }"> <li><a href="login.jsp">登录</a><> <li><a href="register.jsp">注册</a><> </c:if> <c:if test="${!empty user }"> <a href="#">${user.username}</a> </c:if> <li><a href="cart.jsp">购物车</a><> <li><a href="order_list.jsp">我的订单</a><> </ol> --%> </div> </div> <!-- 导航条 --> <div class="container-fluid"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="${pageContext.request.contextPath }/ProductListServlet">手机数码<span class="sr-only">(current)</span></a></li> <li><a href="#">电脑办公</a></li> <li><a href="#">电脑办公</a></li> <li><a href="#">电脑办公</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group" style="positon:relative"> <input id="search1" type="text" class="form-control" placeholder="Search" onkeyup="search(this)"> <div id="content" style="display:none"> </div> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </nav> </div> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> function search(obj){ //获取用户输入的内容 var pname=$(obj).val(); $.post( "${pageContext.request.contextPath}/GetPnameServlet", {"pname":pname}, function(data){ var str=""; if(data.length>0){ for(var i=0;i<data.length;i++){ str+="<div style='padding:5px' onmouseover='over(this)' onmouseout='out(this)' onclick='myclick(this)'>"+data[i]+"</div>"; } } //将内容放到div中 $("#content").html(str); //让div显示 $("#content").css("display","block"); }, "json" ); } function over(obj){ $(obj).css({ "background":"#C0C0C0", "cursor":"pointer", "color":"white" }); } function out(obj){ $(obj).css({ "background":"white", "color":"black" }); } function myclick(obj){ //获取被选中div的内容 var content=$(obj).html(); $("#search1").val(content); //让大div隐藏 $("#content").css("display","none"); } </script>
//根据商品名称模糊查询商品完整名称 public List<String> getPname(String pname) throws SQLException{ QueryRunner qr=new QueryRunner(MyDBUtils.getDataSource()); String sql="select pname from product where pname like ?"; List<String> list=qr.query(sql,new ColumnListHandler<String>(),"%"+pname+"%"); return list; }
//根据商品名称模糊查询商品完整名称 public List<String> getPname(String pname){ List<String> list=null; try { list=productDao.getPname(pname); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return list; }
package com.oracle.web.product; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import com.oracle.service.ProductService; public class GetPnameServlet extends HttpServlet { ProductService productService=new ProductService(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取用户输入的商品名称 String pname=request.getParameter("pname"); List<String> list=productService.getPname(pname); //解决响应乱码 response.setContentType("text/html;charset=UTF-8"); //将集合转为json字符串 Gson gson=new Gson(); String json=gson.toJson(list); response.getWriter().write(json); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
