Asynchronous JavaScript And XML：异步的 JavaScript 和 XML
AJAX 不是新的编程，指的是⼀种交互⽅式，异步加载，客户端和服务器的数据交互更新在局部⻚⾯的技术，不需要刷新整个⻚⾯（局部刷新）
优点：
1、局部刷新，效率更⾼
2、⽤户体验更好
基于 jQuery 的 A JAX
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/1/21 0021
Time: 16:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--不能⽤表单提交请求，改⽤ jQuery ⽅式动态绑定事件来提交,Servlet 不能跳转到 JSP，只能将数据返回-->
<script type="text/javascript">
$(function(){
var btn=$("#btn");<!--btn变量是btn标签-->
btn.click(function(){<!--btn的点击事件监听函数-->
$.ajax({
url:'/test',<!--action="/test"-->
type:'post',<!--method="post"-->
data:'id=1',<!--?id=1-->
dataType:'json',<!--servlet传过来的数据类型-->
success:function(data){<!--success实现函数,data是servlet传过来的参数-->
$("#id").val(data.id);
$("#name").val(data.name);
$("#score").val(data.score);
}
})
});
})
</script>
</head>
<body>
编号:<input id="id" type="text" ><br/>
姓名:<input id="name" type="text" ><br/>
成绩:<input id="score" type="text" ><br/>
<input id="btn" type="button" value="提交"/>
</body>
</html>
不能⽤表单提交请求，改⽤ jQuery ⽅式动态绑定事件来提交。
Servlet 不能跳转到 JSP，只能将数据返回。
package com.southwind.servlet;
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 java.io.IOException;
@WebServlet("/test")
public class TestServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
String id = req.getParameter("id");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
String str = "Hello World";
resp.getWriter().write(str);
}
}
传统的 WEB 数据交互 VS AJAX 数据交互
客户端请求的⽅式不同：
传统，浏览器发送同步请求 （form、a）
AJAX，异步引擎对象发送异步请求
服务器响应的⽅式不同：
传统，响应⼀个完整 JSP ⻚⾯（视图）
AJAX，响应需要的数据
客户端处理⽅式不同：
传统：需要等待服务器完成响应并且重新加载整个⻚⾯之后，⽤户才能进⾏后续的操作
AJAX：动态更新⻚⾯中的局部内容，不影响⽤户的其他操作
基于 jQuery 的 AJAX 语法
$.ajax({属性})
常⽤的属性参数：
url：请求的后端服务地址
type：请求⽅式，默认 get
data：请求参数
dataType：服务器返回的数据类型，text/json
success：请求成功的回调函数
error：请求失败的回调函数
complete：请求完成的回调函数（⽆论成功或者失败，都会调⽤）
JSON
JavaScript Object Notation，⼀种轻量级数据交互格式，完成 js 与 Java 等后端开发语⾔对象数据之间的转换
客户端和服务器之间传递对象数据，需要⽤ JSON 格式。
使用JSON需要导入，js类型不用配置，在Webapp下创建文件夹lib（不是WEB-INF下）
实例：创建一个可选择省->市->区的选择框
要求改变省时,城市也会改变,改变市时,区也会改变
结果图：
jsp中:
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/1/22 0022
Time: 16:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<!--$()工厂函数,#city,this是dom节点,而change(),val()方法是jquery包中的方法,所以用$()把dom节点转为jquery类型,可以调用jquery中的方法-->
<head>
<title>选择城市页面</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//修改省
$("#province").change(function (){
var id = $(this).val();//选中的省份赋给id对象
//调用ajax异步请求传送信息
$.ajax({
url:"/location",
type:"post",
data:"id="+id+"&type=province",//选择的时哪个省份,把编号发过去
dataType:"JSON",//返回的参数类型是对象,调用JSON
success:function(data){//当成功收到servlet传到页面上的信息时调用success
//===========改变城市============
var content = "";
var cities = data.cities;
for(var i=0;i<cities.length;i++){//省下的城市
content += "<option>"+cities[i]+"</option>";
}
$("#city").html(content);//用content替换#area标签的内容
//===========改变区==============
content = "";
var areas = data.areas;
for(var i=0;i<areas.length;i++){//城市下的区
content += "<option>"+areas[i]+"</option>";
}
$("#area").html(content);//用content替换#area标签的内容
}
});
});
//修改城市
$("#city").change(function(){
var id = $(this).val();//把#city城市当前选中的value赋给id对象
//调用ajax异步请求传送信息
$.ajax({
url:"/location",
type:"POST",
data:"id="+id+"&type=city", //选择的是哪个城市,把城市编号发过去
dataType:"JSON",//返回的参数类型,是对象调用JSON,文本调用text
success:function (data){//当成功收到servlet传到页面上的信息时调用success
//用content存取新的地区option标签内容
var content = "";
for (var i=0;i<data.length;i++){
content += "<option>"+data[i]+"</option>"
}
//用content替换#area标签的内容
$("#area").html(content);
}
});
});
});
</script>
</head>
<body>
省:<select id="province">
<option value="陕西省">陕西省</option>
<option value="河南省">河南省</option>
<option value="江苏省">江苏省</option>
</select>
城市:<select id="city">
<option value="西安市">西安市</option>
<option value="宝鸡市">宝鸡市</option>
<option value="渭南市">渭南市</option>
</select>
区:<select id="area">
<option>雁塔区</option>
<option>莲湖区</option>
<option>新城区</option>
</select>
</body>
</html>
创建实体属性Location存放集合元素
package com.southwind.entity;
import java.util.List;
public class Location {
private List<String> cities;//存储某个省中的城市
private List<String> areas;//存储某个城市中的区
//得到城市
public List<String> getCities() {
return cities;
}
//存入城市
public void setCities(List<String> cities) {
this.cities = cities;
}
//得到区
public List<String> getAreas() {
return areas;
}
//存入区
public void setAreas(List<String> areas) {
this.areas = areas;
}
}
servlet中实现具体代码
package com.southwind.servlet;
import com.southwind.entity.Location;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
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 java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@WebServlet("/location")
public class LocationServlet extends HttpServlet {
private static Map<String,List<String>> provinceMap;//一个省对应多个城市
private static Map<String, List<String>> cityMap;//一个城市对应多个区
static {
cityMap = new HashMap<>();
List<String> areas = new ArrayList<>();
//--------------------省-城市选择--------------
provinceMap = new HashMap<>();
List<String> cities = new ArrayList<>();
cities.add("⻄安市");
cities.add("宝鸡市");
cities.add("渭南市");
provinceMap.put("陕⻄省",cities);
cities = new ArrayList<>();
cities.add("郑州市");
cities.add("洛阳市");
cities.add("开封市");
provinceMap.put("河南省",cities);
cities = new ArrayList<>();
cities.add("南京市");
cities.add("苏州市");
cities.add("南通市");
provinceMap.put("江苏省",cities);
//------------------城市-区选择-----------------
//--------陕西省
//⻄安
areas.add("雁塔区");
areas.add("莲湖区");
areas.add("新城区");
cityMap.put("⻄安市",areas);
//宝鸡
areas = new ArrayList<>();
areas.add("陈仓区");
areas.add("渭宾区");
areas.add("新城区");
cityMap.put("宝鸡市",areas);
//渭南
areas = new ArrayList<>();
areas.add("临渭区");
areas.add("⾼新区");
cityMap.put("渭南市",areas);
//--------河南省
//郑州
areas = new ArrayList<>();
areas.add("郑州A区");
areas.add("郑州B区");
cityMap.put("郑州市",areas);
//洛阳
areas = new ArrayList<>();
areas.add("洛阳A区");
areas.add("洛阳B区");
cityMap.put("洛阳市",areas);
//开封
areas = new ArrayList<>();
areas.add("开封A区");
areas.add("开封B区");
cityMap.put("开封市",areas);
//--------江苏省
//南京市
areas = new ArrayList<>();
areas.add("南京A区");
areas.add("南京B区");
cityMap.put("南京市",areas);
//苏州市
areas = new ArrayList<>();
areas.add("苏州A区");
areas.add("苏州B区");
cityMap.put("苏州市",areas);
//南通市
areas = new ArrayList<>();
areas.add("南通A区");
areas.add("南通B区");
cityMap.put("南通市",areas);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String type = req.getParameter("type");//type为change的类型,是省还是城市
resp.setCharacterEncoding("UTF-8");
String id = req.getParameter("id");//id参数是传递过来的省/城市,由id知道该调用哪几个下属城市/区
switch (type){
case "city":
List<String> areas = cityMap.get(id);//把map中id对应的区集合赋给areas对象
JSONArray jsonArray = JSONArray.fromObject(areas);//将JAVA对象转换为JSON格式
resp.getWriter().write(jsonArray.toString());//返回jsonArray对象,被jsp的success接收为data
break;
case "province":
List<String> cities = provinceMap.get(id);//假设点击的是河南省,cities={郑州,洛阳,开封}
String city = cities.get(0);//得到河南省的第一个城市郑州
List<String> cityAreas = cityMap.get(city);//得到郑州市对应的区集合{郑州A区,郑州B区}
//把得到的信息存储到location中
Location location = new Location();
location.setCities(cities);//添加{郑州,洛阳,开封}
location.setAreas(cityAreas);//添加{郑州A区,郑州B区}
//假设点击河南省,location中存储的信息是{郑州,洛阳,开封},{郑州A区,郑州B区}
//自动显示 河南省-郑州市-郑州A区,接下来如果换成洛阳市则跳转到选择语句case "city":
JSONObject jsonObject = JSONObject.fromObject(location);//将JAVA对象转换为JSON格式
resp.getWriter().write(jsonObject.toString());//返回jsonObject对象,被jsp的success接收为data
break;
}
// resp.setCharacterEncoding("UTF-8");
// String id = req.getParameter("id");
// String type = req.getParameter("type");
// List<String> result = null;//创建一个能够存储对应城市/区的集合
// switch (type){
// case "province":
// //得到对应编号的城市集合
// result = provinceMap.get(id);
// break;
// case "city":
// //得到对应编号的区集合
// result = cityMap.get(id);
// break;
// }
// JSONArray jsonArray = JSONArray.fromObject(result);//将JAVA对象转换为JSON格式
// //把得到的城市/区集合返回去
// resp.getWriter().write(jsonArray.toString());
}
}