本文深入探讨了AJAX的工作原理及其实现方式，包括异步请求的处理和JSON数据的使用。介绍了如何利用jQuery简化AJAX操作，以及JSON数据的结构、解析和转换方法，最后展示了AJAX结合JSON在Web应用中的实际案例。
AJAX
概念:ASynchronous Javascript And XML 异步的Javascript 和XML
-
异步和同步
- 客户端必须等待服务器的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其它操作。
-
Ajax，是指一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页(不使用Ajax)如果需要更新内容，必须重载整个网页页面。 -
目的是为了提升用户体验
2.实现方式
- 原生的JS实现方式(了解)
… - JQuery实现方式
1.$ .ajax()
- 语法：$.ajax({键值对});
//使用$.ajax()发送异步请求
$.ajax({
url:"AjaxServlet",//请求路径
type:"POST",//请求方式
data:{"username":"jack","age":23},//data:"username=jack&age=23",//请求参数
success:function (data) {
alert(data);
},
error:function () {
alert("出错了");
},//表示如果请求响应出现错误，会执行的回掉函数。
dataType:"text" //设置接收到的响应数据格式
});
//AjaxServlet
package com.chif.servlet;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求参数
String username=request.getParameter("username");
//2.打印username
System.out.println(username);
//3.响应
response.getWriter().write("hello:"+username);
}
}
2.$.get()：发送get请求
- 语法：$.get(url,[data],[callback],[type])
*参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
function fun(){
//$.get发送异步请求
$.get("AjaxServlet",{"username":"rose"},function (data) {
alert(data);
},"text");
//$.post()同上
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">
</body>
</html>
3.$.post()：发送post请求
- 语法：$.post(url,[data],[callback],[type])
JSON
1.概念：JavaScript Object Notation JavaScript对象表示法
JAVA对象
Person p=new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
使用Json表示
var p={"name":"张三","age":23,"gender":"男"};
- json现在多用于存储和交换文本信息的语法。
- 进行数据的传输。
- JSON比XML 更小，更快，更易解析。
2.语法：
1.基本规则
- 数据在名称/值对中：json数据是由键值对构成的
- 键用引号(单双都行)引起来，也可以不使用引号
- 值得取值类型：
1.数字(整数或浮点数)
2.字符串(在双引号中)
3.逻辑值(true 或 false)
4.数组(在方括号中) {“person”:[{},{}]}
5.对象(在花括号中) {“address”:{“province”:“陕西”…}}
null
* 数据由逗号分离：多个键值对由逗号分隔
* 花括号保存对象：使用{}定义json格式
* 方括号保存数组：[]
2.获取数据:
1.json对象.键名
2.json对象[“键名”]
3.数组对象[“索引”]
<script>
//定义基本数据格式
var person={"name":"张三","age":23,"gender":true};
//嵌套格式
var persons={"psersons":[
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":23,"gender":true},
{"name":"王五","age":23,"gender":true},
]};
alert(persons.psersons[2].name);
//数组
var ps=[
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":23,"gender":true},
{"name":"王五","age":23,"gender":true},
];
//遍历
//获取person对象中的所有的键和值
for (var key in person){
//alert(key+":"+person.key);//相当于person."name" 获取不到
alert(key+":"+person[key]);
}
//获取ps中的所有值
for (var i=0;i<ps.length;i++){
var p=ps[i];
for (var key in p){
alert(key+":"+p[key]);
}
}
</script>
3.JSON数据和java对象的相互转换
- JSON解析器：
常见的解析器：Jsonlib,Gson,fastjson,jackson.
1.JSON转为JAVA对象
1.导入jackson的相关Jar包。
2.创建jackson核心对象 ObjectMapper
3.调用ObjectMapper的相关方法进行转换
1.readValue(json字符串数据,class)
//Json转为Java对象
public static void test3()throws Exception{
//初始化Json字符串
String json="{\"name\":\"张三\",\"age\":20,\"gender\":\"男\",\"date\":\"2020-23-31\"}";
//创建ObjectMapper对象
ObjectMapper mapper=new ObjectMapper();
//转换为Java对象
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
}
2.JAVA对象转为JSON对象
- 使用步骤：
1.导入jackson的相关Jar包。
2.创建jackson核心对象 ObjectMapper
3.调用ObjectMapper的相关方法进行转换
1.转换方法:
*writeValue(参数1，object)
参数1：
File：将obj对象转换为json字符串，并保存到指定文件中
Writer：将obj对象转换为json字符串，并将json数据填充到字符输出流中。
OutputStream：将obj对象转换为json字符串，并将json数据填充到字节输出流中。
*writeValueAsString(obj)：将对象转换为json字符串
//Java对象转为Json对象
public static void test() throws Exception {
//1.创建Person对象
Person p=new Person();
p.setName("张三");
p.setAge(20);
p.setGender("男");
p.setDate(new Date());
//2.创建Json的核心对象 ObjectMapper
ObjectMapper mapper=new ObjectMapper();
//3.转换
/*
转换方法
writeValue(参数1，object)
参数1：
File：将obj对象转换为json字符串，并保存到指定文件中
Writer：将obj对象转换为json字符串，并将json数据填充到字符输出流中。
OutputStream：将obj对象转换为json字符串，并将json数据填充到字节输出流中。
writeValueAsString(obj)：将对象转换为json字符串
*/
String json = mapper.writeValueAsString(p);
System.out.println(json);
- 注解：
1.@JsonIgnore：排除属性
2.@JsonFormat：属性值的格式化
@JsonFormat(pattern = “yyyy-mm-dd”)
Person类中加入注解
@JsonFormat(pattern = "yyyy-mm-dd")
private Date date;
3.复杂的Java对象转换为Json
1.List：输出结果数组 [{"name":"张三","date":1597992165176,"age":20,"gender":"男"},{"name":"张三","date":1597992165176,"age":20,"gender":"男"},{"name":"张三","date":1597992165176,"age":20,"gender":"男"}]
2.Map：输出结果和对象格式一致 {"1":{"name":"张三","date":1597992029224,"gender":"男","age":20},"2":{"name":"张三","date":1597992029224,"gender":"男","age":20},"3":{"name":"张三","date":1597992029224,"gender":"男","age":20}}
public static void test2() throws Exception {
Person p1 = new Person();
p1.setName("张三");
p1.setAge(20);
p1.setGender("男");
p1.setDate(new Date());
Person p2 = new Person();
p2.setName("张三");
p2.setAge(20);
p2.setGender("男");
p2.setDate(new Date());
Person p = new Person();
p.setName("张三");
p.setAge(20);
p.setGender("男");
p.setDate(new Date());
List<Person> ps=new ArrayList<Person>();
ps.add(p);
ps.add(p1);
ps.add(p2);
ObjectMapper mapper=new ObjectMapper();
String json = mapper.writeValueAsString(ps);
System.out.println(json);
ajax在web中的图解
Ajax中Json对象在页面和Servlet之间的传递和遍历
Servlet传递json案例：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.调用Service查询获取list集合
ProvinceService service=new ProvinceServiceImpl();
List<Province> list = service.findAll();
//2.序列化list为Json
ObjectMapper mapper=new ObjectMapper();
String json = mapper.writeValueAsString(list);
//3.响应结果
response.setContentType("application/json;charset=UTF-8");//设置MIME
response.getWriter().write(json);//响应Json字符串数组
}
Ajax遍历Json案例：
<script>
$(function () {
$.get("provinceServlet",{},function (data) {
//1.获取select下拉列表
var select=$("#province");
//2.遍历Json数组
$(data).each(function () {
//3.创建<option>
var option="<option name='"+this.id+"'>"+this.name+"</option>"
//4.追加<option>
select.append(option);
})
})
})
</script>
案例：
总结最近学习的数据库连接池、ajax、json的一个项目
Ajax+Json+JdbcTemplate+数据库连接池(Druid)实现注册校验用户名是否存在
扫一扫
1550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
