Ajax
ajax：AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新
AJAX：Asynchronous JavaScript and XML，异步 javascript和 XML，带来用户体验改变，是web优化一种主要手段
AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象
传统web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发给浏览器， Ajax交互模型，浏览器首先将请求 发送 Ajax引擎（以XMLHttpRequest为核心），AJax引擎再将请求发送给 服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示
1、同步交互模式，客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
2、异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。
Google ： suggest建议、邮件定时保存、map地图
jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
四种Ajax
1.
$("").load("url地址",data参数,function(){回调函数，返回的时候执行});
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
必需： URL 参数：规定希望加载的 URL。
可选： data 参数：规定与请求一同发送的查询字符串键/值对集合。
可选： callback 参数：是 load() 方法完成后所执行的函数名称。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">
div{
width: 60px;
height: 60px;
background-color: aquamarine;
margin: 2px;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('js/jquery-3.2.1.min.js');
})
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
</html>
2.
$.get(...);
3.
$.post(...);
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
4.
$.ajax({
url:"传给谁",
data:(参数),
type:"post/get",
dateType:"html/text/json",
success:function(data){
},
error:function(msg){
}
});
注册页面，以及失去焦点验证用户名是否存在
<%@ 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">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
$("#btn_log").click(function() {
$.ajax({
type:"post",
url:"ZhueServlet",
data:$("#formdata").serializeArray(),
dataType:"json",//返回的
success:function(data) {
if(data.success) {
window.location.href="denglu.jsp";
} else {
alert(data.msg);//打印相应的错误信息
}
},
error:function(msg) {
cosole.log(msg);
}
});
}); // 失去焦点验证用户名是否存在
$("#username").blur(function() {
var u_val = $("#username").val(); $.ajax({
type:"post",
url:"CheckUsername",
data:{username:u_val},
dataType:"text",
success:function(data) {
if("no" == data) {
$("#msg").html("用户名已经存在");
} else if("ok"==data) {
$("#msg").html("该用户名可以使用 !");
}
},
error:function(msg) {
cosole.log(msg);//在控制台打印错误信息 }
});
});
});
</script>
</head>
<body> <form id="formdata">
用户名：<input id="username" type="text" name="username"><span id="msg"></span><br>
密码：<input type="password" name="password"><br>
确认密码：<input type="password" name="password1"><br>
真实姓名：<input type="text" name="realname"><br>
<a id="btn_log" href="#">提交</a>><br>
</form>
</body>
</html>
//注册逻辑
package com.servlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.util.MethodDal;
import com.util.User; /**
* Servlet implementation class ZhueServlet
*/
@WebServlet("/ZhueServlet")
public class ZhueServlet extends HttpServlet { private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public ZhueServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//首先设置可以处理中文
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
//获取传入的数据
String username=request.getParameter("username");
String password=request.getParameter("password");
String password1=request.getParameter("password1");
String realname=request.getParameter("realname"); System.out.println("a:"+username+password);
//调用方法判断传入的参数有没有空，都不为空才可以执行下去
if(checkParam(username,password,password1)){
if(password.equals(password1)){
MethodDal m=new MethodDal();
if(m.selectName(username).equals("no")){//调用方法根据用户名查询，如果返回no说明数据库没有此用户名，可以注册
User user=new User();//实例化用户类并添加信息
user.setUsername(username);
user.setPassword(password);
m.insertData(user);//将实例化的用户传到添加用户的方法
response.getWriter().append("{\"success\":true}");//返回键值对，做相关判断，输出相关信息
}else{
response.getWriter().append("{\"success\":false, \"msg\":\"1请正确输入\"}");
}
}else{
response.getWriter().append("{\"msg\":\"2请正确输入\"}");
}
}else{
response.getWriter().append("{\"msg\":\"3请正确输入\"}");
}
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
//判断传入的参数有没有空的方法，只要有空的就返回false
public boolean checkParam(String... args){//这样传参数代表参数个数不确定，传几个都可以
for(String s : args){
if("".equals(s)||s==null){
return false;
}
}
return true;
}
}
案例：省市区三级联动
准备util工具包，数据库链接设置，数据库操作工具类
package com.util;
//数据库设置
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement; /**
* 数据库驱动连接类
* @author ZBK
*/
public class DBHelper {
/**
* 数据库用户名
*/
public static final String USERNAME = "test";
/**
* 数据库密码
*/
public static final String PASSWORD = "test";
/**
* 数据库驱动类
*/
public static final String DRIVER = "oracle.jdbc.OracleDriver";
/**
* 数据库地址URL
*/
public static final String URL = "jdbc:oracle:thin:@localhost:1521:xe"; /**
* 获取数据库连接
* @return
*/
public static Connection getConnection() {
Connection conn = null;
try {
Class.forName(DRIVER);
conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
} /**
* 释放资源
* @param conn 数据库连接对象
* @param sm Statement对象
* @param rs ResultSet结果集对象
*/
public static void destroy(Connection conn, Statement sm, ResultSet rs) {
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
conn = null;
}
if (sm != null) {
try {
sm.close();
} catch (SQLException e) {
e.printStackTrace();
}
sm = null;
}
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
rs = null;
}
} /**
* 验证前台传入的参数是否为空
* @param args
* @return
*/
public static boolean checkParam(String... args) {
for (String s : args) {
if (s == null || s.trim().length() < 1) {
return false;
}
}
return true;
}
}
package com.util; import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List; import com.model.Area;
import com.model.City;
import com.model.Province; public class DataBaseUtil {
private Connection conn;
private PreparedStatement ps;
private ResultSet rs; /**
* 初始化数据库链接
*/
public void init(String sql) {
conn = DBHelper.getConnection();
try {
ps = conn.prepareStatement(sql);
} catch (SQLException e) {
e.printStackTrace();
}
} /**
* 查询所有省信息
*
*/
public List<Province> SelectAllPro() {
String sql = "select * from C_PROVINCES t";
init(sql);
List<Province> plist = null;
try {
rs = ps.executeQuery();
if(rs != null) {
plist = new ArrayList<Province>();
while(rs.next()) {
Province p = new Province();
p.setId(rs.getInt("id"));
p.setProvince(rs.getString("province"));
p.setProvinceid(rs.getString("provinceid"));
plist.add(p);
}
}
} catch (SQLException e) {
e.printStackTrace();
} return plist;
} public List<City> SelectCity(String provinceid) {
String sql = "select * from C_CITIES t where t.provinceid=?";
init(sql);
List<City> clist = null;
try {
ps.setString(1, provinceid);
rs = ps.executeQuery();
if(rs!=null) {
clist = new ArrayList<City>();
while(rs.next()) {
City city = new City();
city.setId(rs.getInt("id"));
city.setCity(rs.getString("city"));
city.setCityid(rs.getString("cityid"));
city.setProvinceid(rs.getString("provinceid"));
clist.add(city);
}
}
} catch (SQLException e) {
e.printStackTrace();
} return clist;
} public List<Area> SelectArea(String cityid) {
String sql = "select * from C_AREAS t where t.cityid=?";
init(sql);
List<Area> alist = null;
try {
ps.setString(1, cityid);
rs = ps.executeQuery();
if(rs!=null) {
alist = new ArrayList<Area>();
while(rs.next()) {
Area a = new Area();
a.setId(rs.getInt("id"));
a.setArea(rs.getString("area"));
a.setAreaid(rs.getString("areaid"));
a.setCityid(rs.getString("cityid"));
alist.add(a);
}
}
} catch (SQLException e) {
e.printStackTrace();
} return alist;
}
}
准备model包，包含省市区三个类
package com.model;
public class Province {
private int id;
private String provinceid;
private String province;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getProvinceid() {
return provinceid;
}
public void setProvinceid(String provinceid) {
this.provinceid = provinceid;
}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
@Override
public String toString() {
return "Province [id=" + id + ", provinceid=" + provinceid + ", province=" + province + "]";
}
}
package com.model;
public class City {
private int id;
private String cityid;
private String city;
private String provinceid;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCityid() {
return cityid;
}
public void setCityid(String cityid) {
this.cityid = cityid;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public String getProvinceid() {
return provinceid;
}
public void setProvinceid(String provinceid) {
this.provinceid = provinceid;
}
@Override
public String toString() {
return "City [id=" + id + ", cityid=" + cityid + ", city=" + city + ", provinceid=" + provinceid + "]";
}
}
package com.model;
public class Area {
private int id;
private String areaid;
private String area;
private String cityid;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getAreaid() {
return areaid;
}
public void setAreaid(String areaid) {
this.areaid = areaid;
}
public String getArea() {
return area;
}
public void setArea(String area) {
this.area = area;
}
public String getCityid() {
return cityid;
}
public void setCityid(String cityid) {
this.cityid = cityid;
}
@Override
public String toString() {
return "Area [id=" + id + ", areaid=" + areaid + ", area=" + area + ", cityid=" + cityid + "]";
}
}
准备处理逻辑，三个Servlet
package com.servlet; import java.io.IOException;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.model.Province;
import com.util.DataBaseUtil; /**
* Servlet implementation class SelectAllProServlet
*/
@WebServlet("/SelectAllProServlet")
public class SelectAllProServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public SelectAllProServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
//初始化数据库操作类
DataBaseUtil db = new DataBaseUtil(); List<Province> plist = db.SelectAllPro(); String json = "{\"success\":"; if (plist != null) {
json += "true,\"result\":";//result是一个键，他得值是后面的数组，这个数组包含了一串键值对
json += "[";
for (int i = 0; i < plist.size(); i++) {
json += "{\"id\":\"" + plist.get(i).getId() + "\",\"province\":\"" + plist.get(i).getProvince()
+ "\",\"provinceid\":\"" + plist.get(i).getProvinceid() + "\"}";
if (i != plist.size() - 1) {
json += ",";
}
}
json += "]}";
} else {
json += "false}";
}
response.getWriter().append(json);
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
package com.servlet; import java.io.IOException;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSONObject;
import com.model.City;
import com.util.DataBaseUtil; /**
* Servlet implementation class SelectCityServlet
*/
@WebServlet("/SelectCityServlet")
public class SelectCityServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public SelectCityServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8"); String provinceid = request.getParameter("provinceid"); DataBaseUtil db = new DataBaseUtil(); List<City> clist = db.SelectCity(provinceid);
/*
* 拼接字符串传回json
* System.out.println(provinceid);
String json = "{\"success\":"; if (clist != null) {
json += "true,\"result\":";
json += "[";
for (int i = 0; i < clist.size(); i++) {
json += "{\"id\":\"" + clist.get(i).getId() + "\",\"city\":\"" + clist.get(i).getCity()
+ "\",\"cityid\":\"" + clist.get(i).getCityid() + "\"}";
if (i != clist.size() - 1) {
json += ",";
}
}
json += "]}";
} else {
json += "false}";
} response.getWriter().append(json);*/
//导包调用方法，传回json
JSONObject jo = new JSONObject(); if(clist!=null) {
jo.put("success", true);
jo.put("result", clist);
} else {
jo.put("success", false);
}
response.getWriter().append(jo.toJSONString());
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
package com.servlet; import java.io.IOException;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSONObject;
import com.model.Area;
import com.model.City;
import com.util.DataBaseUtil; /**
* Servlet implementation class SelectareaServlet
*/
@WebServlet("/SelectareaServlet")
public class SelectareaServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public SelectareaServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8"); String cityid = request.getParameter("cityid"); DataBaseUtil db = new DataBaseUtil(); List<Area> alist = db.SelectArea(cityid);
JSONObject jo = new JSONObject(); if(alist!=null) {
jo.put("success", true);
jo.put("result", alist);
} else {
jo.put("success", false);
}
response.getWriter().append(jo.toJSONString()); } /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
准备页面和ajax
<%@ 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">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Insert title here</title>
<style type="text/css">
#pdiv{
margin:30px auto;
width:600px;
height:auto;
border:1px black solid;
}
</style>
</head>
<body>
<div id="pdiv">
<select id="province"></select>
<select id="city"></select>
<select id="area"></select>
</div>
</body>
</html>
$(function() {
//访问页面显示省的信息
$.ajax({
type:"post",
url:"SelectAllProServlet",
//data此处不需要
dataType:"json",
success : function(data) {
if (data.success) {
$("#province").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框
$("#city").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框
$("#area").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框
for (var i = 0; i < data.result.length; i++) {
$("#province").append(
"<option value='" + data.result[i].provinceid
+ "'>" + data.result[i].province
+ "</option>");
}
} else {
alert("后台没有取出数据 !");
}
},
error : function(msg) {
console.log(msg);
}
});
// 加载市级
$("#province").change(
function() {
$("#area").empty();//清空，否则会导致多次查询的堆积起来
$("#area")
.append("<option value='-1'>请选择</option>");
var provinceid = $(this).val();
$.ajax({
type : "post",
url : "SelectCityServlet",
data : {
provinceid : provinceid//传出的参数类型是provinceid，值是provinceid
},
dataType : "json",
success : function(data) {
if (data.success) {
$("#city").empty();
$("#city")
.append("<option value='-1'>请选择</option>");
for (var i = 0; i < data.result.length; i++) {
$("#city").append(
"<option value='"
+ data.result[i].cityid + "'>"
+ data.result[i].city
+ "</option>");
}
} else {
alert("后台没有取出数据 !");
}
},
error : function(msg) {
console.log(msg);
}
});
});
// 加载区
$("#city").change(
function() {
var cityid = $(this).val();
$.ajax({
type : "post",
url : "SelectareaServlet",
data : {
cityid : cityid
},
dataType : "json",
success : function(data) {
if (data.success) {
$("#area").empty();//清空，否则会导致多次查询的堆积起来
$("#area")
.append("<option value='-1'>请选择</option>");
for (var i = 0; i < data.result.length; i++) {
$("#area").append(
"<option value='"
+ data.result[i].areaid + "'>"
+ data.result[i].area
+ "</option>");
}
} else {
alert("后台没有取出数据 !");
}
},
error : function(msg) {
console.log(msg);
}
});
});
});