JSON和AJAX

引言：

本文主要分享了JSON和 AJAX的基本概念以及应用，主要包括：JSON的解析（FastJSON和JackJSON）、AJAX的工作原理、AJAX的编程步骤；

@[toc]

1. JSON

JSON全称JavaScript Object Notaion属于轻量级的数据交换格式，XML属于重量级的数据交换；不依赖于OS平台，易于编写和解析，传输效率高；常常用于不同系统间数据交换的格式或规范；

1.1 JSON的语法

[] 表示数组

{} 表示对象

"" 表示属性名字或字符串类型的值

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

, 表示多个属性之间的间隔符

1.2 Java和JSON的对照

1.2.1 Java

class Student{
   
   
    int id;
    String name;
    String sex;
    int age;
}

1.2.2 JSON

//单个
{
   
   "id":1001,"name":"kaka","sex":"man","age":18}
//多个数组形式
[{
   
   "id":1001,"name":"kaka","sex":"man","age":18},
 {
   
   "id":1003,"name":"kaka","sex":"man","age":18},
 {
   
   "id":1003,"name":"kaka","sex":"man","age":18}]

2. JSON的解析

2.1 利用FastJSON解析JSON

一个Java库，可以将Java对象转换为JSON格式，也可以将JSON字符串转换为Java对象；采用“假定有序快速匹配”算法把性能提升到极致，是目前Java语言中最快的JSON库；

需要在lib文件夹下导入fastjson的jar包；

2.1.1 FastJSON的特点

快速：

比其它任何基于Java的解析器和生成器更快

强大：

支持普通JDK类包括任意Java Bean Class、Collection、Map、Date

0依赖

除了JDK没有依赖其他类库

开源

2.1.2 FastJSON中常用方法

toJSONString()：将对象转换为JSON对象

parseObject()：将JSON字符串转换成对象

public static final JSONObject parseObject(String text)；：把JSON文本parse成JSONObject

public static final < T > T parseObject(String text, Class< T > clazz); ：把JSON文本parse为JavaBean

public static final JSONArray parseArray(String text); ：把JSON文本parse成JSONArray

public static final < T > List< T > parseArray(String text, Class< T > clazz); ：把JSON文本parse成JavaBean集合

2.1.3 案例

package com.sx.kaka.test;
import java.util.ArrayList;
import java.util.List;
import com.alibaba.fastjson.JSON;
import com.sx.kaka.entity.Student;
public class FastJSONTest {
   
   
    public static void main(String[] args) {
   
   
        new FastJSONTest().fromStringToJavaObj();
        new FastJSONTest().fromStringArrayToJavaArray();
        new FastJSONTest().fromJavaObjToJson();
        new FastJSONTest().fromJavaObjArrayToJson();
    }
    //将字符串对象转成java对象
    public void fromStringToJavaObj(){
   
   
        //编写JSON字符串
        String jsonStr="{'id':1001,'name':'kaka','sex':'man','age': 23}";
        //将字符串转成Java对象
        Student stu = JSON.parseObject(jsonStr, Student.class);
        System.out.println(stu);
    }
    //将字符串数组转java数组
    public void fromStringArrayToJavaArray(){
   
   
        //编写JSON数组字符串
        String jsonStringArray = "['kaka0','kaka1','kaka2']";
        //将字符串转成String类型的集合
        List<String> array = JSON.parseArray(jsonStringArray, String.class);
        System.out.println(array);
    }
    //将java对象转成json字符串
    public void fromJavaObjToJson(){
   
   
        Student stu = new Student(1001,"kaka","man",23);
        String jsonString = JSON.toJSONString(stu);
        System.out.println(jsonString);
    }
    //将java对象数组转成json字符串
    public void fromJavaObjArrayToJson(){
   
   
        List<Student> list = new ArrayList<>();
        for(int i = 0; i< 5; i++){
   
   
            list.add(new Student(1001+i,"kaka"+i,"man",20+i));
        }
        String jsonString = JSON.toJSONString(list);
        System.out.println(jsonString);
    }
}

fastJSONDemo

2.2 利用Jackson解析JSON

一个能够将Java对象序列化为JSON字符串，同样可以将JSON字符串反序列化为Java对象；方法为：readValue和writeValue；

2.2.1 Jackson的三个jar包

需要在lib文件夹下导入jackjson-annotations、jackson-core、jackson-databind三个jar包；

jackson-core jar：流的处理，定义了底层的streaming API和实现了Json特性；

jackson-annotations jar：包含了标准的Jackson注解；

jackson-databind jar：实现了数据绑定和对象序列化，它依赖于streaming和annotations的包；

2.2.2 处理Json

Jackson提供了三种可选的Json处理方法：

Streaming API：是效率最高的处理方式(开销低、读写速度快，但程序编写复杂度高)

