本文共 7443 字，大约阅读时间需要 24 分钟。

一、Json

1.1 概述

SON(JavaScript Object Notation, JS 对象表示) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于机器解析和生成，并有效地提升网络传输效率。

主要应用就是，将前端传来的字符串转为java类对象，或者将java类对象转为字符串。

1.2 语法和值

【[ ] 】 表示数组

【{ } 】 表示对象

【""】【’’】 表示是属性名或字符串类型的值

【：】 表示属性和值之间的分隔符

【，】表示多个属性的间隔符或者是多个元素的间隔符

数字（整数或浮点数）

字符串（在双引号或单引号中）

逻辑值（true 或 false）

数组（在中括号中）

对象（在大括号中）

null

1.3 html中演示

1.4 后端Json解析

需要使用jar包工具类：

（1）FastJson ，由阿里巴巴提供【常用】 （2）Jackson，国外的解析工具【难用】

创建对象一个Person类，包含姓名、年龄和地址。

FastJson解析

ublic class ObjectToJson {
       public static void main(String[] args) {
           fastjson1();        fastjson2();    }    /**     * 将java对象转为Json格式字符串     * (1)阿里的工具fastjson     *     注意事项：1.如果不需要某个属性，可以在Person类中的某一个【属性】上面加上注解@JSONField(serialize = false)     *              2.构造方法中写入【JSON.toJSONString(p1, SerializerFeature.PrettyFormat)】，美化格式输出     *              3.构造方法写入【JSON.toJSONString(p1, SerializerFeature.WriteMapNullValue)】，属性为空也打印     *              4.构造方法中写入【JSON.toJSONString(p1, SerializerFeature.WriteNullStringAsEmpty)】，属性为空以【""】打印     *              5.关闭循环检测SerializerFeature.DisableCircularReferenceDetect，默认是开启的     *              应对的情况是：A类中有一个属性是要创建B类对象，B类中有一个属性是创建A类对象，这样会发生死循环     *              但是，当使用List集合，两次添加同一个对象的时候，会发生错误 {"$ref":"$[0]"}，这里可以展示关闭     */    public static void fastjson1() {
           Person p1 = new Person("张三", 27, null);        String jsonP1 = JSON.toJSONString(p1, SerializerFeature.WriteNullStringAsEmpty);        System.out.println(jsonP1);        Person p2 = new Person("李四", 22, "上海");        Person p3 = new Person("王五", 25, "广州");        List
   
     persons = new ArrayList<>();        persons.add(p1);        persons.add(p2);        persons.add(p3);        persons.add(p1);        String jsonPersons = JSON.toJSONString(persons, SerializerFeature.WriteMapNullValue, SerializerFeature.DisableCircularReferenceDetect);        System.out.println(jsonPersons);    }    /**     * 使用json字符串转为java对象，注意字符串的书写格式     */    public static void fastjson2() {
           String str = "{\"name\":\"张三\",\"age\":20, \"address\":\"北京\"}";        Person person = JSON.parseObject(str, Person.class);        System.out.println(person.toString());    }}
   

JackSon解析【了解】

public class JacksonDemo {
       public static void main(String[] args) throws IOException {
           jackson1();        jackson2();    }    /**     * 使用jackson将对象转字符串     * 注意事项：     *  （1）@JsonIgnore注解用于排除某个属性，这样该属性就不会被Jackson序列化和反序列化     *  （2）mapper.enable(SerializationFeature.INDENT_OUTPUT);美化输出     *  （3）允许序列化空的属性类（否则会抛出异常）mapper.disable(SerializationFeature.FAIL_ON_EMPTY_BEANS);     */    public static void jackson1() throws JsonProcessingException {
           Person p1 = new Person("张三", 27, null);        Person p2 = new Person("李四", 22, "上海");        Person p3 = new Person("王五", 25, "广州");        ObjectMapper objectMapper = new ObjectMapper();        objectMapper.enable(SerializationFeature.INDENT_OUTPUT, SerializationFeature.FAIL_ON_EMPTY_BEANS);//美化        String str1 = objectMapper.writeValueAsString(p1);        System.out.println(str1);        ArrayList
   
     list = new ArrayList<>();        list.add(p1);        list.add(p2);        list.add(p3);        String str = objectMapper.writeValueAsString(list);        System.out.println(str);    }    /**     * 字符串转对象     */    public static void jackson2() throws IOException {
           String str = "{\"name\":\"张三\",\"age\":20, \"address\":\"北京\"}";        ObjectMapper objectMapper = new ObjectMapper();        Person person = objectMapper.readValue(str, Person.class);        System.out.println(person.toString());    }}
   

