AJAX 和 JSON

AJAX

概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。提升了用户的体验

AJAX实现方式

原生js也可以直接操作AJAX 原生JS使用ajax
JQuery实现,使用时一定要引入jquery.

1. $.ajax()
   语法 : $.ajax({传输键值对});
   示例

$.ajax({
	url:"ajaxServlet" //这里的路径是和页面一样的根目录,所以没有/,这个要看你服务器的配置路径,
		//如果配置路径为urlPatterns为"/"则当前路径为“http://localhost:8080/”可以直接调用servlet
	type:"GET" //请求方式 post和get
	data:{"username":"hello","age":23,"gender:"男"}
	success:function (data) {
	alert(data);
	},//响应成功后的回调函数
	error:function () {
	alert("出错啦...")
	},//表示如果请求响应出现错误，会执行的回调函数
});

AjaxServlet.java

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(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);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

2. $.get():发送get请求
   语法: $.get(url,[data],[callback],[type])
        参数说明
             url:请求路径
             data:请求参数
             callback:回调函数
             type:响应参数类型
   示例:

$.get("ajaxSerlet",{username:"zkr"},function(data){
	alert(data)
},"text");

这里介绍一下表单中序列化（对象 -> 字节数组）操作
$("#表单id")…serialize(),这样的话就将表单中的键值变为一个数组,并存入request中返回给服务器.
服务器可以通过request.getParameterMap()
获得的数据是这样的

{username=[Ljava.lang.String;@7681b4d0,password=[Ljava.lang.String;@585ea230}

而之中Ljava.lang.String是一个字符串数组的字节码表示
【[】：表示一维数组 。
【[[】：表示二维数组 。
【L】：表示一个对象 。
【java.lang.String】：表示对象的类型 。
【@】：后面表示该对象的hashCode。
如果想获得值的话,需要遍历,值的获取使用Arrays.toString(值)
示例:

Map<String, String[]> map = request.getParameterMap();
        map.forEach((k,v)->{
            System.out.println(k+" : "+Arrays.toString(v));
        });

打印结果
password : [546565]
username : [zhkuii5565]
也可以直接利用BeanUtils封装对象,在直接调用对象就可以了
获得之后进行相关的操作就可以了.回调函数中的data是服务器返回来的数据.
用来接应并进行下一步的操作
示例

$.get("user/login",$("#loginForm").serialize(),function (data) {
					if(data.flag){
						location.href="index.html";
					}else{
						$("#errorMsg").html(data.errorMsg);
					}
				})

3. $.post():发送post请求
   语法: $.post(url,[data],[callback],[type])
        参数说明
             url:请求路径
             data:请求参数
             callback:回调函数
             type:响应参数类型
   示例:

$.post("ajaxSerlet",{username:"zkr"},function(data){
	alert(data)
},"text");

JSON

1. 概念： JavaScript Object Notation JavaScript对象表示法

   • json现在多用于存储和交换文本信息的语法
   • 进行数据的传输
   • JSON 比 XML 更小、更快，更易解析。

2. 语法:
   1.基本规则

   • 数据在名称/值对中：json数据是由键值对构成的
   • 键用引号(单双都行)引起来，也可以不使用引号
   • 值得取值类型：
     1. 数字（整数或浮点数）
     2. 字符串（在双引号中）
     3. 逻辑值（true 或 false）
     4. 数组（在方括号中） {“persons”:[{},{}]}
     5. 对象（在花括号中） {“User”:{“name”：“haha”,“age”:23…}}
     6. null

   2.获取方式
       1.json对象.键名
       2.json对象[“键名”]
       3.数组对象[索引]
       4.遍历

   3.示例

<script>
	//普通的json
	var p={"name":"小白",age:12,'gender':"男"};
	//这里json内部键名可以用双引号包裹也可以单引号,也可以没有,但是为了方便还是统一好一点
	//json数组
	var ps=[
	{"name":"小黑",age:12,'gender':"男"},
	{"name":"小黄",age:12,'gender':"男"},
	{"name":"小绿",age:12,'gender':"女"}
	];
	//JSON内部含有JSON
	var pss={"name":"大白","garde":{"语文":80,"数学":10}};
	//获取
	var name1 = p.name;
    alert(name1);
    var name2 = ps[1].name;
    alert(name2);
    var grade = pss["grade"].语文;
    alert(grade);
   //遍历数组每个键值对
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];//获取第i个json
            for(var key in p){//key直接为键名
                alert(key+":"+p[key]);
            }
        }
</script>

结果:依次弹出显示小白,小黄,80,和之后的数组每个键值对

Json转换

Json数据字符串转换为JSON对象

语法JSON.parse(text,reviver)
参数说明

1. text : 一个JSON数据的字符串格式
2. reviver: 可以省略,一个转换结果的函数， 将为对象的每个成员调用此函数。

示例

var p='{"name":"小白","age":12,"gender":"男"}';
var ps=JSON.parse();
document.write(ps.name);

页面输出小白

JSON数据转换成字符串

语法JSON.stringify(value,replace)
参数说明

1. value:必选参数。被变换的JSON值，一般是对象或数组。
2. replace: 可以省略,一个转换结果的函数

Java对象转换成JSON

使用JSON解析器
解析器:Jsonlib, Gson , fastjson , jackson
这里使用jackson
1.转换步骤
   ①. 导入jackson的相关jar包

pom.xml依赖坐标

<dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.9</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.9</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.9</version>
        </dependency>

   ②. 创建Jackson核心对象 ObjectMapper
   ③. 调用ObjectMapper
        1.调用转换方法
                * writeValue(参数1，obj):
                      参数1：
                                File：将obj对象转换为JSON字符串，并保存到指定的文件中
                                Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                                OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                * writeValueAsString(obj):将对象转为json字符串
示例

package text;

import com.fasterxml.jackson.databind.ObjectMapper;
import domain.People;
import domain.Person;
import org.junit.Test;

import java.io.*;
import java.util.*;

public class JacksonTest {
    @Test
    public void testJackson() throws Exception {
        People peo = new People("黑白黑","男",30);
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(new File("d://a.txt"),peo);
        mapper.writeValue(new FileWriter("d://b.txt"),peo);
        String s = mapper.writeValueAsString(peo);
        System.out.println(s);
    }
 }

测试结果:


2. 注解：
          1. @JsonIgnore：排除属性。
                    当转换是自动忽略,直接跳过

          2. @JsonFormat：属性值得格式化
                    * @JsonFormat(pattern = “yyyy-MM-dd”)
示例
People类中加入了Date类 birthday

package text;

import com.fasterxml.jackson.databind.ObjectMapper;
import domain.People;
import domain.Person;
import org.junit.Test;

import java.io.*;
import java.util.*;

public class JacksonTest {
    @Test
    public void testJackson() throws Exception {
        People peo = new People("黑白黑","男",30,new Date());
        ObjectMapper mapper = new ObjectMapper();
        String s = mapper.writeValueAsString(peo);
        System.out.println(s);
    }
}

不加 @JsonIgnore时,就变成了毫秒值
加过之后直接跳过
当加入 @JsonFormat(pattern = “yyyy-MM-dd”)时
加入时,直接加到变量的上一行

3. 复杂java对象转换

1. List：数组
2. Map：对象格式一致
   writeValueAsString可以直接将List变为json的数组
   map也是同样的,形成相应的键值对

JSON转换成Java对象

和上方前几步操作相同
引入,创建ObjectMapper对象
调用的方法不同
    调用readValue(json数据字符串,要转换的Java对象的Class)
示例

 @Test
    public void test5() throws Exception {
        String json="{\"gender\":\"男\",\"name\":\"黑小黑\",\"age\":22,\"birthday\":\"2021-10-06 12:13:22\"}";
        //中间的双引号需要用转义符号/
        ObjectMapper mapper =new ObjectMapper();
        People people = mapper.readValue(json, People.class);
        System.out.println(people);
    }

输出结果: