JSON以及AJAX详解

最新推荐文章于 2021-04-15 15:28:37 发布

夜间不睡觉的程序员

最新推荐文章于 2021-04-15 15:28:37 发布

阅读量79

点赞数

分类专栏： Java基础

本文链接：https://blog.csdn.net/weixin_44012230/article/details/115169540

版权

Java基础专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文章目录

1. 什么是JSON
2. JSON 在 JavaScript 中的使用
- 2.1. json的定义
- 2.2. json 的两个常用方法
3. JSON在Java中的使用
2. Ajax的有关知识

1. 什么是JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。这样就使得 JSON 成为理想的数据交换格式。

json 是一种轻量级的数据交换格式。
轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。

2. JSON 在 JavaScript 中的使用

我们要使用json 和java中使用，我们需要使用到一个第三方的包。它就是gson.jar。

Gson是Google提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。可以将一个JSON字符串转成一个 Java 对象，或者反过来。

json在 java中的操作。常见的有三种情况。

java 对象和 json 的转换
java 对象 list 集合和 json 的转换
map 对象和 json 的转换

2.1. json的定义

json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间进行逗号进行分隔。

json 定义示例：

var jsonObj = { 
    "key1":12, 
    "key2":"abc", 
    "key3":true, 
    "key4":[11,"arr",false], 
    "key5":{ 
        "key5_1" : 551, 
        "key5_2" : "key5_2_value" 
    }, 
    "key6":[{ 
        "key6_1_1":6611, 
        "key6_1_2":"key6_1_2_value"
	},{ 
        "key6_2_1":6621, 
        "key6_2_2":"key6_2_2_value" 
    }]
};

json 访问示例：

alert(typeof(jsonObj));// object json 就 是 一 个 对 象
alert(jsonObj.key1); //12 
alert(jsonObj.key2); // abc 
alert(jsonObj.key3); // true 
alert(jsonObj.key4);// 得 到 数 组 [11,"arr",false] 
// json 中 数 组 值 的 遍 历 
for(var i = 0; i < jsonObj.key4.length; i++) { 
    alert(jsonObj.key4[i]); 
} 
alert(jsonObj.key5.key5_1);//551 
alert(jsonObj.key5.key5_2);//key5_2_value 
alert( jsonObj.key6 );// 得 到 json 数 组

//取 出 来 每 一 个 元 素 都 是 json对 象 
var jsonItem = jsonObj.key6[0]; 
// alert( jsonItem.key6_1_1 ); //6611 
alert( jsonItem.key6_1_2 ); //key6_1_2_value

2.2. json 的两个常用方法

json 的存在有两种形式。

一种是：对象的形式存在，我们叫它 json 对象。

一种是：字符串的形式存在，我们叫它 json 字符串。

一般我们要操作 json 中的数据的时候，需要 json 对象的格式。

一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。

JSON.stringify() // 把 json 对象转换成为 json 字符串
JSON.parse() 	// 把 json 字符串转换成为 json 对象

示例代码：

//把json对象转换成为json字符串 
var jsonObjString = JSON.stringify(jsonObj); //特别像Java中对象的toString
alert(jsonObjString) 

//把json字符串。转换成为json对象 
var jsonObj2 = JSON.parse(jsonObjString); 
alert(jsonObj2.key1);// 12 
alert(jsonObj2.key2);// abc

3. JSON在Java中的使用

3.1. javaBean 和 json 的互转

@Test 
public void test1(){ 
    Person person = new Person(1,"张三"); 
    // 创建Gson对象实例 
    Gson gson = new Gson(); 
    
    // toJson方法可以把java对象转换成为json字符串 
    String personJsonString = gson.toJson(person); 
    System.out.println(personJsonString); 
    
    //fromJson把json字符串转换回Java对象
    //第一个参数是json字符串
    //第二个参数是转换回去的Java对象类型
    Person person1 = gson.fromJson(personJsonString, Person.class); 
    System.out.println(person1); 
}

3.2. List 和 json 的互转

@Test 
public void test2() {
	List<Person> personList = new ArrayList<>();
	personList.add(new Person(1, "张三")); 
	personList.add(new Person(2, "李四"));
    
    // 首先new一个Gson对象
	Gson gson = new Gson();
    
	//把List转换为json字符串 
	String personListJsonString = gson.toJson(personList); 
    System.out.println(personListJsonString);
    
    // 要把复杂的 json 字符串转换成为 java 的List对象。需要继承 TypeToken 类。 
    // 并把返回的类型当成 TypeToken 的泛型注入 
    // 继承的TypeToken中传入要转换的类型
    // static class PersonListType extends TypeToken<List<Person>> { }
    // List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType()); 

    // 我们也可以使用匿名内部类将要转换的类型存放到参数列表中
    List<Person> list = gson.fromJson(personListJsonString, new TypeToken<List<Person>>() { }.getType()); 
    System.out.println(list); 
    Person person = list.get(0); 
    System.out.println(person);
}

3.3. Map和json的互转

@Test 
public void test3(){ 
    Map<Integer,Person> personMap = new HashMap<>();
    personMap.put(1, new Person(1, "张三")); 
    personMap.put(2, new Person(2, "李四"));

    Gson gson = new Gson(); 
    
    // 把map集合转换成为json字符串 
    String personMapJsonString = gson.toJson(personMap); 
    System.out.println(personMapJsonString);
    
    // 要把复杂的 json 字符串转换成为 java 的Map对象。需要继承 TypeToken 类。 
    // 并把返回的类型当成 TypeToken 的泛型注入 
    // 继承的TypeToken中传入要转换的类型
    // static class PersonType extends TypeToken<Map<Integer,Person>> { }
	// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType()); 	
    
    // 我们也可以使用匿名内部类将要转换的类型存放到参数列表中
    Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new 	
                                                   TypeToken<HashMap<Integer,Person>>(){}.getType());
    System.out.println(personMap2); 
    Person p = personMap2.get(1); 
    System.out.println(p);
}

2. Ajax的有关知识

2.1. 关于ajax

2.1.1. 什么是ajax

Ajax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，从而创建快速动态网页的技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

Ajax 请求的局部更新，浏览器地址栏不会发生变化。局部更新不会舍弃原来页面的内容

2.1.2. ajax的优缺点

优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
缺点：对搜索引擎不友好，要实现ajax下的前进后退功能成本较大；跨域问题限制

2.2. 原生的 AJAX 请求

2.2.1. 使用示例

-  创建XMLHttpRequest对象,也就是创建一个异步调用对象
-  创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息
-  设置响应 HTTP 请求状态变化的函数
-  发送 HTTP 请求
-  获取异步调用返回的数据
-  使用 JavaScript 和 DOM 实现局部刷新

var xhr = null; // 创建异步对象
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest(); // ie7+等现代浏览器
}else if(window.ActiveXObject){ // ie6，老版Opera
  xhr = new ActiveXObject('Microsft.XMLHTTP');
}
xhr.open('get','http://localhost:8080/test',true); //'get'是请求的方法 请求地址 true是异步，可省略
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // post 必须设置
xhr.onreadystatechange = function(){ // 若为同步，此代码不用写，直接在send后，用`xhr.responseText`即可。
    if(xhr.readyState==4 && xhr.status==200){
    /* 
    readyState
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
    status
        200 OK
        404 Not Found
    */
      xhr.responseText;
      xhr.responseXML.children[0].children;
      JSON.parse(xhr.responseText);
    }
}
xhr.send(String); // 用于post传参，形式："a=1&b=2"，而get传参就在url后面用“?”拼接

2.3. jQuery中的ajax

2.3.1. $.ajax 方法

$.load()，$.get()，$.post()，$.getScript()，$.getJSON()这些方法，都是基于$.ajax()方法构建的，$.ajax()是jQuery最底层的Ajax实现，因为可以用来代替下边的所有方法。

