目录

1.什么是 JSON?

1.1 JSON 在 JavaScript 中的使用

1.1.1 json 的定义

1.1.2 json 的访问

1.1.3 json 的两个常用方法

1.2 JSON 在 java 中的使用

1.2.1 javaBean 和 json 的互转

1.2.2 List 和 json 的互转

1.2.3 map 和 json 的互转

2.AJAX 请求

2.1 什么是 AJAX 请求

2.2 AJAX的工作原理

2.3 AJAX使用步骤

2.4 XMLHttpRequest对象属性

2.5 原生 AJAX 请求的示例

2.3 jQuery 中的 AJAX 请求

1.什么是 JSON?

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。 这样就使得 JSON 成为理想的数据交换格式。

json 是一种轻量级的数据交换格式。  

轻量级指的是跟 xml 做比较。 

数据交换指的是客户端和服务器之间业务数据的传递格式。 

1.1 JSON 在 JavaScript 中的使用

1.1.1 json 的定义

        json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔， 多组键值对之间进行逗号进行分隔。

json 定义示例：

            // json的定义
			var jsonObj = {
				"key1":12,
				"key2":"abc",
				"key3":true,
				"key4":[11,"arr",false],
				"key5":{
					"key5_1" : 551,
					"key5_2" : "key5_2_value"
				},
				"key6":[{
					"key6_1_1":6611,
					"key6_1_2":"key6_1_2_value"
				},{
					"key6_2_1":6621,
					"key6_2_2":"key6_2_2_value"
				}]
			};

1.1.2 json 的访问

json 本身是一个对象。

json 中的 key 我们可以理解为是对象中的一个属性。 

json 中的 key 访问就跟访问对象的属性一样： json 对象.key 

json 访问示例： 

alert(typeof(jsonObj));// object  json就是一个对象
alert(jsonObj.key1); //12
alert(jsonObj.key2); // abc
alert(jsonObj.key3); // true
alert(jsonObj.key4);// 得到数组[11,"arr",false]
// json 中 数组值的遍历
for(var i = 0; i < jsonObj.key4.length; i++) {
	alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key5.key5_2);//key5_2_value
alert( jsonObj.key6 );// 得到json数组
// 取出来每一个元素都是json对象
var jsonItem = jsonObj.key6[0];
// alert( jsonItem.key6_1_1 ); //6611
alert( jsonItem.key6_1_2 ); //key6_1_2_value

alert(jsonObj);

1.1.3 json 的两个常用方法

json 的存在有两种形式。         一种是：对象的形式存在，我们叫它 json 对象。         一种是：字符串的形式存在，我们叫它 json 字符串。         一般我们要操作 json 中的数据的时候，需要 json 对象的格式。         一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。

        JSON.stringify()         把 json 对象转换成为 json 字符串         JSON.parse()            把 json 字符串转换成为 json 对象

代码示例 

// 把json对象转换成为 json字符串
var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toString
alert(jsonObjString);     
// 把json字符串。转换成为json对象
var jsonObj2 = JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc

1.2 JSON 在 java 中的使用

导入gson-2.2.4.jar

1.2.1 javaBean 和 json 的互转

    
    @Test
    public void test1(){
        Person person = new Person(1,"国哥好帅!");
        // 创建Gson对象实例
        Gson gson = new Gson();
        // toJson方法可以把java对象转换成为json字符串
        String personJsonString = gson.toJson(person);
        System.out.println(personJsonString);
        // fromJson把json字符串转换回Java对象
        // 第一个参数是json字符串
        // 第二个参数是转换回去的Java对象类型
        Person person1 = gson.fromJson(personJsonString, Person.class);
        System.out.println(person1);
    }

1.2.2 List 和 json 的互转

编写一个PersonListType类：

package com.atguigu.json;

import com.atguigu.pojo.Person;
import com.google.gson.reflect.TypeToken;

import java.util.ArrayList;

