JavaWeb学习笔记——JSON、Ajax请求
JSON、Ajax
- JSON
-
- 介绍
- JSON 在 JavaScript 中的使用
-
- 定义
- 访问
- 方法
- JSON 在 Java 中的使用
-
- json 和 JavaBean 的相互转换
- json 和 List 的相互转换
- json 和 Map 的相互转换
- Ajax 请求
-
- 介绍
- JavaScript 中的 Ajax 请求
- JQuery 中的 Ajax 请求
-
- $.ajax()
- $.get() 和 $.post()
- $.getJSON()
- 表单序列化 serialize()
JSON
介绍
- JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。
- JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持，这就使得 JSON 成为理想的数据交换格式。其中，轻量级指的是跟 xml 做比较，数据交换指的是客户端和服务器之间数据的传递格式。
JSON 在 JavaScript 中的使用
定义
json 由键值对组成，并且用大括号包围，键名用引号引起，键和值之间使用冒号进行分隔，多组键值对之间使用逗号进行分隔。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json</title>
<script type="text/javascript">
var jsonObj = {
"key1" : 123,
"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"
}]
};
</script>
</head>
<body>
</body>
</html>
访问
json 本身是一个对象。
获取 json 中键为 key 的值：json对象.key；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json</title>
<script type="text/javascript">
var jsonObj = {
"key1" : 123,
"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"
}]
};
alert(jsonObj.key1);//123
alert(jsonObj.key4[0]);//11
alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key6[1].key6_2_1);//6611
</script>
</head>
<body>
</body>
</html>
方法
json 的两种形式：
- 对象的形式存在——json 对象，常用于操作 json 中的数据时使用。
- 字符串的形式存在——json 字符串，常用于在客户端和服务器之间进行数据交换时使用。
在script标签中：
| 方法 | 意义 |
|---|---|
| JSON.stringify( json对象 ) | 把 json 对象转换成为 json 字符串 |
| JSON.parse( json字符串 ) | 把 json 字符串转换成为 json 对象 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json</title>
<script type="text/javascript">
var jsonObj = {
"key1" : 123,
"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"
}]
};
/*
在script标签中：
JSON.stringify(json对象) 把json对象转换成为json字符串
JSON.parse(json字符串) 把json字符串转换成为json对象
*/
var jsonString = JSON.stringify(jsonObj);
alert(jsonString);
var jsonObject = JSON.parse(jsonString);
alert(jsonObject);
</script>
</head>
<body>
</body>
</html>
JSON 在 Java 中的使用
json 和 JavaBean 的相互转换
导入 Google 提供的 gson.jar 包。
| 方法 | 意义 |
|---|---|
| String toJson(Object obj) | 将 obj 对象转换成 json 字符串 |
| T fromJson(String str, Class clazz) | 将 json 字符串转换成 Object 对象 |
JsonTest.java
@Test
public void JavaBean_JSON() {
//创建JavaBean
Person person = new Person("mcc", 20);
//创建Gson对象
Gson gson = new Gson();
//String toJson(Object obj) 将obj对象转换成json字符串
String perJson = gson.toJson(person);
System.out.println(perJson);//{"name":"mcc","age":20}
//T fromJson(String str, Class clazz) 将json字符串转换成Object对象
Person per = gson.fromJson(perJson, Person.class);
System.out.println(per);//Person [name=mcc, age=20]
}
Person.java
package javaBean;
public class Person {
private String name;
private int age;
public Person() {
super();
}
public Person(String name, int age) {
super();
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
return "Person [name=" + name + ", age=" + age + "]";
}
}
json 和 List 的相互转换
JsonTest.java
@Test
public void List_JSON() {
List<Person> personList = new ArrayList<Person>();
Person per1 = new Person("1", 19);
Person per2 = new Person("2", 20);
Person per3 = new Person("3", 21);
personList.add(per1);
personList.add(per2);
personList.add(per3);
//创建Gson对象
Gson gson = new Gson();
//将List集合转换为JSON字符串
String perListJson = gson.toJson(personList);
System.out.println(perListJson);//[{"name":"1","age":19},{"name":"2","age":20},{"name":"3","age":21}]
//将json字符串转换回List集合
List<Person> perList = gson.fromJson(perListJson, new PersonListType().getType());
System.out.println(perList);//[Person [name=1, age=19], Person [name=2, age=20], Person [name=3, age=21]]
}
PersonListType.java
package json;
import java.util.ArrayList;
import com.google.gson.reflect.TypeToken;
import javaBean.Person;
/**
* 编写一个类，继承TypeToken<>类，泛型为json字符串想要转换成的List集合的类型,
* 这里的List类型为：ArrayList
* @author MCC
*
*/
public class PersonListType extends TypeToken<ArrayList<Person>>{
}
json 和 Map 的相互转换
JsonTest.java
@Test
public void Map_JSON() {
Map<Integer,Person> personMap = new HashMap<Integer,Person>();
personMap.put(1, new Person("4", 20));
personMap.put(2, new Person("5", 21));
personMap.put(3, new Person("6", 22));
//创建Gson对象
Gson gson = new Gson();
//将Map集合转换为JSON字符串
String personMapJson = gson.toJson(personMap);
System.out.println(personMapJson);//{"1":{"name":"4","age":20},"2":{"name":"5","age":21},"3":{"name":"6","age":22}}
//将json字符串转换回Map集合
/*
Map perMap = gson.fromJson(personMapJson, new PersonMapType().getType());
System.out.println(perMap);//{1=Person [name=4, age=20], 2=Person [name=5, age=21], 3=Person [name=6, age=22]}
*/
//为了避免每次将JSON字符串转换为集合对象时都需要单独创建一个类，占用内存，可以使用匿名内部类来完成
Map<Integer,Person> perMap = gson.fromJson(personMapJson, new TypeToken<HashMap<Integer,Person>>() {
}.getType());
System.out.println(perMap);//{1=Person [name=4, age=20], 2=Person [name=5, age=21], 3=Person [name=6, age=22]}
}
PersonMapType.java
package json;
import java.util.HashMap;
import com.google.gson.reflect.TypeToken;
import javaBean.Person;
/**
* 编写一个类，继承TypeToken<>类，泛型为json字符串想要转换成的List集合的类型,
* 这里的Map类型为：HashMap
* @author MCC
*
*/
public class PersonMapType extends TypeToken<HashMap<Integer,Person>>{
}
Ajax 请求
介绍
- AJAX，Asynchronous Javascript And XML，异步 JavaScript 和 XML，是指一种创建交互式网页应用的网页开发
技术。 - Ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
- Ajax 请求的局部更新，浏览器地址栏中的地址不会发生变化。
- 局部更新不会舍弃原来页面的内容，只是在原有页面上进行更新。
JavaScript 中的 Ajax 请求
ajax.jsp
<!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>
<script type="text/javascript">
//使用JavaScript语言发起Ajax请求，访问AjaxServlet中的ajax方法
function ajaxRequest() {
// 1、创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
// 2、调用open方法设置请求参数
xmlHttpRequest.open("GET","http://localhost:8080/json_ajax_i18n/ajaxServlet?action=ajax",true);
// 3、绑定onreadystatechange事件，处理请求完成后的操作。
xmlHttpRequest.onreadystatechange = function(){
//当满足如下条件时，才能收到响应的数据
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
//new XMLHttpRequest().responseXML 获取响应的字符串
//new XMLHttpRequest().responseText 获取响应的xml数据
var respJsonString = xmlHttpRequest.responseText;
//将json字符串转换为json对象，取出里面的值，并显示
var respJsonObj = JSON.parse(respJsonString);
document.getElementById("div01").innerHTML = "姓名："+respJsonObj.name+"，年龄："+respJsonObj.age;
}
}
// 4、调用send方法发送请求
xmlHttpRequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01"></div>
</body>
</html>
AjaxServlet.java
protected void ajax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("ajax");
Person per = new Person("mcc", 20);
//将对象数据发送给其他客户端或者服务器，将该对象转换为json字符串发送
String perJson = new Gson().toJson(per);
resp.getWriter().write(perJson);
}
JQuery 中的 Ajax 请求
$.ajax()
$.ajax(url，type，data，success，dataType)；
- 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/json_ajax_i18n/ajaxServlet",
//发送给服务器的数据（参数信息等）
data:"action=jQueryAjax",
type:"Get",
//success的回调函数中，必须传入一个参数，该参数用来接收ajax请求后，服务器响应的数据
success:function(msg){
$("#showInfo").html("ajax 姓名："+msg.name+"，年龄："+msg.age);
},
//dataType表示响应的数据类型，如果为text，则需要手动转换为json对象，才可以按照上面代码输出，
//如果为json，则返回的数据已经是json对象，不需要手动转换了
dataType:"json"
});
});
$.get() 和 $.post()
$.get(url，data，callback，type)
- url：请求的 url 地址
- data：发送给服务器的参数信息
- callback：成功的回调函数
- type：返回的数据类型
// ajax--get请求
/*
$.get()方法和$.post()方法：参数要按顺序传入
url 请求的url地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型
*/
$("#getBtn").click(function(){
$.get("http://localhost:8080/json_ajax_i18n/ajaxServlet","action=get",
function(msg){
$("#showInfo").html("get 姓名："+msg.name+"，年龄："+msg.age);
},"json");
});
// ajax--post请求
$("#postBtn").click(function(){
$.post("http://localhost:8080/json_ajax_i18n/ajaxServlet","action=post",
function(msg){
$("#showInfo").html("post 姓名："+msg.name+"，年龄："+msg.age);
},"json");
});
$.getJSON()
$.getJSON(url，data，callback)
- url：请求的 url 地址
- data：发送给服务器的参数信息
- callback：成功的回调函数
// ajax--getJson请求
/*
$.getJSON()方法
url 请求的url地址
data 发送给服务器的数据
callback 成功的回调函数
*/
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/json_ajax_i18n/ajaxServlet","action=getJSON",
function(msg){
$("#showInfo").html("getJSON 姓名："+msg.name+"，年龄："+msg.age);
});
});
表单序列化 serialize()
serialize()：获取表单中所有表单项的内容，并以 name=value&name=value 的形式进行拼接。
// serialize()：获取表单中所有表单项的内容，并以 name=value&name=value 的形式进行拼接
$("#submit").click(function(){
// 表单序列化
var serialize = $("#form01").serialize();
$.getJSON("http://localhost:8080/json_ajax_i18n/ajaxServlet","action=serialize&"+serialize,
function(msg){
$("#showInfo").html("serialize 姓名："+msg.name+"，年龄："+msg.age);
});
});
AjaxServlet.java
package ajax.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import javaBean.Person;
public class AjaxServlet extends BaseServlet{
private static final long serialVersionUID = 1L;
protected void ajax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("ajax");
Person per = new Person("mcc", 20);
//将对象数据发送给其他客户端或者服务器，将该对象转换为json字符串发送
String perJson = new Gson().toJson(per);
resp.getWriter().write(perJson);
}
protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("jQueryAjax");
Person per = new Person("mcc", 20);
//将对象数据发送给其他客户端或者服务器，将该对象转换为json字符串发送
String perJson = new Gson().toJson(per);
resp.getWriter().write(perJson);
}
protected void get(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("get");
Person per = new Person("mcc", 20);
//将对象数据发送给其他客户端或者服务器，将该对象转换为json字符串发送
String perJson = new Gson().toJson(per);
resp.getWriter().write(perJson);
}
protected void post(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("post");
Person per = new Person("mcc", 20);
//将对象数据发送给其他客户端或者服务器，将该对象转换为json字符串发送
String perJson = new Gson().toJson(per);
resp.getWriter().write(perJson);
}
protected void getJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("getJSON");
Person per = new Person("mcc", 20);
//将对象数据发送给其他客户端或者服务器，将该对象转换为json字符串发送
String perJson = new Gson().toJson(per);
resp.getWriter().write(perJson);
}
protected void serialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("serialize");
System.out.println("username="+req.getParameter("username")+", password="+req.getParameter("password"));
Person per = new Person("mcc", 20);
//将对象数据发送给其他客户端或者服务器，将该对象转换为json字符串发送
String perJson = new Gson().toJson(per);
resp.getWriter().write(perJson);
}
}