Tree Model：树模型是最灵活的处理方式

Data Binding：数据绑定是最常用的处理方式

2.2.3 Data Binding处理方式

主要使用ObjectMapper来操作Json，如果是解析就必须要有setters，且setters必须是public修饰的，否则属性的值将会为null。
如果是生成那么必须有getters，且getters必须是public修饰的。如果属性不是private修饰，那么可以不用有getters和setters；

要点：

ObjectMapper mapper = new ObjectMapper(); ：获取JackSon主操作类对象

mapper.writeValue(obj); :将传入的对象序列化为json，返回给调用者

mapper.writeValueAsString(Object obj):String：将java对象数组转成json，传入的对象序列化为json，返回给调用

mapper.readValue(jsonFile, Bean.class/Collection< Bean >);：将字符串对象转成java对象

mapper.readValue(jsonString . TypeReference >):List< T >：返回List集合

特点：在java中使用jack转json时java字符串需要使用双引号，建议使用转义字符；

2.2.4 案例

package com.sx.kaka.test;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import com.fasterxml.jackson.core.JsonParseException;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.JsonMappingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.sx.kaka.entity.Student;
public class JacksonTest {
   
   
    public static void main(String[] args) throws JsonParseException, JsonMappingException, IOException {
   
   
        new JacksonTest().fromStringToJavaObj();
        new JacksonTest().fromStringArrayToJavaArray();
        new JacksonTest().fromJavaObjToJson();
        new JacksonTest().fromJavaObjArrayToJson();
    }
    //将字符串对象转成java对象
    public void fromStringToJavaObj() throws JsonParseException, JsonMappingException, IOException{
   
   
        //编写JSON字符串
        String jsonStr="{\"id\":1001,\"name\":\"kaka\",\"sex\":\"man\",\"age\": 23}";
        //获取JackSon主操作类对象
        ObjectMapper mapper = new ObjectMapper(); 
        Student stu = mapper.readValue(jsonStr, Student.class);
        System.out.println(stu);
    }

    //将字符串数组转java数组
    public void fromStringArrayToJavaArray() throws JsonParseException, JsonMappingException, IOException{
   
   
        //编写JSON数组字符串
        String jsonStringArray = "[\"kaka0\",\"kaka1\",\"kaka2\"]";
        //获取JackSon主操作类对象
        ObjectMapper mapper = new ObjectMapper(); 
        //第一个参数:json字符串
        //第二个参数:类型引用的抽象类,需要动态创建一个他的指定类型(List<String>)对象
        ArrayList<String> readValue = mapper.readValue(jsonStringArray, new TypeReference<List<String>>(){
   
   });
        System.out.println(readValue);
    }
    //将java对象转成json字符串
    public void fromJavaObjToJson() throws JsonProcessingException{
   
   
        Student stu = new Student(1001,"kaka","man",23);
        //获取JackSon主操作类对象
        ObjectMapper mapper = new ObjectMapper(); 
        String string = mapper.writeValueAsString(stu);
        System.out.println(string);
    }
    //将java对象数组转成json字符串
    public void fromJavaObjArrayToJson() throws JsonProcessingException{
   
   
        List<Student> list = new ArrayList<>();
        for(int i = 0; i< 5; i++){
   
   
            list.add(new Student(1001+i,"kaka"+i,"man",20+i));
        }
        //获取JackSon主操作类对象
        ObjectMapper mapper = new ObjectMapper(); 
        String string = mapper.writeValueAsString(list);
        System.out.println(string);
    }
}

JackJSONDemo

2.3 浏览器（JS）处理JSON对象

JSON.stringify()：把js对象转成json字符串的

JSON.parse()：把json字符串转成js对象的

2.3.1 案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS解析JSON</title>
<script>
   var jsonObj = {'id':1001,'name':'kaka','sex':'man','age':20};
   alert(jsonObj.name);
   var jsonString = JSON.stringify(jsonObj);
   alert(jsonString);
   var jsonObj2 = JSON.parse(jsonString);
   console.log(jsonObj2.id+","+jsonObj2.name+","+jsonObj2.sex +","+jsonObj2.age);
</script>
</head>
<body>

</body>
</html>

list

在这里插入图片描述

3. AJAX

AJAX全称Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），AJAX 不是新的编程语言，而是一种使用现有标准的新方法；不需要任何浏览器插件，但需要用户在允许JavaScript的浏览器上执行；

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

3.1 工作原理

浏览器创建XMLHttpRequest对象；

浏览器初始化XMLHttpRequest对象；

由XMLHttpRequest对象向服务器发出请求；

浏览器接收其他用户的操作；

服务器接到请求后调用业务模型处理并给XMLHttpRequest一个响应的结果；

