(四十)jQuery二(JSON与AJAX)

JSON与AJAX

JSON

JSON是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据,有限提升网络传输效率

数据交换格式有很多种,除了html以外,还有xml,还有JSON

JSON格式除了数据,标点符号以外,其他都没有(轻量级),响应快

HTML格式除了数据以外,还有标签,JS等

格式

JSON就是一种有格式的字符串,规则:

• 映射用冒号（“:”）表示。”名称” : 值

• 并列的数据之间用逗号（“,”）分隔。”名称1” : 值1, ”名称2” : 值2；

• 映射的集合（对象）用大括号（“{}”）表示,{”名称1” : 值1, ”名称2”: 值2}

• 并列数据的集合（数组）用方括号(“[]”)表示 [ {”名称1” : 值, ”名称2” : 值2}, {”名称1” : 值, ”名称2” : 值2} ]

  下面用简单的例子来表示JSON格式

在JavaScript中的JSON

<script>
        1.表示员工 id 1 ,name 月月 ,age 18
        var json1='{"id":1,"name":"月月","age":18}';
        console.log(json1);
        
		2.表示多个员工id 1 ,name 月月 ,age 18
                        2       小轩      19
        var json2='[{"id":1,"name":"月月","age":18},{"id":2,"name":"小轩","age":19}]';
        console.log(json2);
        
		3.表示一个员工id 1 ,name 月月 ,age 18 ;部门 id 2 name 干饭部 sn EAT
        var  json3='{"id":1,"name":"张三","age":18,"dept":{"id":2,"name":"干饭部","sn":"EAT"}}';
        console.log(json3);
    </script>

JSON格式还可以和JavaScript对象互转,以上面例子为例

• JSON转JS: JSON.parse(json对象)
• JS转JSON:JSON.stringify(js对象)

1.把上面JSON转成 JS对象,方便我们从中获取数据
        var json1='{"id":1,"name":"月月","age":18}';
        //JSON 一个工具类  JSON.parse(json对象)
        console.log(JSON.parse(json1));
         //将JSON转成JS对象,还方便我们拿到对应的属性值
        console.log(JSON.parse(json1).name); //拿到对象的名字


2.把JS对象转成JSON  
        //JSON.stringify(js对象)
        var jsObj={id:1,name:"月月",age:18};
        console.log(JSON.stringify(jsObj));

注意好JSON格式与JS格式的区别,在JS中,JSON格式最外面是有一对单引号的,JS对象没有

如: JSON格式: ‘{“id”:1,“name”:“月月”,“age”:18}’ ,
JS可以写成 :{id:1,name:“月月”,age:18},
甚至可以写成:{“id”:1,“name”:“月月”,“age”:18},所以注意好区别

JSON与java对象互转

JSON还可以和java对象互转,在Java中一般转换JSON使用较多的有两种依赖

• Jackson:在 Spring MVC 中内置支持,稳定性好
• Fastjson:阿里出品的,速度快,也好用,但是如果处理复杂的转换可能会转换失败

使用需要添加对应的依赖,

Jackson依赖,一般根据自己配置Spring MVC的依赖版本使用稳定版本,不然可能有bug,我这里使用的MVC版本为5.0.8,对应Jackson版本为2.9.6

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.6</version>
</dependency>

Fastjson依赖,阿里出品,版本没有什么限制

<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>

建立测试类,实现JSON对象与java对象的互转,在java中,json的互转表现形式不一样,最好先写好JSON格式,然后再复制放入java中,idea工具会自动转换格式,例如

1.String json1=""; 
2. {"id":1,"name":"干饭部","sn":"EAT"}
3.将2复制进去1,然后就变成了4
4.String json1="{\"id\":1,\"name\":\"干饭部\",\"sn\":\"EAT\"}";

类department

@Data
public class Department {
    private Long id;
    private String name;
    private String sn;}

