2023.3.13学习日志

1、JSON学习

1.1、什么是 JSON

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

和生成。 它基于 JavaScript Programming Language,

Standard ECMA-262 3rd Edition - December 1999 的一

个子集。 JSON 采用完全独立于语言的文本格式，但是也使用了类似于 C 语言家族的习惯（包括 C, C++, C#, Java,

JavaScript, Perl, Python 等）。 这些特性使 JSON 成为理想的数据交换语言。

1.2、JSON 对象定义和基本使用

在标准的 json 格式中，

json 对象由在括号括起来，对象中的属性也就是 json 的 key 是一个字符串，所以一定要使用

双引号引起来。每组 key 之间使用逗号进行分隔。

1.2.1、JSON 的定义

Json 定义格式：

var 变量名 = {

“key” : value ,

// Number 类型

“key2” : “value” ,

// 字符串类型

“key3” : [] ,

// 数组类型

“key4” : {},

// json 对象类型

“key5” : [{},{}]

// json 数组“玩转”Java 系列

};

var jsons = {

"key1":"abc", // 字符串类型

"key2":1234, // Number

"key3":[1234,"21341","53"], // 数组

"key4":{

// json 类型

"key4_1" : 12,

"key4_2" : "kkk"

},

"key5":[{

// json 数组

"key5_1_1" : 12,

"key5_1_2" : "abc"

},{

"key5_2_1" : 41,

"key5_2_2" : "bbj"

}]

};

1.2.2、JSON 对象的访问

json 对象，顾名思义，就知道它是一个对象。里面的 key 就是对象的属性。我们要访问一个对象的属性，只需要使

用【对象名.属性名】的方式访问即可。

<script type="text/javascript">

// json 的定义

var jsons = {

"key1":"abc", // 字符串类型

"key2":1234, // Number

"key3":[1234,"21341","53"], // 数组

"key4":{

// json 类型

"key4_1" : 12,

"key4_2" : "kkk"

},

"key5":[{

// json 数组

"key5_1_1" : 12,

"key5_1_2" : "abc"

},{

"key5_2_1" : 41,

"key5_2_2" : "bbj"

}]

};

// 访问 json 的属性“玩转”Java 系列

alert(jsons.key1); // "abc"

// 访问 json 的数组属性

alert(jsons.key3[1]); // "21341"

// 访问 json 的 json 属性

alert(jsons.key4.key4_1);//12

// 访问 json 的 json 数组

alert(jsons.key5[0].key5_1_2);//"abc"

</script>

1.3、JSON 中两个常用的方法。

JSON 对象和字符串对象的互转

JSON.stringify( json );

此方法可以把一个 json 对象转换成为 json 字符串

JSON.parse( jsonString );

此方法可以把一个 json 字符串转换成为 json 对象

<script type="text/javascript">

// 一个 json 对象

var obj = {

"a" : 12,

"c" : "str"

};

// 把 json 对象转换成为字符串对象

var objStr = JSON.stringify(obj);

//

alert(objStr);

// 把 json 对象的字符串，转换成为 json 对象

var jsonObj = JSON.parse(objStr);

alert(jsonObj);

</script>

1.4、JSON 在 java 中的使用(****重点)

我们要使用 json 和 java 中使用，我们需要使用到一个第三方的包。它就是 gson.jar。“玩转”Java 系列

Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。可以将一个 JSON 字符串

转成一个 Java 对象，或者反过来。

json 在 java 中的操作。常见的有三种情况。

1、java 对象和 json 的转换

2、java 对象 list 集合和 json 的转换

3、map 对象和 json 的转换

package com.atguigu.gson;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import com.google.gson.Gson;

import com.google.gson.reflect.TypeToken;

public class GsonTest {

static class Person {

private int age;

private String name;

public Person() {

// TODO Auto-generated constructor stub

}

public Person(int age, String name) {

this.age = age;

this.name = name;

}

public int getAge() {

return age;

}

public void setAge(int age) {

this.age = age;

}“玩转”Java 系列

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

@Override

public String toString() {

return "Person [age=" + age + ", name=" + name + "]";

}

}

// 要把复杂的 json 字符串转换成为 java 对象。需要继承 TypeToken 类。

// 并把返回的类型当成 TypeToken 的泛型注入

static class PersonType extends TypeToken<List<Person>> {

}

public static void main(String[] args) {

// json 操作，一定要先 new 一个 gson 对象。

Gson gson = new Gson();

// java 对象--json

Person person = new Person(12, "wzg168");

// 把对象转成为 json 字符串

String personjson = gson.toJson(person);

System.out.println(personjson);

// 把 json 字符串转换成为 java 对象

Person p = gson.fromJson(personjson, Person.class);

System.out.println(p);

System.out.println("------------------------------------------");

// 2、java 对象 list 集合和 json 的转换

List<Person> list = new ArrayList<Person>();

for (int i = 0; i < 3; i++) {

list.add(new Person(10 * i, "name-" + i));

}

String jsonListString = gson.toJson(list);

System.out.println(jsonListString);

// 把 json 数组转换成为 List 对象

// List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());

// 我们也可以使用匿名内部类

List<Person> ps = gson.fromJson(jsonListString, new TypeToken<List<Person>>() {

}.getType());“玩转”Java 系列

System.out.println(ps);

System.out.println("------------------------------------------");

// 3、map 对象和 json 的转换

Map<String, Person> mapPerson = new HashMap<String, GsonTest.Person>();

// 添加 person 到 map 中

mapPerson.put("p1", new Person(1, "person-1"));

mapPerson.put("p2", new Person(2, "person-2"));

// 把 map 转换成为 json 对象

String jsonMapString = gson.toJson(mapPerson);

System.out.println(jsonMapString);

// 通过使用匿名内部类的方式

Map<String, Person> map = gson.fromJson(jsonMapString,

new TypeToken<HashMap<String, Person>>() {}.getType());

System.out.println(map);

}

}