所以如果除了上面，还需要编写一下复杂的Ajax程序，那么就要用$.ajax()，$.ajax()不仅能实现与$.load()，$.get()，$.post()同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、complete（请求完成后处理）回调函数，通过设定这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数可以设置Ajax请求的超时时间或者页面的“最后更改”状态。

url		表示请求的地址 
type	表示请求的类型 	GET 或 POST 请求 默认是GET请求
data 	表示发送给服务器的数据 
			格式有两种： 
				一：name=value&name=value 
				二：{key:value} 
success 请求成功，响应的回调函数 
dataType 响应的数据类型 
		常用的数据类型有： 
			text 表示纯文本 
			xml 表示 xml 数据 
			json 表示 json 对象

示例：

$("#ajaxBtn").click(function(){ 
    $.ajax({ 
        url:"http://localhost:8080/ajaxTest/ajaxServlet", 
        // 以下两种都可以
        // data:"action=jQueryAjax", 
        data:{action:"jQueryAjax"}, 
        type:"GET", 
        success:function (data) { 
            // alert(" 服 务 器 返 回 的 数 据 是 ： " + data); 
            // var jsonObj = JSON.parse(data); 
            $("#msg").html("编号：" + data.id + " , 姓名：" + data.name); }, 
        dataType : "json" 
    }); 
});

2.3.2. `$.get` 方法和`$.post` 方法

url 		请求的url地址 
data 		发送的数据 
callback 	成功的回调函数 
type 		返回的数据类型

示例：

// ajax--get 请 求 
$("#getBtn").click(function({
    $.get("http://localhost:8080/getTest/ajaxServlet","action=jQueryGet",function (data) {
    	$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name); 
	},"json"); 
}); 

// ajax--post 请 求 
$("#postBtn").click(function(){
    $.post("http://localhost:8080/postTest/ajaxServlet","action=jQueryPost",function (data) { 
        $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
    },"json"); 
});

$.get 方法和$.post 方法的区别

post的安全性高于get；如果以get方式请求，请求参数会拼接到url后面，安全性性低，以post方式请求，请求参数会包裹在请求体中，安全性更高
数量区别：get方式传输的数据量小，规定不能超过2kb，post方式请求数据量大，没有限制。
传输速度：get的传输速度高于post

2.3.3. $.getJSON 方法

$.getJson( )方法用于加载JSON文件

url 		请求的 url 地址 
data 		发送给服务器的数据 
callback 	成功的回调函数

示例：

// ajax--getJson请 求 
$("#getJSONBtn").click(function(){ 
    $.getJSON("http://localhost:8080/getJsonTest/ajaxServlet","action=jQueryGetJSON",function (data) { 
        $("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name); 
    }); 
});

2.3.4. 表单序列化 serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。

示例：

// ajax请 求 
$("#submit").click(function(){ 
    // 把 参 数 序 列 化 
    $.getJSON("http://localhost:8080/ajaxTest/ajaxServlet","action=jQuerySerialize&" + 
              $("#form01").serialize(),function (data) { 
        $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name); 
    }); 
});

value&name=value 的形式进行拼接。

示例：

// ajax请 求 
$("#submit").click(function(){ 
    // 把 参 数 序 列 化 
    $.getJSON("http://localhost:8080/ajaxTest/ajaxServlet","action=jQuerySerialize&" + 
              $("#form01").serialize(),function (data) { 
        $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name); 
    }); 
});

夜间不睡觉的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON以及AJAX详解

文章目录1. 什么是JSON2. JSON 在 JavaScript 中的使用2.1. json的定义2.2. json 的两个常用方法3. JSON在Java中的使用3.1. javaBean 和 json 的互转3.2. List 和 json 的互转3.3. Map和json的互转2. Ajax的有关知识2.1. 关于ajax2.1.1. 什么是ajax2.1.2. ajax的优缺点2.2. 原生的 AJAX 请求2.2.1. 使用示例2.3. jQuery中的ajax2.3.1. $.ajax 方法
复制链接

扫一扫