[Java | Web] JavaWeb——JSON与AJAX简介

目录

一、JSON 简介

1、什么是 JSON

2、JSON 的定义和访问

3、JSON 在 JS 中两种常用的转换方法

4、JSON 在 Java 中的使用

5、匿名内部类

二、AJAX 简介

1、什么是 AJAX

2、原生 JS 的 AJAX 请求示例

3、JQuery 中的 AJAX 请求


一、JSON 简介

1、什么是 JSON

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。

JSON 采用完全独立于语言的文本格式,而且很多语言都提供了对 JSON 的支持,使得 JSON 成为理想的数据交换语言。

  • 轻量级指的是跟 xml 进行比较;
  • 数据交换指的是客户端与服务器之间业务数据的传输格式。

2、JSON 的定义和访问

客户端和服务器都需要使用 JSON。

在客户端中以 JS 为例子使用 JSON。

(1)json 的定义

json 是由键值对组成,并且由 { } 包围。

<script type="text/javascript">
	// json的定义
	var jsonObj = {
		"key1" : 12,
		"key2" : "abc",
		"key3" : true,
		"key4" : [11, "abc", false],
		"key5" : {
			"key5_1" : 13,
			"key5+2" : "value"
		},
		"key6" : [{
			"key6_1?1" : 14,
			"key6_1.2" : 15,
		}, {
			"key6_2*1" : 16,
			"key6_2^2" : 17
		}]
	};
</script>

value 可以是:普通类型、数组、json、数组套json、等等。

(2)json 的访问

json 本身是一个对象,json 中的 key 可以理解为是对象中的一个属性。json 对象属性的访问也是使用 . 点运算符。

<script type="text/javascript">
	// json的定义
	var jsonObj = {
		"key1" : 12,
		"key2" : "abc",
		"key3" : true,
		"key4" : [11, "abc", false],
		"key5" : {
			"key5_1" : 13,
			"key5+2" : "value"
		},
		"key6" : [{
			"key6_1?1" : 14,
			"key6_1.2" : 15,
		}, {
			"key6_2*1" : 16,
			"key6_2^2" : 17
		}]
	};

	// json的访问
	alert(jsonObj.key1 + " + " + jsonObj.key2 + " + " + jsonObj.key3);

	alert(jsonObj.key4);
	for (var i = 0; i < jsonObj.key4.length; ++ i) {
		alert(jsonObj.key4[i]);
	}

	alert(jsonObj.key5);
	alert(jsonObj.key5.key5_1);
	alert(jsonObj.key5["key5+2"]);

	alert(jsonObj.key6);
	alert(jsonObj.key6[0]["key6_1?1"]);

</script>

3、JSON 在 JS 中两种常用的转换方法

(1)json 有两种形式

  • 对象形式,我们叫它 json 对象;
  • 字符串形式,我们叫它 json 字符串;

(2)转换方法

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

(3)使用场景

  • 一般要操作 json 中的数据的时候,需要使用 json 对象的格式;
  • 一般在客户端和服务器之间进行数据交换的时候,需要使用 json 字符串;

4、JSON 在 Java 中的使用

需要先导入 json 的 jar 包才能在 java 中使用 json。可以使用 google 提供的 gson.jar。

(1)JavaBean 和 json 的转换

(1-1)Person 类:

package com.pojo;

public class Person {
    private Integer id;
    private String name;

    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Person(Integer id, String name) {
        this.id = id;
        this.name = name;
    }

    public Person() {
    }
}

(1-2)JsonTest 类:

package com.json;

import com.google.gson.Gson;
import com.pojo.Person;
import org.junit.Test;

public class JsonTest {
    @Test
    public void javaBean() {
        Person person = new Person(1, "你好");
        Gson gson = new Gson();
        // JavaBean 转为 Json
        String jsonString = gson.toJson(person);
        System.out.println(jsonString);
        // Json 转为 JavaBean
        Person tmp = gson.fromJson(jsonString, Person.class);
        System.out.println(tmp);
    }
}

(1-3)输出:

(2)List 和 json 的转换

(2-1)PersonListType 类:

package com.pojo;

import com.google.gson.reflect.TypeToken;

import java.util.List;

public class PersonListType extends TypeToken<List<Person>> {

}

(2-2)JsonTest 类:

package com.json;

import com.google.gson.Gson;
import com.pojo.Person;
import com.pojo.PersonListType;
import org.junit.Test;

import java.util.ArrayList;
import java.util.List;

public class JsonTest {
    @Test
    public void List() {
        List<Person> personList = new ArrayList<>();
        personList.add(new Person(1, "你好"));
        personList.add(new Person(2, "hello"));
        Gson gson = new Gson();
        // List<Person> 转为 Json
        String jsonString = gson.toJson(personList);
        System.out.println(jsonString);
        // Json 转为 List<Person>
        List<Person> tmp1 = gson.fromJson(jsonString, personList.getClass());
        System.out.println(tmp1.get(0));

        List<Person> tmp2 = gson.fromJson(jsonString, new PersonListType().getType());
        System.out.println(tmp2.get(0));
    }
}

