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超详细笔记

JSON和AJAX

1. JSON

1.1 JSON的语法

1.2 Java和JSON的对照

1.2.1 Java

1.2.2 JSON

2. JSON的解析

2.1 利用FastJSON解析JSON

2.1.1 FastJSON的特点

2.1.2 FastJSON中常用方法

2.1.3 案例

2.2 利用Jackson解析JSON

2.2.1 Jackson的三个jar包

2.2.2 处理Json

2.2.3 Data Binding处理方式

2.2.4 案例

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

2.3.1 案例

3. AJAX

3.1 工作原理

3.2 Ajax应用场景

3.3 Ajax编程

3.3.1 案例

3.4 ajax实现全查

3.4.1 JSP页面

3.4.2 Servlet页面

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JSON及AJAX超详细笔记

JSON和AJAX

1. JSON

1.1 JSON的语法

1.2 Java和JSON的对照

1.2.1 Java

1.2.2 JSON

2. JSON的解析

2.1 利用FastJSON解析JSON

2.1.1 FastJSON的特点

2.1.2 FastJSON中常用方法

2.1.3 案例

2.2 利用Jackson解析JSON

2.2.1 Jackson的三个jar包

2.2.2 处理Json

2.2.3 Data Binding处理方式

2.2.4 案例

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

2.3.1 案例

3. AJAX

3.1 工作原理

3.2 Ajax应用场景

3.3 Ajax编程

3.3.1 案例

3.4 ajax实现全查

3.4.1 JSP页面

3.4.2 Servlet页面

热门文章

最新文章

相关课程

相关电子书