什么是同步异步？
同步：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态，比如当我百度搜索时，会有一个短时间的灰色膜，那时候不可以对其进行操作，
就是结果未出来时，不可以进行操作。
异步：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死，比如当在点击搜索的时候，我还可以对网页进行别的操作不会点不动等操作，点击别的地方会有相应。
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>