JSON&AJAX

JSON

1. 定义：JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript（欧洲计算机协会制定的 JS 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2. 语法：

   1. 基本规则

      • 数据在名称/值对中：json数据是由键值对构成的
      • 键用引号(单双都行)引起来，也可以不使用引号
      • 值得取值类型：
        1. 数字（整数或浮点数 number）
        2. 字符串（在双引号中 string）
        3. 逻辑值（true 或 false）
        4. 数组（在方括号中） {"persons":[{},{}]}
        5. 对象（在花括号中） {"address":{"province"："陕西"....}}
        6. null
      • 数据由逗号分隔：多个键值对由逗号分隔
      • 花括号保存对象：使用{}定义json 格式
      • 方括号保存数组：[]

   2. 获取数据:

      1. json对象.键名
      2. json对象["键名"]
      3. 数组对象[索引]

   3. 遍历

      //1.定义基本格式
      	var person = {"name": "张三", age: 23, 'gender': true};
      
      	var ps = [{"name": "张三", "age": 23, "gender": true},
      		{"name": "李四", "age": 24, "gender": true},
      		{"name": "王五", "age": 25, "gender": false}];
      	//获取person对象中所有的键和值
      	//for in 循环
      	/* for(var key in person){
      		//这样的方式获取不行。因为相当于  person."name"
      		//alert(key + ":" + person.key);
      		alert(key+":"+person[key]);
      	}*/
      	//获取ps中的所有值
      	for (var i = 0; i < ps.length; i++) {
      		var p = ps[i];
      		for(var key in p){
      		      alert(key+":"+p[key]);
      		}
      	}

3. JSON对象和JS对象的转化

   • JSON 字符串转 JS 对象

     ​ var js对象 = JSON.parse(json对象);

   • JS 对象转 JSON 字符串

     ​ var json对象 = JSON.stringify(js对象);

   // 写 JSON，这个格式的字符串里面存一个员工数据 id 1 name zs age 18
           var json1 = '{"id":1,"name":"zs","age":18}'; // JSON
   
           // 写 JSON，这个格式的字符串里面存两个个员工数据
           var json2 = '[{"id":1,"name":"zs","age":18}, {"id":2,"name":"ls","age":19}]';     					  			      									
   
           // 写 JSON，这个格式的字符串里面存一个员工数据
           var json3 = '{"id":1, "name":"zs", "age":18, "dept":{"id":5,"name":"开发部"}}';    													
   
           var jsObj1 = {"id":1, "name":"zs", "age":18}; // JS 对象
           var jsObj2 = {id:1, name:"zs", age:18}; // JS 对象
   
           console.log(json1.name); // undefined
           console.log(jsObj1.name); // zs
           console.log(jsObj2.name); // zs
   
   
           // JSON 字符串转 JS 对象
           console.log(JSON.parse(json1).age);
           console.log(JSON.parse(json2));
           console.log(JSON.parse(json3).dept.name);
           // JS 对象转 JSON 字符串
           console.log(JSON.stringify(jsObj2));
           var json4 = "{'id':1,'name':'zs','age':18}"; // 错误格式的 JSON
           console.log(JSON.parse(json4)); // 报错

