Json&Ajax
前言
什么是json
学习json是为了和前端的ajax交互
这是json的logo
现在：json主要用于数据传输，xml主要用于配置环境（例如maven）
这里注意，必须使用双引号包括键，并且只有键才一定要用双引号，而值可以不用（例如数字）
如果直接是数据存放json，那么直接会返回一个数据，例如123、"abc"
var person={
name:"jmk",
age:18
}
但是转化为json之后，这些name属性必须用双引号包裹
js中：
可以看到只有键是必须双引号，值如果为数字就可以不用双引号，并且，json是字符串
百度登陆之后会产生很多用户数据，所以导致html页面较乱，退出登陆之后就会干净了
json的使用
首先需要在resources中添加配置文件spring_mvc.xml,表示使用mvc
注意这里的requestmapping和responsebody都是spring实现的
从前端传数据给后台需要用Ajax
直接后台输出：
为什么会乱码呢：给requestmapping加一个属性
produce：指定响应体类型和返回编码
但是这样每次都需要加这个，有什么一劳永逸的方法呢：修改spring_mvc.xml配置文件
<!--解决json 乱码配置-->
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<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>
案例2
案例3
案例4
工具类的编写Utils
注意一下这种重载，看了大量源码得到的经验
Json解析工具
Jackson Json解析工具
博客：狂神说SpringMVC06：Json交互处理_狂神说-CSDN博客
Jackson应该是目前比较好的json解析工具了
当然工具不止这一个，比如还有阿里巴巴的fastjson等等。
1.我们这里使用Jackson，使用它需要maven导入它的jar包;
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.12.3</version>
</dependency>
2.配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!-- SpringMVC的前端控制器 -->
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!-- 用这个配置.xml去控制这DispatcherServlet-->
<init-param>
<param-name>contextConfigLocation</param-name>
<!-- 这里的classpath本来是指web-inf目录下的class目录，但是由于有resources文件夹资源根目录，就会读取这里的
maven会将resources下的文件编译到classes路径下；
用maven构建项目时候resource目录就是默认的classpath ；
classPath即为java文件编译之后的class文件的编译目录一般为web-inf/classes，src下的xml在编译时也会复制到classPath下 -->
<param-value>classpath:springmvc-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Spring MVC配置文件结束 -->
<!-- 拦截设置 -->
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<!-- 由SpringMVC拦截所有请求 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 过滤器 -->
<filter>
<filter-name>encoding</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
3.配置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.kuang.controller"/>
<!-- 视图解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
id="internalResourceViewResolver">
<!-- 前缀 -->
<property name="prefix" value="/WEB-INF/jsp/" />
<!-- 后缀 -->
<property name="suffix" value=".jsp" />
</bean>
</beans>
4.编写一个普通类测试controller
package com.kuang.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
//需要导入lombok
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String name;
private int age;
private String sex;
}
6.这里我们需要两个新东西，一个是@ResponseBody，一个是ObjectMapper对象，我们看下具体的用法
编写一个Controller；
@Controller
public class UserController {
@RequestMapping("/json1")
@ResponseBody
public String json1() throws JsonProcessingException {
//创建一个jackson的对象映射器，用来解析数据
ObjectMapper mapper = new ObjectMapper();
//创建一个对象
User user = new User("秦疆1号", 3, "男");
//将我们的对象解析成为json格式
String str = mapper.writeValueAsString(user);
//由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
return str;
}
}
测试后发现发送回去的数据出现乱码
发现出现了乱码问题，我们需要设置一下他的编码格式为utf-8，以及它返回的类型；
这是因为我们返回的没有经过视图解析器之类的，也不会经过过滤器，所以可能会出现乱码
只需要设置一下返回数据的类型告知前端就可以
通过@RequestMaping的produces属性来实现，修改下代码
@RequestMapping(value = "/json1",produces = "application/json;charset=utf-8")
乱码统一解决
上一种方法比较麻烦，如果项目中有许多请求则每一个都要添加，可以通过Spring配置统一指定，这样就不用每次都去处理了！
我们可以在springmvc的配置文件上添加一段消息StringHttpMessageConverter转换配置！
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<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>
返回json字符串统一解决
在类上直接使用 @RestController ，这样子，里面所有的方法都只会返回 json 字符串了，不会走视图解析器，不用再每一个都添加@ResponseBody ！我们在前后端分离开发中，一般都使用 @RestController ，十分便捷！
@RestController
public class UserController {
//produces:指定响应体返回类型和编码
@RequestMapping(value = "/json1")
public String json1() throws JsonProcessingException {
//创建一个jackson的对象映射器，用来解析数据
ObjectMapper mapper = new ObjectMapper();
//创建一个对象
User user = new User("秦疆1号", 3, "男");
//将我们的对象解析成为json格式
String str = mapper.writeValueAsString(user);
//由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
return str;
}
}
FastJson json解析工具
fastjson.jar是阿里开发的一款专门用于Java开发的包，可以方便的实现json对象与JavaBean对象的转换，实现JavaBean对象与json字符串的转换，实现json对象与json字符串的转换。实现json的转换方法很多，最后的实现结果都是一样的。
fastjson 的 pom依赖！
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.60</version>
</dependency>
JSONObject 代表 json 对象
- JSONObject实现了Map接口, 猜想 JSONObject底层操作是由Map实现的。
- JSONObject对应json对象，通过各种形式的get()方法可以获取json对象中的数据，也可利用诸如size()，isEmpty()等方法获取"键：值"对的个数和判断是否为空。其本质是通过实现Map接口并调用接口中的方法完成的。
JSONArray 代表 json 对象数组
- 内部是有List接口中的方法来完成操作的。
JSON代表 JSONObject和JSONArray的转化
- JSON类源码分析与使用
- 仔细观察这些方法，主要是实现json对象，json对象数组，javabean对象，json字符串之间的相互转化。
代码测试：
package com.kuang.controller;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.kuang.pojo.User;
import java.util.ArrayList;
import java.util.List;
public class FastJsonDemo {
public static void main(String[] args) {
//创建一个对象
User user1 = new User("秦疆1号", 3, "男");
User user2 = new User("秦疆2号", 3, "男");
User user3 = new User("秦疆3号", 3, "男");
User user4 = new User("秦疆4号", 3, "男");
List<User> list = new ArrayList<User>();
list.add(user1);
list.add(user2);
list.add(user3);
list.add(user4);
System.out.println("*******Java对象 转 JSON字符串*******");
String str1 = JSON.toJSONString(list);
System.out.println("JSON.toJSONString(list)==>"+str1);
String str2 = JSON.toJSONString(user1);
System.out.println("JSON.toJSONString(user1)==>"+str2);
System.out.println("\n****** JSON字符串 转 Java对象*******");
User jp_user1=JSON.parseObject(str2,User.class);
System.out.println("JSON.parseObject(str2,User.class)==>"+jp_user1);
System.out.println("\n****** Java对象 转 JSON对象 ******");
JSONObject jsonObject1 = (JSONObject) JSON.toJSON(user2);
System.out.println("(JSONObject) JSON.toJSON(user2)==>"+jsonObject1.getString("name"));
System.out.println("\n****** JSON对象 转 Java对象 ******");
User to_java_user = JSON.toJavaObject(jsonObject1, User.class);
System.out.println("JSON.toJavaObject(jsonObject1, User.class)==>"+to_java_user);
}
}
这种工具类，我们只需要掌握使用就好了，在使用的时候在根据具体的业务去找对应的实现。和以前的commons-io那种工具包一样，拿来用就好了！
Json在我们数据传输中十分重要，一定要学会使用！
Ajax
ajax为什么是异步的，因为首先在调用ajax的时候你仍然可以运行这个ajax代码后面的js代码，当ajax有返回时会自动调用你代码中需要ajax数据的那部分代码（future代码），此时后面的代码可能都已经执行完了，也就是说整个页面都已经显示出来了，就在等待你的ajax请求的数据
servlet web开发步骤：1.html，在标签中加入4中的函数 2.编写servlet代码 3.编写servlet mapper映射 4.html中编写js代码函数，用jQuery中的ajax或get、post跳转到这个mapper映射地址
synchronous[ˈsɪŋkrənəs]同步的
asynchronous[eɪˈsɪŋkrənəs]异步的
增强了B/S的体验性
事件：按下按键，弹起按键，获得焦点（点击输入框），失去焦点（点击输入框外边）
案例：
案例：使用iframe内联框架伪造实现ajax刷新
Ajax使用
如果不是相对路径那么项目发布之后就会访问错误
这里的ajax/a1就是RequestMapping的定义的目录
后端
想使用post也可以
案例3
最后必须在添加进去获取到的
案例4
前端：
后端
目前已经编写了多个jsp和html代码。首先服务器localhost:8080会访问index.jsp，然后你需要使用localhost:8080/index2.jsp就可以访问到其他的。为什么呢？因为tomcat配置文件里面可能设置了的自动访问index.jsp文件
Ajax总结
post和get
post提交的数据会放到这里
B/S与C/S架构
(11条消息) BS架构与CS架构的区别(最详细)_四九城小白~阿勋的博客-CSDN博客_bs架构
B/S将会是未来的主流并且会持续增长
C/S：注意这里的应用软件不是我们平时用的例如typora、QQ、excel之类的可以在本地就能完成任务，而是打开软件就需要和服务器交换数据的，
十几年前所有管理软件都是基于CS架构开始的，包括用友用VB开发的财务软件，金蝶也是用VB开发的管理软件，当时还有和VB并驾齐驱的Delphi开发平台（Borland公司拥有）。那完全是因为那时还没有互联网，甚至局域网都没普及，所谓CS管理软件其实就是一个单机记账软件。
举个例子来给你说明，现在的网页游戏比如“偷菜”就属于BS构架，QQ斗地主（腾讯游戏的那个软件）就属于CS构架。
也就是说：
Cs：客户端-服务器
Bs：浏览器-服务器
cs的一般适合于软件开发，对客户端的计算机配置要求比较高，并且要求客户端和服务器系统一样，也就是说windows写的qq程序在Mac、linux上不能用
客户端也需要安装软件，典型事例：qq（因为需要和服务器交换数据）、英雄联盟之类的
但是现在本地软件能做的C/S工作。网页B/S也能做，例如网页qq，网页邮箱，英魂之刃（类似于英雄联盟但是是在网页玩）
bs的一般适合于网站开发，客户端只要安装浏览器就可以完成操作
客户端基本上不需要加载什么，但是对于服务器端的配置要求比较高
典型事例：网站，erp系统。
趋势在未来你的电脑只需要一个浏览器就够了，不需要其他软件
什么是H5
一切的惯例猜测和网上论题引导咱们都证明了，成果全部不建立! 当咱们从新把一切内容放在一同时，你会发现H5它包换了HTML5 的符号标准，运用到了例如 CSS、JS(Java)等多种计算机语言，可以完成多种动效和视听作用，会使用到后端和前端的多种功用，*要在手机端传播，可以跨渠道在PC、平板上阅读等等...
H5用于手机网页
当咱们在这些一切包括的特性上寻觅共性时，咱们得到了一个意外的答案，H5不是 HTML5、不是微信网页、不是移动 PPT。相反，从某种含义上来说，它是这些东西的母级，H5所指的就是移动网页自身，它可以包括一切这些分支!所有实现移动网页的技术都可以叫H5
回调函数
在Ajax中有回调函数，意思是如果页面载入成功就会调用这个函数，能够通过success拿到服务器返回的东西
浙公网安备 33010602011771号