JavaWeb之AJAX、JSON
29、AJAX
29.1、AJAX概述
概念：ASynchronous Javascript And XML 异步的JavaScript 和 XML
异步和同步：客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面
提升用户的体验
29.2、Ajax实现方式
29.2.1、JS原生实现方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS实现Ajaxtitle>
<script>
function fun () {
//使用JS原生发送Ajax需要创建XMLHttpRequest对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置发送请求的位置及请求方式
//参数1：请求方式
//参数2：请求路径
//参数3：是否是异步请求true是异步false是同步
xhttp.open("GET", "ajaxServlet?username=tom", true);
//发送请求
xhttp.send();
//处理响应数据
xhttp.onreadystatechange = function() {
//判断请求处理的状态是否已经就绪，还需要判断响应的状态码是否成功
if (this.readyState == 4 && this.status == 200) {
let responseText = this.responseText;
alert(responseText)
}
};
}
script>
head>
<body>
<input onclick="fun();" type="button" value="异步请求">
body>
html>
package com.example.Ajax;
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("/ajaxServlet")
public class AjaxDome extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
System.out.println(username);
resp.getWriter().write("hello:"+username);
}
}
29.2.2、jQuery实现方式
$.ajax()- 语法：
$.ajax({键值对})；
- 语法：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS实现Ajaxtitle>
<script src="js/jquery.min.js">script>
<script>
function f() {
//点击按钮发送异步请求
$.ajax({
type:"get",//请求方式
url:"ajaxServlet",//请求路径
data:{
"username":"tom",
},//发送请求参数
success:function (data) {//执行成功后的方法
alert(data);
},
error:function () {//出现异常执行
alert("出错了...")
},
dataType:"text"//响应数据的格式
})
}
script>
head>
<body>
<input onclick="f();" type="button" value="异步请求">
body>
html>
$.get()：发送get请求- 语法：
$.get(url,[data],[callback],[type])- 参数：
- url：请求路径
- data：请求参数
- callback：回调函数
- type：响应结果的类型
- 参数：
- 语法：
$.get("ajaxServlet",{username:"tom"},funcation(data){
},"text")
$.post()：发送post请求
$.post("ajaxServlet",{username:"tom"},funcation(data){
},"text")
30、JSON
30.1、JSON概述
概念：JavaScript Object Notation JavaScript对象表示法
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
var p = {"name":"张三","age":23,"gender":"男"}
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输
- JSON比XML更小、更快、更易解析
30.2、JSON语法
30.2.1、基本规则
基本规则：
- 数据在名称/值对中：json数据是由键值对构成的
- 键用引号(单双都行)引起来，也可以不使用引号
- 值得取值类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true或false）
- 数组（在方括号中）
{"persons":[{},{}]} - 对象（在花括号中）
{"address":{"province":"陕西"...}} - null
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用{}定义json格式
- 方括号保存数组：[]
30.2.2、获取数据
json对象.键名json对象["键名"]数组对象[索引]- 遍历
//1.定义基本格式
var person = {"name":"张三","age":23,"gender":true};
var ps = [
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":24,"gender":true},
{"name":"王五","age":25,"gender":false},
]
//获取person对象中所有的键和值
//for in 循环
/*
for(var key in person){
//这样的方式获取不行。因为相当于 person."name"
//alter(key+ ":" + person.key);
alert(key+":"+person[key])
}
*/
//获取所有ps中的所有值
for (var i = 0;i<ps.length;i++){
var p = ps[i];
for(var key in p){
alter(key+":"+p[key]);
}
}
30.3、JSON数据和Java对象的相互转换
- JSON解析器：
- 常见的解析器：
Jsonlib、Gson、fastjson、jackson
- 常见的解析器：
30.3.1、JSON转为Java对象
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
- readValue(json字符串数据，类名.Class)
@Test
public void test5() throws IOException {
//将json数据转换为对象
ObjectMapper mapper = new ObjectMapper();
Person person = mapper.readValue("{\"name\":\"张三\",\"age\":18,\"sex\":\"男\"}", Person.class);
System.out.println(person);
}
30.3.2、Java对象转换JSON
-
使用步骤：
-
导入jackson的相关jar包
-
创建Jackson核心对象 ObjectMapper
-
调用ObjectMapper的相关方法进行转换
-
转换方法：
-
writeValue(参数1,obj)：参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
-
writeValueAsString(obj)：将对象转为json字符串@Test public void test1() throws JsonProcessingException { //创建一个对象 Person person = new Person(); person.setName("张三"); person.setAge(18); person.setSex("男"); //创建ObjectMapper对象 ObjectMapper mapper = new ObjectMapper(); //使用其中的方法进行转换 String s = mapper.writeValueAsString(person); System.out.println(s); } @Test public void test2() throws IOException { //创建一个对象 Person person = new Person(); person.setName("张三"); person.setAge(18); person.setSex("男"); //创建ObjectMapper对象 ObjectMapper mapper = new ObjectMapper(); //使用其中的方法进行转换的json对象封装到文件中 mapper.writeValue(new File("d://a.txt"),person); }
-
-
注解：
@JsonIgnore：排除属性（写在类成员变量的上面）@JsonFormat：属性值得格式化（写在类成员变量的上面）@JsonFormat(pattern = "yyyy-MM-dd")
-
复杂Java对象转换
- List：数组
- Map：对象格式一致
-
-
@Test
public void test3() throws IOException {
//创建一个list数组转换为json数据
List<Person> list = new ArrayList<>();
//创建一个对象
Person person = new Person();
person.setName("张三");
person.setAge(18);
person.setSex("男");
list.add(person);
//创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//使用其中的方法进行转换的json数据
String s = mapper.writeValueAsString(list);
System.out.println(s);//[{"name":"张三","age":18,"sex":"男"}]
}
@Test
public void test4() throws IOException {
//创建一个Map集合转换为json数据
Map<String,Object> map = new HashMap<>();
//向map集合中添加数据
map.put("name","lisi");
map.put("age",20);
//创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//使用其中的方法进行转换的json数据
String s = mapper.writeValueAsString(map);
System.out.println(s);//{"name":"lisi","age":20}
}
30.4、校验用户名是否存在
服务器响应的数据，在客户端使用时，要想当做json数据格式使用
$.get(type)：将最后一个参数type指定为"json"- 在服务器端设置MIME类型
response.setContentType("application/json;charset=utf-8");
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>校验用户名title>
<script src="js/jquery.min.js">script>
<script>
//当页面加载完发送get请求
$(function () {
//获取用户名的数据
$("#user").blur(function () {
let username = $("#user").val();
//发送ajax请求
$.get("loginServlet",{"username":username},function (data) {
if (data.code==200){
$("#sp").html(data.msg);
$("#sp").css("color","red")
}else{
$("#sp").html(data.msg);
$("#sp").css("color","green")
}
},"json")
})
})
script>
head>
<body>
<form>
用户名：<input id="user" type="text" name="username"><span id="sp">span>
form>
body>
html>
package com.example.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
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.HashMap;
import java.util.Map;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
String username = req.getParameter("username");
System.out.println(username);
Map<String,Object> map = new HashMap<>();
if ("tom".equals(username)){
map.put("code",200);
map.put("msg","您注册的用户名太受欢迎了！！");
}else{
map.put("code",500);
map.put("msg","可以使用");
}
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(resp.getWriter(),map);
}
}