4. JSON与JAVA对象的转换

   开发中一般都会使用第三方的一些 JSON 操作的依赖或者 JAR 包来来完成 Java 对象与 JSON 字符串之间的转换。在 Java 中，转换 JSON 的依赖或者 JAR 有很多，这里单讲两种常用：

   • Jackson：在 Spring MVC 中内置支持她，速度也挺快，稳定性比较好。
   • Fastjson：阿里出品，号称是 Java 领域中转换 JSON 最快的一个插件，中文文档比较齐全。

   1. Jackson

      1.0. 使用步骤

      • 导入jackson的相关jar包,或者依赖

      • 创建Jackson核心对象 ObjectMapper

      • 调用ObjectMapper的相关方法进行转换

        • 转换方法：

          • writeValue(参数1，obj): 将java对象转为json字符串,并将字符串返回到：以下几个参数的各个功能。

            参数1：

            File：将obj对象转换为JSON字符串，并保存到指定的文件中

            ​ Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中

            ​ OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

          • writeValueAsString(obj):将java对象转为json字符串,并返回一个字符串

          • readValue(String content, Class valueType):将json字符串转换为Java对象

      1.1. 引入依赖

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

      1.2 API使用

      public class Department {
          private Long id;
          private String name;
          private String sn;
          
          getXxx()方法/setXxxx()方法
      }

      public class JsonTest {
      
          @Test
          public void testJackson() throws IOException {
              Department department = new Department();
              department.setId(1L);
              department.setName("小猪");
              department.setSn("sn111");
      
              ObjectMapper mapper = new ObjectMapper();
              //序列化：将java对象转化为Json格式的字符串
              String str = mapper.writeValueAsString(department);
            
              //{"id":1,"name":"小猪","sn":"sn111"}
              System.out.println(str);
      
              //将Json对象写入java对象中
              String str1 = "{\"id\":1,\"name\":\"啦\",\"sn\":\"sn111\"}";
              Department dept = mapper.readValue(str1, Department.class);
              System.out.println(dept.getName());//啦
          }
      }

   2. Fastjson

      2.0 使用步骤：

      • 导入fastjson的相关jar包,或者依赖

      • 使用JSON类的静态方法

        1. public static String toJSONString(Object object)：将java对象转换为 json字符串；

        2. public static T parseObject(String text, Class clazz)：将json字

           ​ 符串转换为Java对象；

      2.1 引入依赖

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

      2.2 AOP使用

      public class JsonTest {
          @Test
          public void testFastJson(){
              Department department = new Department();
              department.setId(1L);
              department.setName("小猪");
              department.setSn("sn111");
              //序列化：将java对象转化为Json格式的字符串
              String str = JSON.toJSONString(department);
              System.out.println(str);
      
              String str2 = {\"id\":1,\"name\":\"ajax\",\"sn\":\"sn111\"}";
              Department dept = JSON.parseObject(str2, Department.class);
              //将Json对象写入java对象中
              System.out.println(dept.getName());//ajax
          }
      }

AJAX

1.概念

ASynchronous JavaScript And XML 异步的JavaScript 和 XML

AJax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新,提升用户的体验。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2.异步和同步

异步和同步：客户端和服务器端相互通信的基础上

• 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
• 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

3. AJAX缺陷

• AJAX 大量使用了 Javascript 和 AJAX 引擎，而这个取决于浏览器的支持。IE5.0 及以上、
  Mozilla1.0、NetScape7 及以上版本才支持，Mozilla 虽然也支持 AJAX ，但是提供XMLHttpRequest 的方式不一样。所以，使用 AJAX 的程序必须测试针对各个浏览器的兼容性。
• AJAX 更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经
  常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
• 对流媒体的支持没有 Flash、Java Applet 好。AJAX 不支持跨域访问，更多参见。

4. Jquery实现方式

1. $.ajax()

   • 语法：$.ajax({键值对});

     //使用$.ajax()发送异步请求
             $.ajax({
                //请求路径
                 url:'',
                 //请求方式:POST/GET
                 type:"POST", 
                 //同步还是异步（true异步默认，false同步）
                 async:true,
                 //传的参数,如果没有参数，直接写{}
                 data:{"username":"jack","age":23},
                /*
                  当服务器正常应答时，调用suceess对应的方法
                  方法中obj为参数，可以起任何名字，代表服务器传递的参数
                */
                 success:function (data) {
                     alert(data);
                 },
                  error:function () {
                      alert("出错啦...");
                  },//表示如果请求响应出现错误，会执行的回调函数
                 dataType:"text"//设置接受到的响应数据的格式
          	 });

     ​

   1. $.get()：发送get请求

      • 语法：$.get(url, [data], [callback], [type])
        • 参数：
          • url：请求路径
          • data(可选)：请求参数
          • callback(可选)：回调函数
          • type(可选)：响应结果的类型

   2. $.post()：发送post请求

      • 语法：$.post(url, [data], [callback], [type])
        • 参数：
          • url：请求路径
          • data(可选)：请求参数
          • callback(可选)：回调函数
          • type(可选)：响应结果的类型

​

​

​

​