当前位置：首页 > news >正文

【JavaWeb】JSON、AJAX（305-317）

news 2025/7/6 10:02:14

305.JSON-什么是JSON

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

json 是一种轻量级的数据交换格式。
轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。

306.JSON-JSON的定义和访问

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

json 的访问
json 本身是一个对象。
json 中的 key 我们可以理解为是对象中的一个属性。
json 中的 key 访问就跟访问对象的属性一样： json 对象.key

json 示例：

<!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">// 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"}]};alert(typeof(jsonObj));// object  json就是一个对象alert(jsonObj.key1); //12alert(jsonObj.key2); // abcalert(jsonObj.key3); // truealert(jsonObj.key4);// 得到数组[11,"arr",false]// json 中 数组值的遍历for(var i = 0; i < jsonObj.key4.length; i++) {alert(jsonObj.key4[i]);}alert(jsonObj.key5.key5_1);//551alert(jsonObj.key5.key5_2);//key5_2_valuealert( jsonObj.key6 );// 得到json数组// 取出来每一个元素都是json对象var jsonItem = jsonObj.key6[0];alert( jsonItem.key6_1_1 ); //6611alert( jsonItem.key6_1_2 ); //key6_1_2_valuealert(jsonObj);// 把json对象转换成为 json字符串var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toStringalert(jsonObjString)// 把json字符串。转换成为json对象var jsonObj2 = JSON.parse(jsonObjString);alert(jsonObj2.key1);// 12alert(jsonObj2.key2);// abc</script></head><body></body>
</html>

307.JSON-JSON在JavaScript中两种常用的转换方法

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

308.JSON-JavaBean和json的相互转换

javaBean和json的互转

import com.atguigu.pojo.Person;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import org.junit.Test;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;public class JsonTest {@Testpublic 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);}
}

Person实体类（Bean）

package com.atguigu.pojo;public class Person {private Integer id;private String name;public Person() {}public Person(Integer id, String name) {this.id = id;this.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;}@Overridepublic String toString() {return "Person{" +"id=" + id +", name='" + name + '\'' +'}';}
}

309.JSON-List集合和json的相互转换

List 和json的互转

    @Testpublic void test2() {List<Person> 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);//json// 把json字符串转换ListList<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());//准确的转化为Person需要PersonListTypeSystem.out.println(list);Person person = list.get(0);System.out.println(person);}

package com.atguigu.json;import com.atguigu.pojo.Person;
import com.google.gson.reflect.TypeToken;
import java.util.ArrayList;public class PersonListType extends TypeToken<ArrayList<Person>> {
}

310.JSON-Map集合和json的相互转换

map 和json的互转

    @Testpublic void test3(){Map<Integer,Person> 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<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType());Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());//准确转换需要PersonMapType System.out.println(personMap2);Person p = personMap2.get(1);System.out.println(p);}

package com.atguigu.json;import com.atguigu.pojo.Person;
import com.google.gson.reflect.TypeToken;
import java.util.HashMap;public class PersonMapType extends TypeToken<HashMap<Integer, Person>> {
}

311.AJAX-什么是AJAX请求

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

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

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

312.AJAX-原生JavaScript的AJAX请求示例

1、我们首先要创建XMLHttpRequest
2、调用open方法设置请求参数：请求方式、请求地址、true异步false同步
3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作
4、调用send方法发送请求

<!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中javaScriptAjaxfunction ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest var xmlhttprequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。xmlhttprequest.onreadystatechange = function(){if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {//请求成功之后readyState 的值会改变alert("收到服务器返回的数据：" + xmlhttprequest.responseText);var jsonObj = JSON.parse(xmlhttprequest.responseText);// 把响应的数据显示在页面上document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;}}
// 				3、调用send方法发送请求xmlhttprequest.send();alert("我是最后一行的代码");}</script></head><body>
<!--		<a href="http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax">非Ajax</a>--><button onclick="ajaxRequest()">ajax request</button><div id="div01"></div><table border="1"><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr></table></body>
</html>

AjaxServlet

package com.atguigu.servlet;import com.atguigu.pojo.Person;
import com.google.gson.Gson;
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, "国哥");try {Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("  jQueryAjax == 方法调用了");Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("  jQueryGet  == 方法调用了");Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("  jQueryPost   == 方法调用了");Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("  jQueryGetJSON   == 方法调用了");Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("  jQuerySerialize   == 方法调用了");System.out.println("用户名：" + req.getParameter("username"));System.out.println("密码：" + req.getParameter("password"));Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}
}

BaseServlet

package com.atguigu.servlet;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;public abstract class BaseServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 解决post请求中文乱码问题// 一定要在获取请求参数之前调用才有效req.setCharacterEncoding("UTF-8");// 解决响应中文乱码resp.setContentType("text/html; charset=UTF-8");String action = req.getParameter("action");try {// 获取action业务鉴别字符串，获取相应的业务 方法反射对象Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
//            System.out.println(method);// 调用目标业务 方法method.invoke(this, req, resp);} catch (Exception e) {e.printStackTrace();throw new RuntimeException(e);// 把异常抛给Filter过滤器}}
}

313.AJAX-AJAX请求的特点说明

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

同步时，请求没有结束，下面的代码都不能执行。当有好多按钮，只能等一个按钮执行完才能点其它按钮

314.AJAX-jQuery的ajax方法

$.ajax 方法

属性	作用
url	表示请求的地址
type	表示请求的类型 GET 或 POST 请求
data	表示发送给服务器的数据
success	请求成功，响应的回调函数
dataType	响应的数据类型

data格式有两种：
1、name=value&name=value
2、{key:value}

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"//直接用json，不需要自己转了});});

<!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" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){// 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"});});// 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");});// 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);});});// 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);});});});</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>

315.AJAX-jQuery的get和post方法

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");});

316.AJAX-jQuery的getJSON方法

$.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);});
});

317.AJAX-jQuery的serialize方法

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

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