Json 与 Ajax 的研究
Json
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
对象由花括号括起来的逗号分割的成员构成，成员是字符串键和上文所述的值由逗号分割的键值对组成
常见的 Json 格式
{"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}}
[{"name": "John Doe", "age": 18},{"name": "John Doe", "age": 18},{"name": "John Doe", "age": 18}]
// {}代表对象，[]代表数组，可以互相无限循环嵌套。
/* json的取值
准备一个json字符串对象
json = {"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}}
1.单纯的使用key取值 json.name
2.如果 key 值是数字 json.[2] 2代表key 如同 json={2:10}
3.使用万能的map json.['name'] 无论key的值是数字还是字符串都能取到值
4.如果是属于数组对象的下标值获取数组的下标对象 json.[1].name 取json的第二个元素下的key为name 的值
*/
1、JavaScript的 Json的转换
json 与 JavaScript 对象
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
json 与 JavaScript 互相转换
// 必须在 JavaScript 标签中，以下内容
// 1. json字符串转换为 obj
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
// 2. JavaScript对象解析为Json 对象
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
2、Json 在 Spring 中的使用
1、搭建环境
1、创建空的maven项目，导入以下依赖
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13</version>
</dependency>
<!--spring-webmvc 依赖-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.5</version>
</dependency>
<!--servlet 依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
</dependency>
<!--jsp 依赖-->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.3</version>
</dependency>
<!--jstl表达式 依赖-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
2、添加web框架支持
3、在web.xml中添加前端控制器（DispatcherServlet类）
<!--1.注册DispatcherServlet-->
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--关联一个springmvc的配置文件:【servlet-name】-servlet.xml-->
<init-param>
<!--关联 springmvc 的配置文件，这里文件名可以随便，下面是官方推荐的。-->
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc-servlet.xml</param-value>
</init-param>
<!--启动级别设置为 1级，在服务器启动的时候就启动，用来控制，所有的请求-->
<load-on-startup>1</load-on-startup>
</servlet>
<!--/ 匹配所有的请求；（不包括.jsp）-->
<!--/* 匹配所有的请求；（包括.jsp）-->
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
4、配置上一步中包含的 springmvc-servlet.xml 的文件在其中加入视图解析器，映射映射器，适配映射器
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- 自动扫描包，让指定包下的注解生效,由IOC容器统一管理 -->
<context:component-scan base-package="com.wyx.controller"/>
<!-- 让Spring MVC不处理静态资源
添加这个，可以让 SpringMVC 过滤一些图片，音乐，视频，等静态资源 （html,css,js）
-->
<mvc:default-servlet-handler />
<!--添加这个 MVC驱动 可以免配，映射适配器，和适配处理器-->
<mvc:annotation-driven />
<!--视图解析器:DispatcherServlet给他的ModelAndView-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
<!--前缀：用来拼接请求的地址-->
<property name="prefix" value="/WEB-INF/jsp/"/>
<!--后缀：用来拼接请求的地址-->
<property name="suffix" value=".jsp"/>
</bean>
</beans>
5、根据上一步的自动扫描包建立相应的包
6、创建测试类
package com.wyx.controller;
import com.alibaba.fastjson.JSON;
import com.wyx.dao.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class SpringMvcJson {
//@ResponseBody 返回的值不会走视图解析器，而是返回字符串
@ResponseBody
@RequestMapping("/json")
public String json1(){
String str = "hello";
return str;
}
}
7、配置 Tomcat 并启动测试
2、开始使用
创建实体类
package com.wyx.dao;
public class User {
private String name;
private String sex;
private int age;
public User() {
}
public User(String name, String sex, int age) {
this.name = name;
this.sex = sex;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
return "User{" +
"name='" + name + '\'' +
", sex='" + sex + '\'' +
", age=" + age +
'}';
}
}
向 pom.xml中添加阿里巴巴开源的 fastjson
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.75</version>
</dependency>
编写测试类 Controller
package com.wyx.controller;
import com.alibaba.fastjson.JSON;
import com.wyx.dao.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.Date;
@Controller
public class SpringMvcJson {
//@ResponseBody 返回的值不会走视图解析器，而是返回字符串
@ResponseBody
@RequestMapping("/json")
public String json1(){
User user = new User("岑韩国","男",12);
String str = JSON.toJSONString(user);
return str;
}
}
测试出现乱码
解决乱码的方法：
1、在 @RequestMapping 中加入produces属性，设置返回值和编码类型 （不常用）
// value不能少
@RequestMapping(value = "/json",produces = "application/json;charset=utf-8")
2、第二种方法是在 mvc驱动 中配置乱码解析，添加以下配置
<!--添加这个 MVC驱动 可以免配，映射适配器，和适配处理器-->
<mvc:annotation-driven>
<!--使用前，记得修改原来的 <mvc:annotation-driven/>-->
<mvc:message-converters register-defaults="true">
<!-- string乱码 -->
<bean id="stringHttpMessageConverter" class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<!-- fastJson配置 -->
<bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/json;charset=UTF-8</value>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
解决后测试
3、fastjson 常用方法
/*
fastjson 常用方法
public static final Object parse(String text); // 把JSON文本parse为JSONObject或者JSONArray
public static final JSONObject parseObject(String text)； // 把JSON文本parse成JSONObject
public static finalT parseObject(String text, Class clazz); // 把JSON文本parse为JavaBean
public static final JSONArray parseArray(String text); // 把JSON文本parse成JSONArray
public static finalList parseArray(String text, Class clazz); //把JSON文本parse成JavaBean集合 public static final String toJSONString(Object object); // 将JavaBean序列化为JSON文本
public static final String toJSONString(Object object, boolean prettyFormat); // 将JavaBean序列化为带格式的JSON文本
public static final Object toJSON(Object javaObject); //将JavaBean转换为JSONObject或者JSONArray。
*/
4、返回List
@ResponseBody
@RequestMapping("/json1")
public String json(){
List<User> userList= new ArrayList<User>();
userList.add(new User("岑韩国","男",12));
userList.add(new User("啦啦啦","女",10));
userList.add(new User("王玉星","女",11));
userList.add(new User("岑韩","男",18));
return JSON.toJSONString(userList);
}
测试结果
5、返回时间
@ResponseBody
@RequestMapping("/json2")
public String json2(){
Date date = new Date();
/*
* JSON.toJSONString(date) 输出格式是时间戳
* JSON.toJSONStringWithDateFormat(date) 默认形式 yyyy-MM-dd HH:mm:ss
* JSON.toJSONStringWithDateFormat(date,"传入想输出的格式") yyyy-MM-dd HH:mm:ss.SSS 显示毫秒级别
* jsonString = JSON.toJSONString(user, SerializerFeature.UseISO8601DateFormat); //ISO-8601日期格式 2018-01-25T20:53:09.616+08:00
*
* JSON.DEFFAULT_DATE_FORMAT = "yyyy-MM-dd"; //修改全局时间格式
* jsonString = JSON.toJSONString(user, SerializerFeature.WriteDateUseDateFormat); //显示上面修改的全局时间格式
* */
return JSON.toJSONStringWithDateFormat(date,"yyyy-MM-dd HH:mm:ss");
}
测试结果
6、jackson 使用
搭建环境和上面一样，只需要在 pom.xml 中添加以下依赖
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.4</version>
</dependency>
编写测试类
package com.wyx.controller;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.wyx.dao.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
@Controller
public class SpringMvcJson {
//@ResponseBody 返回的值不会走视图解析器，而是返回字符串
@ResponseBody
@RequestMapping(value = "/json")
public String json1() throws JsonProcessingException {
// 1.获取Jackson的对象
ObjectMapper mapper = new ObjectMapper();
User user = new User("岑韩国","男",12);
String str = mapper.writeValueAsString(user);
return str;
}
}
测试出现乱码
解决乱码问题
1、在 @RequestMapping 中加入produces属性，设置返回值和编码类型 （不常用）
// value不能少
@RequestMapping(value = "/json",produces = "application/json;charset=utf-8")
2、第二种方法是在 mvc驱动 中配置乱码解析，添加以下配置
<!--添加这个 MVC驱动 可以免配，映射适配器，和适配处理器-->
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<!-- string乱码 -->
<bean id="stringHttpMessageConverter" class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<!--让Jackson自己定义的编码失效-->
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="objectMapper">
<bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
<property name="failOnEmptyBeans" value="false"/>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
再次运行，乱码问题解决
jackson 常用方法
/*
// 写为字符串
String text = mapper.writeValueAsString(friend);
// 写为文件
mapper.writeValue(new File("friend.json"), friend);
// 写为字节流
byte[] bytes = mapper.writeValueAsBytes(friend);
System.out.println(text);
// 从字符串中读取
Friend newFriend = mapper.readValue(text, Friend.class);
// 从字节流中读取
newFriend = mapper.readValue(bytes, Friend.class);
// 从文件中读取
newFriend = mapper.readValue(new File("friend.json"), Friend.class);
System.out.println(newFriend);
*/
jackson 输出时间
@ResponseBody
@RequestMapping("/json1")
public String json() throws JsonProcessingException {
//Jackson直接输出是时间戳
//1. 获取Jackson对象
ObjectMapper mapper = new ObjectMapper();
//2. 获取时间对象
Date date = new Date();
//3. 关闭时间戳功能
mapper.configure(SerializationFeature.WRITE_DATE_KEYS_AS_TIMESTAMPS,false);
//4. 设置输出时间格式
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//5. 让mapper指定时间格式
mapper.setDateFormat(sdf);
return mapper.writeValueAsString(date);
}
测试结果
上面代码中，如果使用多次会让代码重复，我们可以将它封装起来，后面直接调用
package com.wyx.utils;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import java.text.SimpleDateFormat;
public class JacksonUtils {
//调用下面封装的方法
public static String getJson(Object o){
return getJson(o,"yyyy-MM-dd HH:mm:ss");
}
public static String getJson(Object o,String dataFormat){
//Jackson直接输出是时间戳
//1. 获取Jackson对象
ObjectMapper mapper = new ObjectMapper();
//2. 关闭时间戳功能
mapper.configure(SerializationFeature.WRITE_DATE_KEYS_AS_TIMESTAMPS,false);
//3. 设置输出时间格式
SimpleDateFormat sdf = new SimpleDateFormat(dataFormat);
//4. 让mapper指定时间格式
mapper.setDateFormat(sdf);
try {
return mapper.writeValueAsString(o);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return null;
}
}
编写测试类
@ResponseBody
@RequestMapping("/json2")
public String json2() {
Date date = new Date();
//调用自己封装的方法 默认输出 yyyy-MM-dd HH:mm:ss格式
return JacksonUtils.getJson(date);
}
测试结果
编写测试类
@ResponseBody
@RequestMapping("/json3")
public String json3() {
Date date = new Date();
//传入自定义时间格式
return JacksonUtils.getJson(date,"yyyy-MM-dd");
}
测试结果
Ajax
Ajax = Asynchronous Javascript And XML（异步JavaScript和XML）
Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
Ajax可使因特网应用程序更小、更快，更友好。
Ajax 是一种独立于 Web 服务器软件的浏览器技术。
Ajax 的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
我们这里学习的是 jQuery 中的 Ajax 其本质也是XMLHttpRequest对象(XHR)
jQuery.ajax(...)
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
1、环境搭建
环境搭建和上面一样，记得解决 Json 乱码问题
2、jQuery Ajax 使用
编写控制类
@Controller
public class AjaxController {
@RequestMapping("/a1")
public void ajax1(String name , HttpServletResponse response) throws IOException {
if ("admin".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
导入 jQuery
//两种导入方式都可
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
编写 jsp 页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{'name':$("#txtName").val()},
success:function (data,status) {
alert(data);
alert(status);
}
});
}
</script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>
</body>
</html>
// 将id为pwdInfo的html刷新为返回值数据
$("#pwdInfo").html(data);
// 设置返回的css
$("#pwdInfo").css("color","red");
$(function () {
$("#btn").click(function () {
$.post("${pageContext.request.contextPath}/a2",function (data) {
console.log(data)
var html="";
for (var i = 0; i <data.length ; i++) {
html+= "<tr>" +
"<td>" + data[i].name + "</td>" +
"<td>" + data[i].age + "</td>" +
"<td>" + data[i].sex + "</td>" +
"</tr>"
}
$("#content").html(html);
});
})
})
// 先将返回值数据拼接，再返回
常用五个触发方式
//点击 click
//获得焦点 onfocus
//失去焦点 onblur
//键盘弹起 onkeyup
//页面加载 window.onload