二、AJAX技术

2.1 概述

AJAX 是一种在无需重新加载整个网页的情况下，能够实现局部更新的技术。

AJAX = 异步 JavaScript 和 XML。 (Asynchronized JavaScript And XML)

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.2 工作原理

AJAX是基于现有的Internet标准，并且联合使用它们：

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (作为转换数据的格式)、JSON

2.3 基本步骤

1. 创建XMLHTTPRequest对象
2. 设置onreadystatechange回调函数
3. open() 打开连接
4. send() 发送请求

注意事项

1. 创建XMLHttpRequest对象，起初并非所有浏览器都支持，所以应对老版本浏览器，需要使用以下语句，进行兼容处理

var xhr = null;if (window.XMLHttpRequest) {
       xhr = new XMLHttpRequest(); //判断浏览器是否支持ajax} else {
       xhr = new ActiveXObject("Microsoft.XMLHTTP");}

2. onreadystatechange回调函数

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: "OK"404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

3. XMLHttpRequest请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

4. 使用post请求方式注意的问题

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头

//使用post请求的时候，信息不能直接在url里呈现，必须放到send方法中xmlhttp.open("POST","/try/ajax/servlet4",true);//请求头类型其实就是form表单的enctype属性值xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("username=leilei&password=123");

2.4 案例——注册的时候提示用户名是否可用

servlet部分

@WebServlet(name = "CheckUserServlet", value = "/checkuser")public class CheckUserServlet extends HttpServlet {
       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           request.setCharacterEncoding("utf-8");        String username = request.getParameter("username");        List
   
     users = new ArrayList<>();        //集合，模拟数据库        Collections.addAll(users, "张三", "李四", "王五");        if (users.contains(username)) {
               //这里可以使用write和print，但是不能使用println，因为换行也会输出，导致前端接收的数据带有换行字符，从而出错            response.getWriter().println("1"); //有相关的用户名，就发送1        } else {
               response.getWriter().write("0"); //没有就发送0，可以注册        }    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           doPost(request, response);    }}
   

ajax部分

    
               
用户注册
    
   
        
            
    
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    提交    
   
    

2.5 案例——Ajax与Json的联用

servlet部分，这里要注意，编码更改，让浏览器按照json格式解读

@WebServlet(name = "JsonServlet",value = "/json")public class JsonServlet extends HttpServlet {
       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           //要告诉浏览器json格式        response.setContentType("application/json;charset=utf-8");        /**         * 内容类型（MIME）多用途互联网扩展类型，告诉浏览器文件是什么类型，并用相应浏览器打开         * text/html  text/css text/javascript text/json application/json image/jpg image/png image/bmp         */        Person person = new Person("李老欧六", 30, "五棵松");        String jsonstr = JSON.toJSONString(person);        response.getWriter().println(jsonstr);    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           doPost(request, response);    }}

html部分

三、IDEA配置Json插件

IDEA 插件：可以将JSON字符串转为类，进行批量处理，非常方便。

在对应的类中，右键选择Generate，或者使用ALT+Insert按键，然后选择GsonFormat，将Json字符串复制过来，直接生成即可。

转载地址：http://gsgzi.baihongyu.com/