public class PersonListType extends TypeToken> {
}

 编写list和json相互转换的方法：

    @Test
    public void test2() {
        List personList = new ArrayList<>();

        personList.add(new Person(1, "国哥"));
        personList.add(new Person(2, "康师傅"));

        Gson gson = new Gson();

        // 把List转换为json字符串
        String personListJsonString = gson.toJson(personList);
        System.out.println(personListJsonString);

        List list = gson.fromJson(personListJsonString, new PersonListType().getType());
        System.out.println(list);
        Person person = list.get(0);
        System.out.println(person);
    }

1.2.3 map 和 json 的互转

    
    @Test
    public void test3(){
        Map personMap = new HashMap<>();

        personMap.put(1, new Person(1, "国哥好帅"));
        personMap.put(2, new Person(2, "康师傅也好帅"));

        Gson gson = new Gson();
        // 把 map 集合转换成为 json字符串
        String personMapJsonString = gson.toJson(personMap);
        System.out.println(personMapJsonString);
        
        //使用匿名内部类传参
        Map personMap2 = gson.fromJson(personMapJsonString, new TypeToken>(){}.getType());

        System.out.println(personMap2);
        Person p = personMap2.get(1);
        System.out.println(p);

    }

2.AJAX 请求

2.1 什么是 AJAX 请求

AJAX 即“ A synchronous J avascript A nd X ML ” （异步 JavaScript 和 XML ），是指一种创建交互式 网页 应用的网页开发 技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。异步即先各自执行各自的内容，互不影响。同步指有固定顺序地执行内容。 

Ajax 请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容

2.2 AJAX的工作原理

2.3 AJAX使用步骤

① 创建 XMLHttpRequest 对象

② 向服务器发送请求

③ 调用send方法发送请求

④ 在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

2.4 XMLHttpRequest对象属性

2.5 原生 AJAX 请求的示例

ajax.html页面请求代码

	
		
		
		
		
		
		
	
	

		ajax request
		
		
	
	

AjaxServlet程序代码

    
    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求过来了");
        Person person = new Person(1, "龙骨");
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

2.3 jQuery 中的 AJAX 请求

$.ajax 方法         url                            表示请求的地址         type                         表示请求的类型 GET 或 POST 请求         data                         表示发送给服务器的数据                              格式有两种：                                      一：name=value&name=value                                      二：{key:value}         success                 请求成功，响应的回调函数         dataType                响应的数据类型                                                常用的数据类型有：                                                       text 表示纯文本                                                       xml 表示 xml 数据                                                       json 表示 json 对象

// ajax请求
$("#ajaxBtn").click(function(){
	$.ajax({
		url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		// data:"action=jQueryAjax",
		data:{action:"jQueryAjax"},
		type:"GET",
		success:function (data) {
		// alert("服务器返回的数据是：" + data);
		// var jsonObj = JSON.parse(data);
		$("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
	},
	dataType : "json"
	});
});

$.get 方法和 $.post 方法         url                            请求的 url 地址         data                         发送的数据         callback                   成功的回调函数         type                         返回的数据类型

 

// ajax--get请求
$("#getBtn").click(function(){

	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
		$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
	},"json");

});

// ajax--post请求
$("#postBtn").click(function(){
	// post请求
	$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
		$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
});

$.getJSON 方法         url                     请求的 url 地址         data                 发送给服务器的数据         callback           成功的回调函数

// ajax--getJson请求
$("#getJSONBtn").click(function(){
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
		$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
	});
});

        表单序列化 serialize()         serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。

// ajax请求
$("#submit").click(function(){
	// 把参数序列化
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
		$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
	});
});

总结： $("#form01").serialize()                  获取表单内部的所有键值对

 摘自：尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版_哔哩哔哩_bilibili0基础如何学起？宋红康30天搞定Java核心：BV1Kb411W75N一键三连呀【点赞、投币、收藏】呀~本视频涵盖核心技术点有：Servlet程序、Filter过滤器、Listener监听器、jsp页面、EL表达式、JSTL标签库、jQuery框架、Cookie技术、Session会话、JSON使用、Ajax请求，并在讲解知识点过程中会带领大家完成一个书城项目。相对于旧版，本版本使用idea进行开https://www.bilibili.com/video/BV1Y7411K7zz?p=305