(2-3)输出:

(2-4)理解:

  • 显然 tmp1 并不是正确的 Person 对象,因为 Person 对象的 id 为 Integer 类型。并且打印 tmp1 还出现了 { },显然 List 保存的不是 Person,而是 Map 类型。
  • 如果从 Json 转换回的对象是一个 JavaBean,用 Person.class 属性就可以了;但是转换回的对象是一个 List 集合,那么就要使用 Type 类型。
  • 其中 Gson 的 jar 包提供了一个 TypeToken 类,就是用来将 Json 转换为集合的。只需要新建一个 java 类,继承 TypeToken 即可。

(3)Map 和 json 的转换

(3-1)PersonMapType 类:

package com.pojo;

import com.google.gson.reflect.TypeToken;

import java.util.Map;

public class PersonMapType extends TypeToken<Map<Integer, Person>> {
}

(3-2)JsonTest 类:

package com.json;

import com.google.gson.Gson;
import com.pojo.Person;
import com.pojo.PersonMapType;
import org.junit.Test;

import java.util.HashMap;
import java.util.Map;

public class JsonTest {
    @Test
    public void Map() {
       Map<Integer, Person> map = new HashMap<>();
       map.put(1, new Person(1, "你好"));
       map.put(2, new Person(2, "hello"));
       Gson gson = new Gson();
       // Map 转换为 Json
        String jsonString = gson.toJson(map);
        System.out.println(jsonString);
        // Json 转换为 Map
        Map<Integer, Person> tmp = gson.fromJson(jsonString, new PersonMapType().getType());
        System.out.println(tmp.get(1));
    }
}

(3-3)输出:

5、匿名内部类

观察 json 在 Java 中的使用,我们发现如果给每一个集合类型都添加一个 Type 类,那么将会占用很多的资源,所以我们可以将其写成匿名内部类的形式。

package com.json;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.pojo.Person;
import org.junit.Test;

import java.util.HashMap;
import java.util.Map;

public class JsonTest {
    @Test
    public void Map() {
       Map<Integer, Person> map = new HashMap<>();
       map.put(1, new Person(1, "你好"));
       map.put(2, new Person(2, "hello"));
       Gson gson = new Gson();
       // Map 转换为 Json
        String jsonString = gson.toJson(map);
        System.out.println(jsonString);
        // Json 转换为 Map
        Map<Integer, Person> tmp = gson.fromJson(jsonString, new TypeToken<Map<Integer, Person>>(){
            // 没有语句则留空
        }.getType());
        System.out.println(tmp.get(1));
    }
}

二、AJAX 简介

1、什么是 AJAX

AJAX 即 “Asynchronous JavaScript And XML”(异步 JS 和 XML),是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求,更新局部页面的技术。

特点:

  • 请求后浏览器地址栏不会改变;
  • 页面原有内容(未被修改的内容)保留;
  • 可以异步执行; 

2、原生 JS 的 AJAX 请求示例

(1)步骤

  • 首先创建 XMLHttpRequest(XHR)对象;

  • 调用 open() 方法设置请求参数:get/post、url、异步true/同步false;
  • 绑定 onreadystatechange 事件,获取响应对象(数据);
  • 将 json 字符串转换成 json 对象,把 value 显示给用户;
  • 调用 send() 方法发送请求;

(2)代码

(2-1)ajax.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<base href="http://localhost:8080/json_war_exploded/"/>
		<script type="text/javascript">
			// 在这里使用 JS 发起 Ajax 请求,访问 AjaxServlet
			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest(XHR)
				var xmlHttpRequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
				xmlHttpRequest.open("GET", "./start_AjaxServlet?action=javaScriptAjax", true);
// 				3、绑定onreadystatechange事件,处理请求完成后的操作。
				xmlHttpRequest.onreadystatechange = function() {
					if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
						// 把响应的数据显示在页面上
						var jsonObj = JSON.parse(xmlHttpRequest.responseText);
						document.getElementById("div01").innerText = "编号:" + jsonObj.id + ",姓名:" + jsonObj.name;
					}
				}
// 				4、调用send方法发送请求
				xmlHttpRequest.send();
			}
		</script>
	</head>
	<body>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
	</body>
</html>

(2-2)AjaxServlet 类:(BaseServlet 可以去介绍 Cookie 的文章中获取)

package com.web;

import com.google.gson.Gson;
import com.pojo.Person;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("接收 Ajax 请求");

        Person person = new Person(1, "你好");
        Gson gson = new Gson();

        String jsonString = gson.toJson(person);

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

3、JQuery 中的 AJAX 请求

一般开发中,不会自己去写原生的 AJAX 请求,而是使用 JS 的框架。

(1)$.ajax 方法

  • url,表示请求的地址;
  • type,表示请求的类型,GET/POST;
  • data,表示发送给服务器的数据,两种格式:name=value&name=value 或 { key:value };
  • success,请求成功,响应的回调函数;
  • dataType,响应的数据类型,常用:text、xml、json;

