Ajax
什么是同步异步?
同步:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态,比如当我百度搜索时,会有一个短时间的灰色膜,那时候不可以对其进行操作,
就是结果未出来时,不可以进行操作。
异步:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随 意做其他事情,不会被卡死,比如当在点击搜索的时候,我还可以对网页进行别的操作不会点不动等操作,点击别的地方会有相应。
ajax运行原理:当页面发起请求时,会请求到游览器的ajax内核引擎,然后去请求服务器,这段时间知道服务器返回给ajax引擎,都可以进行操作,数据返回给ajax引擎再触发你所设置的js事件。所有的异步访问都是ajax引擎
json数据格式
作用:前后端交换数据,移动端与服务器端交换数据
Json的格式与解析
json有两种格式:
1)对象格式:{"key1":obj,"key2":obj,"key3":obj...}
2)数组/集合格式:[obj,obj,obj...]
常用的json格式转换工具:jsonlib,Gson
jquery的ajx技术
<%@ 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 }/js/jquery.min.js"></script> <script type="text/javascript"> function f1() { //请求的url,json内容,回调函数,格式. $.get("/Web0717/Ajax02Servlet",{"name":"张三","age":12}, function(data){ alert(data.name); },"json" ); } function f2(){ $.post("/Web0717/Ajax02Servlet",{"name":"王2","age":14}, function(data){ alert(data.name); },"json" ) } function f3(){ $.ajax({type:"post", //请求方式 url:"/Web0717/Ajax02Servlet", //地址 async:true, //是否异步 data:{"name":"wrc","age":18}, //传递给服务器的参数 dataType:"text", //返回参数的解析类型 success:function(data){ //如果请求成功的回调函数 alert(data); }, error:function(){ //如果请求失败的回调函数 alert("请求失败"); } }) } </script> </head> <body> <input type="button" value="get异步请求服务器" onclick="f1()"> <input type="button" value="post异步请求服务器" onclick="f2()"> <input type="button" value="ajax异步请求服务器" onclick="f3()"> </body> </html>
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... } ); ---- 以后在掌握
常用的option有如下:
async:是否异步,默认是true代表异步
data:发送到服务器的参数,建议使用json格式
dataType:服务器端返回的数据类型,常用text和json
success:成功响应执行的函数,对应的类型是function类型
type:请求方式,POST/GET
url:请求服务器端地址
做一个对注册用户名的检测
dao层
//判断用户名是否存在 public Users getUsername(String username) throws SQLException{ QueryRunner qr = new QueryRunner(DBUTils.getDataSource()); String sql = "select * from users where username=?"; Users user =qr.query(sql, new BeanHandler<Users>(Users.class),username); return user; } }
service层
package com.oracle.service; import java.sql.SQLException; import com.oracle.domain.Users; import com.oracle.dao.RegisterDao; public class UsersServlet { RegisterDao RegisterDao = new RegisterDao(); public boolean getUsername(String username) { Users users =new Users(); try { users =RegisterDao.getUsername(username); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }
//判断sql查询语句是不是空 return users==null?true:false; } }
servlet
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; import com.oracle.service.UsersServlet; public class UserCheckServlet extends HttpServlet { UsersServlet UsersServlet = new UsersServlet(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String username = request.getParameter("username"); //获取值 boolean isExist = UsersServlet.getUsername(username); //判断结果 response.getWriter().write("{\"isExist\":"+isExist+"}"); //以json形式写到页面上 } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
jquery
<script type="text/javascript"> $(function(){ $("#username").blur(function(){ //找到username,当他失去焦点时,获取输入值 var username = $("#username").val(); $.post( "${pageContext.request.contextPath}/UserCheckServlet" , //路径 {"username":username}, //返回参数 function(data){ //回调函数 var userInfo =""; var isExist = data.isExist; //接收后台返回的函数,true和false if(isExist){ //判断返回参数的对错,并提示 userInfo = "该用户名可以使用"; $("#userInfo").css("color","green"); //给提示的字加颜色 }else{ userInfo = "该用户名已被占用"; $("#userInfo").css("color","red"); } $("#userInfo").html(userInfo); //获取属性显示出来 },"json" //参数格式 ) }) }) </script>