XMLHttpRequest对象收到响应结果并进行处理；

利用修改dom模型节点特征来更新页面局部从而实现局部刷新；

3.2 Ajax应用场景

运用XHTML+CSS来表达资讯；

运用JavaScript操作DOM（Document Object Model）来执行动态效果；

运用XML和XSLT操作资料;

3.3 Ajax编程

步骤：

创建XmlHttpRequest对象；

var xmlhttp = new XMLHttpRequest();

微软版本的：var xmlhttp = new ActiveXObject("Microsoft.XMLHttp");

初始化XmlHttpRequest对象；

使用open方法设定请求参数；

open(method,url,async)

使用onreadystatechange设定回调函数；

存储函数或者函数名，当readyState属性改变时，就会调用该函数；

readState：存有XmlHttpRequest的状态，从0~4发生变化

0：请求未初始化

1：服务器连接已经建立

2：请求已接收

3：请求处理中

4：请求已完成且响应已就绪状态为200

使用send方法发送请求；

send(String)：参数为String时仅用于POST请求

在回调函数中处理响应结果，更新局部；

responseText：获取字符串形式的响应数据；

responseXML：获得XML形式的响应数据；

3.3.1 案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX</title>
</head>
<script>
//声明全局变量
var xhr;
    function sends(){
        alert("创建XmlHttpRequest对象");
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        alert("设置回调函数");
        xhr.onreadystatechange = callback;

        alert("获取需要发送的数据");
        //获得标签的值
        var username = document.getElementById("username").value;
        var url = "ajaxurl?username="+username;

        alert("初始化xhr");
        xhr.open("GET",url,true);//使用get方式向url地址发送异步请求;

        alert("发送请求");
        xhr.send();

           alert("回调");

    }

     function callback(){
           if(xhr.readyState==4 && xhr.status ==200){
             alert("回来啦....")
            // 接收Servlet的值
             var backStr = xhr.responseText;
            // 获取div标签对象
             var div1 = document.getElementById("div1");
            // 插入字符串到div文本中
             div1.innerHTML =backStr;
           }
       }

</script>
<style>
    .mydiv{
        letf:20px;
        top:200px;
        height:200px;
        width:500px;
        background-color:red;
    }
</style>
<body>
    username：<input type = "text" name = "username" id = "username"/>
    <!-- 调用script中的方法 -->
    <a href = "javascript:sends()">发送Ajax</a>
    <div id = "div1" class = "mydiv">
        Ajax的局部展示
    </div>
</body>
</html>

package com.sx.kaka.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet{
   
   

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
   
        System.out.println("doGet........");
        String username = req.getParameter("username");
        PrintWriter out = resp.getWriter();
        //业务处理
        if(username.equals("admin")){
   
   
            out.print("failure");
        }else{
   
   
            out.print("success");
        }
        out.flush();
        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
   

    }
}

Ajax执行案例

3.4 ajax实现全查

步骤：

编写链接发送ajax请求（html）

查询数据库获取数据集合；（servlet）

将数据集合转成json字符串；（servlet）

使用打印流响应到xhr里；（servlet）

回调函数获得响应数据，将字符串转成json对象；（html）

遍历数组输出到div中（html）

3.4.1 JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全查</title>
</head>
<script>
  var xhr ;
  function send(){
      if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
      }else{
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xhr.onreadystatechange= callback;
      var url ="ajaxurl";
      xhr.open("POST",url,true);
      xhr.send(); 
  }
  function callback(){
      if(xhr.readyState == 4 && xhr.status == 200){
          var backJson = xhr.responseText;
          //将返回的json字符串转为json对象数组
          var objs = JSON.parse(backJson);
          var str="";
          for(var i = 0;i<objs.length;i++){
              str += objs[i].id +","+objs[i].name+","+objs[i].sex+","+objs[i].age+"<br/>";
          }
          var div1 = document.getElementById("div1");
          div1.innerHTML = str;
      }
  }
</script>
<body>
    <a href = "javascript:send()">全查</a>
    <hr/>
    <div id = "div1">

    </div>
</body>
</html>

3.4.2 Servlet页面

package com.sx.kaka.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.sx.kaka.entity.Student;

public class AjaxServlet extends HttpServlet{
   
   

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
   
        System.out.println("doPost.....");
        //获取数据集合 
        List<Student> list = new ArrayList<>();
        list.add(new Student(1001,"kaka1","man",21));
        list.add(new Student(1002,"kaka2","man",22));
        list.add(new Student(1003,"kaka3","man",23));
        //封装成json对象
        String  jsonString = JSON.toJSONString(list);
        //写入响应流中
        PrintWriter out = resp.getWriter();
        out.write(jsonString);
        out.flush();
        out.close();
    }    
}

图片.png

JSON及AJAX超详细笔记