public class JSONTest {
    @Test
    public void testJackson() throws IOException {
        String json1="{\"id\":1,\"name\":\"干饭部\",\"sn\":\"EAT\"}";
        ObjectMapper objectMapper = new ObjectMapper();
        //把JSON对象转成java对象
        Department department = objectMapper.readValue(json1, Department.class);
        System.out.println(department); //Department(id=1, name=干饭部, sn=EAT)
        //把Java对象转成JSON字符串
        System.out.println(objectMapper.writeValueAsString(department)//{"id":1,"name":"干饭部","sn":"EAT"}
    }

    @Test
    public void testFastJSON()  {
        String json1="{\"id\":1,\"name\":\"开发部\",\"sn\":\"DEV\"}";
        //把JSON对象转成java对象
        Department department = JSON.parseObject(json1, Department.class);
        System.out.println(department);
        //把Java对象转成JSON字符串
        System.out.println(JSON.toJSONString(department));
    }
}

Spring MVC响应JSON

首先需要再pom.xml配置好Jackson依赖,然后再配置文件中,配置mvc注解解析器,定义类封装对应属性数据

响应JSON的演变

@Controller
public class JSONController {
    @RequestMapping("/getTime")
    //比如响应类型这样的JSON数据{"success":true,"msg":"2020-04-20 20:40"}
    public void getTime(HttpServletResponse response) throws IOException {
        //设置响应头,告诉浏览器我们响应了什么格式数据回浏览器
      response.setContentType("application/json;charset=utf-8");
        PrintWriter writer=response.getWriter();
        //拼接字符串
        writer.write("{\"success\":true,\"msg\":\""+new Date().toString() +"\"}");
        writer.flush();
    }
}

定义一个类 JSONResult.封装对应数据

@Data
public class JSONResult {
    private boolean success;
    private String msg;
}

@Controller
public class JSONController {
    @RequestMapping("/getTime2")
   //比如响应类型这样的JSON数据{"success":true,"msg":"当地时间"}
    public void getTime2(HttpServletResponse response) throws IOException {
        //设置响应头,告诉浏览器我们响应了什么格式数据回浏览器
        response.setContentType("application/json;charset=utf-8");
        PrintWriter writer=response.getWriter();
        JSONResult jsonResult = new JSONResult();
        jsonResult.setSuccess(true);
        jsonResult.setMsg(new Date().toLocaleString());
        writer.write(JSON.toJSONString(jsonResult));
        writer.flush();
    }
}

3.最终版

@Controller
public class JSONController {
    @RequestMapping("/getTime3")
    @ResponseBody //贴了这个注解Spring MVC才知道你是要响应JSON
    //调用用下面这个方法完了之后,会使用Jackson API帮我们把方法返回的对象转成JSON字符串
    //之后使用response对象响应回浏览器
    public JSONResult getTime3(){
        JSONResult jsonResult = new JSONResult();
        jsonResult.setSuccess(true);
        jsonResult.setMsg(new Date().toLocaleString());
        return jsonResult;
    }
}

AJAX

什么是AJAX? 简单来说就是 一个可以让我们使用js代码发送请求获取响应数据的技术

**AJAX有什么特点?**可以在用户浏览网页的同时与服务器进行异步交互和实现网页内容的局部更新,减少服务器的查询压力和带宽占用,增加用户体验

简单的说,用户点击哪里,其余部分不会整体刷新,浏览器中显示一个页面后，这个页面以后一直不改变，所有的操作请求都由这个网页中的 Javascript 代码发出,结果由js接收并增加到网页上,浏览器窗口显示的网页不会重新初始化

同步与异步的概念

• 同步:提交请求 —> 等待服务器处理 —> 处理完毕返回(个期间客户端浏览器不能干任何事)
• 异步：请求通过事件触发 —> 服务器处理（这时浏览器仍然可以作其他事情）—> 处理完毕

jQuery 中 AJAX API

API太多.简单用几种常用,还有对用的参数

• jQuery.ajax([options])

async(Boolean):默认是true异步请求,false是同步请求
contentType(String):发送信息到服务器默认编码类型
data(Object,String):发送到服务器的数据,key/value
dataType(String):预期服务器返回的数据类型
success(Function):请求成功后的回调函数
type(String):默认是GET请求
url:发送请求的地址

• jQuery.get(url, [data], [callback], [type])
• jQuery.post(url, [data], [callback], [type])

url :待载入页面的URL地址
data:待发送的key /value参数
callback:回调函数
type:返回内容格式

例子:模拟使用AJAX,GET请求检查用户名是否存在

@Controller
public class JSONController {
    @RequestMapping("/checkUsername")
    @ResponseBody
    public JSONResult checkUsername(String username){
        JSONResult jsonResult = new JSONResult();
        boolean flag ="yueyue".equals(username); //abc
        jsonResult.setSuccess(!flag);
        jsonResult.setMsg(flag?"用户名已占用":"可以注册了");
        return jsonResult;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jQuery-1.11/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $('#username').blur(function () {
                //获取用户输入的用户名
               var username =$(this).val();
               $.get('/checkUsername' ,'username='+username ,function (data) {
                   console.log(data.msg);
                   //设置的方法会返回被设置元素,是一个jQuery对象
               $('#result').html(data.msg)
                      .css('color',data.success ?'green':'red');
               });
            });
        });
    </script>
</head>
<body>
    用户名:<input type="text" id="username" ><span id="result"></span><br>
    密码:<input type="text"><br>
    <button id="btn">注册</button>

</body>
</html>