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 final T parseObject(String text, Class clazz); // 把JSON文本parse为JavaBean
public static final JSONArray parseArray(String text); // 把JSON文本parse成JSONArray
public static final List 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" οnblur="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