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(可选)：响应结果的类型

​

​

​

​

posted @   FM-XP  阅读(155)  评论(2)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示