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