(2)$.get 方法和 $.post 方法(比 $.ajax 少了 type 参数)

  • url,请求的地址;
  • data,发送的数据;
  • callback,成功的回调函数;
  • type,返回的数据类型;

(3)$.getJSON(固定为 GET 请求,返回 JSON 数据)

  • url,请求的地址;
  • data,发送的数据;
  • callback,成功的回调函数;

(4)$.serialize 方法

  • 可以获取表单中所有表单项的内容,并以 name=value&name=value 的形式进行拼接。

(5)代码:

(5-1)Jquery_Ajax_request.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Insert title here</title>
	<base href="http://localhost:8080/json_war_exploded/"/>

	<script type="text/javascript" src="./script/jquery-1.7.2.js"></script>

	<script type="text/javascript">
		$(function() {
			// ajax请求
			$("#ajaxBtn").click(function(){
				$.ajax({
					url: "./start_AjaxServlet",
					data: "action=jQueryAjax", // 或者 data: {action: "jQueryAjax"},
					type: "get",
					success: function (data) {
						// alert("返回的数据是:" + data);
						var jsonObj = JSON.parse(data); // 如果 dataType 写的是 json,那么这里就不用转换
						$("#msg").html("ajax 编号:" + jsonObj.id + ",姓名:" + jsonObj.name);
					},
					dataType: "text"
				});
			});

			// ajax--get请求
			$("#getBtn").click(function(){
				$.get("./start_AjaxServlet", "action=jQueryGet", function (data) {
					var jsonObj = JSON.parse(data);
					$("#msg").html("get 编号:" + jsonObj.id + ",姓名:" + jsonObj.name);
				}, "text");
			});

			// ajax--post请求
			$("#postBtn").click(function(){
				$.post("./start_AjaxServlet", "action=jQueryPost", function (data) {
					var jsonObj = JSON.parse(data);
					$("#msg").html("post 编号:" + jsonObj.id + ",姓名:" + jsonObj.name);
				}, "text");
			});

			// ajax--getJson请求
			$("#getJSONBtn").click(function(){
				$.getJSON("./start_AjaxServlet", "action=jQueryGetJson", function (data) {
					var jsonObj = JSON.parse(data);
					$("#msg").html("getJson 编号:" + jsonObj.id + ",姓名:" + jsonObj.name);
				});
			});

			// ajax请求
			$("#submit").click(function(){
				// 把参数序列化
				var data = "action=jQuerySerialize&" + $("#form01").serialize();
				$.getJSON("./start_AjaxServlet", data, function (data) {
					var jsonObj = JSON.parse(data);
					$("#msg").html("Serialize 编号:" + jsonObj.id + ",姓名:" + jsonObj.name);
				});
			});

		});
	</script>
</head>
<body>
	<div>
		<button id="ajaxBtn">$.ajax请求</button>
		<button id="getBtn">$.get请求</button>
		<button id="postBtn">$.post请求</button>
		<button id="getJSONBtn">$.getJSON请求</button>
	</div>

	<div id="msg"></div>

	<br/><br/>
	<form id="form01" >
		用户名:<input name="username" type="text" /><br/>
		密码:<input name="password" type="password" /><br/>
		下拉单选:<select name="single">
			<option value="Single">Single</option>
			<option value="Single2">Single2</option>
		</select><br/>
		下拉多选:
		<select name="multiple" multiple="multiple">
			<option selected="selected" value="Multiple">Multiple</option>
			<option value="Multiple2">Multiple2</option>
			<option selected="selected" value="Multiple3">Multiple3</option>
		</select><br/>
		复选:
		<input type="checkbox" name="check" value="check1"/> check1
		<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
		单选:
		<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
		<input type="radio" name="radio" value="radio2"/> radio2<br/>
	</form>
	<button id="submit">提交--serialize()</button>
</body>
</html>

(5-2)AjaxServlet 类:

package com.web;

import com.google.gson.Gson;
import com.pojo.Person;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("接收 Ajax 请求");

        Person person = new Person(1, "你好");
        Gson gson = new Gson();

        String jsonString = gson.toJson(person);

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

    protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("调用 jQueryAjax 方法");

        Person person = new Person(1, "你好");
        Gson gson = new Gson();

        String jsonString = gson.toJson(person);

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

    protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("调用 jQueryGet 方法");

        Person person = new Person(1, "你好");
        Gson gson = new Gson();

        String jsonString = gson.toJson(person);

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

    protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("调用 jQueryPost 方法");

        Person person = new Person(1, "你好");
        Gson gson = new Gson();

        String jsonString = gson.toJson(person);

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

    protected void jQueryGetJson(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("调用 jQueryGetJson 方法");

        Person person = new Person(1, "你好");
        Gson gson = new Gson();

        String jsonString = gson.toJson(person);

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

    protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("调用 jQuerySerialize 方法");

        System.out.println("username: " + req.getParameter("username"));

        Person person = new Person(1, "你好");
        Gson gson = new Gson();

        String jsonString = gson.toJson(person);

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值