2、Ajax 学习

2.1、什么是 Ajax？

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的

网页开发技术。

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

2.2、javaScript 原生 Ajax 请求

原生的 Ajax 请求，

1、我们首先要创建 XMLHttpRequest 对象

2、调用 open 方法设置请求参数

3、调用 send 方法发送请求

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

1）创建一个 html 页面，发起请求。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"“玩转”Java 系列

"" target="_blank">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>

<script type="text/javascript">

function ajaxRequest() {

//

1、我们首先要创建 XMLHttpRequest

var xhr = new XMLHttpRequest();

//

2、调用 open 方法设置请求参数

xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);

//

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

xhr.onreadystatechange = function() {

// 判断请求完成，并且成功

if (xhr.readyState == 4 && xhr.status == 200) {

document.getElementById("div01").innerHTML = xhr.responseText;

}

}

//

3、调用 send 方法发送请求

xhr.send();

}

</script>

</head>

<body>

<button οnclick="ajaxRequest()">ajax request</button>

<div id="div01">

</div>

</body>

</html>

2）创建一个 AjaxServlet 程序接收请求

package com.atguigu.servlet;

import java.io.IOException;

import java.util.Random;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.atguigu.gson.GsonTest;“玩转”Java 系列

import com.google.gson.Gson;

public class AjaxServlet extends BaseServlet {

private static final long serialVersionUID = 1L;

protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException {

System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));

Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

}

}

3）在 web.xml 文件中的配置：

<servlet>

<servlet-name>AjaxServlet</servlet-name>

<servlet-class>com.atguigu.servlet.AjaxServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>AjaxServlet</servlet-name>

<url-pattern>/ajaxServlet</url-pattern>

</servlet-mapping>

3）测试效果

通过上面的代码我们发现。编写原生的 JavaScript 我们自己要写很多的代码。而且还要考虑浏览器兼容问题。所以“玩转”Java 系列

使用起来非常的不方便。那我们工作之后。怎么处理 Ajax 请求呢。我们一般会使用 JavaScript 的框架来解决这个问

题，比如说我们前面学到的 Jquery 框架。它就有很好的 Ajax 解决方案。

2.3、JQuery 的 Ajax 请求(重点****)

四个 Ajax 请求方法

$.ajax 方法

$.get 方法

$.post 方法

$.getJSON 方法

一个表单序列化方法：serialize()表单序列化方法

如何使用上面的五个方法：

在 JQuery 中和 Ajax 请求有关的方法有四个

$.ajax 请求参数

url：

请求的地址

type :

请求的方式

get 或 post

data :

请求的参数

string 或 json

success:

成功的回调函数

dataType:

返回的数据类型

常用 json 或 text

下面的方法必须遵守参数的顺序

$.get 请求和$.post 请求

url:请求的 URL 地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text。

Jquery 的$.getJSON

url:待载入页面的 URL 地址“玩转”Java 系列

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

表单的序列化

serialize() 方法可以把一个 form 表单中所有的表单项。都以字符串 name=value&name=value 的形式进行拼接，省去

我们很多不必要的工作。

由于$.get、$.post 和 getJSON 这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所

以我们以$.ajax()方法的使用为示例进行展示：

1）Jquery_Ajax_request.html 的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"" target="_blank">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>

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

<script type="text/javascript">

$(function(){

// ajax 请求

$("#ajaxBtn").click(function(){

$.ajax({

url : "ajaxServlet", // 请求地址

error:function(){

// 请求失败回调

alert("请求失败");

},

success:function(data){ // 请求成功回调

alert( data );

},

type:"POST",

// 请求的方式

dataType:"json",

// 返回的数据类型为 json 对象

data:{

// 请求的参数

action:"jqueryAjax",

a:12,

date: new Date()

}

});

});“玩转”Java 系列

// ajax--get 请求

$("#getBtn").click(function(){

$.get(

"ajaxServlet",{

action:"jqueryGet",

a:12,

date:new Date()

},function(data){alert(data);},"json"

);

});

// ajax--post 请求

$("#postBtn").click(function(){

// post 请求

$.post(

"ajaxServlet", // 请求路径

{

// 请求参数

action:"jqueryPost",

a:12,

date:new Date()

},

function(data){ alert( data ) }, // 成功的回调函数

"text"

// 返回的数据类型

);

});

// ajax--getJson 请求

$("#getJsonBtn").click(function(){

// 调用

$.getJSON(

"ajaxServlet",

// 请求路径

{

// 请求参数

action:"jqueryGetJSON",

a:12,

date:new Date()

},

function(data){ alert( data ) } // 成功的回调函数

);

});

// ajax 请求

$("#submit").click(function(){

// 把参数序列化

var data = $("#form01").serialize();

alert(data);“玩转”Java 系列

});

});

</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>

<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/>

<input id="submit" type="submit" />

</form>

</body>

</html>

2)AjaxServlet 的代码如下：

package com.atguigu.servlet;

import java.io.IOException;

import java.util.Random;“玩转”Java 系列

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.atguigu.gson.GsonTest;

import com.google.gson.Gson;

public class AjaxServlet extends BaseServlet {

private static final long serialVersionUID = 1L;

protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException {

System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));

Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

}

protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println("jqueryAjax 请求过来了 a--" + request.getParameter("a"));

Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

}

protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println("jqueryGet 请求过来了 a--" + request.getParameter("a"));

Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

}

protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println("jqueryPost 请求过来了 a--" + request.getParameter("a"));

Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

}“玩转”Java 系列

protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException {

System.out.println("jqueryGetJSON 请求过来了 a--" + request.getParameter("a"));

Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

}

}