JSON
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写，也易于机器解析和生成。JSON采用完全独立于语言的文本格式，许多语言都提供了对JSON的支持，因此JSON是一种优秀的数据交换(客户端与服务端之间)语言。
一、JSON在JavaScript中的使用
1.1 json定义
//定义
var jsonobj = {
"key1": 12,
"key2": "abc",
"key3": true,
"key4": [11, "arr", false],
"key5": {
"key5_1": 222,
"key5_2": "value"
},
"key6": [
{
"key6_1_1": 6611,
"key6_1_2": "value"
},
{
"key6_2_1": 7777,
"key6_2_2": true
}
]
};
1.2 json访问
json本身是一个对象，key可以理解为其对象中的一个属性
alert(typeof (jsonobj)); //object json是一个对象
alert(jsonobj.key1); //12
alert(jsonobj.key2); //abc
alert(jsonobj.key3); //true
alert(jsonobj.key4); //数组
//遍历数组
for (let i = 0; i < jsonobj.key4.length; i++) {
alert(jsonobj.key4[i])
}
1.3 Json的两个常用方法
json的存在有两种形式 对象的形式 以及 字符串的形式（一般操作json数据时需要对象格式，一般进行数据交换时，使用json字符串）
JSON.stringify()：将json对象转换为字符串
JSON.parse()：将json字符串转换为对象
二、JSON在服务器中的使用
2.1 JavaBean与json互转
//1.JavaBean与json互转
@Test
public void json1() {
Person person = new Person(1,"磊爷");
//创建Gson对象实例
Gson gson = new Gson();
//toJson：转换为字符串
String json = gson.toJson(person);
System.out.println(json);
//fromJson：转换为对象 json字符串 对象
Person json1 = gson.fromJson(json, Person.class);
System.out.println(json1);
}
2.1 List与json互转
//2.list和json互转
@Test
public void json2() {
List<Object> list = new ArrayList<>();
list.add(new Person(1,"磊爷"));
list.add(new Person(2,"jsb"));
list.add(new Person(3,"asb"));
//转为json字符串
Gson gson = new Gson();
String json = gson.toJson(list);
System.out.println(json);
//转为对象
Object json1 = gson.fromJson(json, new TypeToken<List<Person>>(){}.getType());
System.out.println(json1);
}
2.1 map与json互转
//3.map和json互转
@Test
public void json3() {
Map<Integer, Person> map = new HashMap<>();
map.put(1, new Person(1,"磊爷"));
map.put(2, new Person(2,"jsb"));
//转换为字符串
Gson gson = new Gson();
String json = gson.toJson(map);
System.out.println(json);
//转换为对象
Object o = gson.fromJson(json, new TypeToken<Map<Integer, Person>>() {
}.getType());
System.out.println(o);
}
AJAX
AJAX即 "Asynchronous JavaScript And XML" （异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
AJAX是一种浏览器通过js异步发起请求。局部更新页面的技术
同步：客户端必须等待服务器端响应。等待期间不能进行其他的操作
异步：不需要服务器端的响应
ajax可以无需加载网页时，更新部分网页
一、原生AJAX请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
/*
参数：
1.请求方式 get、post
get方式，请求参数在url后边拼接，send方法为空参
post方式，请求参数在send方法中定义
2.请求url
3.同步false 异步true
*/
xmlhttp.open("GET","test1.txt",true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式：xmlhttp.responseText
//获取时间：当服务器响应成功后获取
//当xmlhttp对象就绪状态改变时，会触发事件
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>
二、jQuery中AJAX请求
2.1 $.ajax方法
- url 表示请求地址
- type 表示请求类型GET/POST
- data 表示发送给服务器的数据
- name = value & name = value
- {key:value}
- success 请求响应，响应的回调函数
- dataType 响应的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function fun() {
$.ajax({
url:"ajaxServlet",
type:"post",
//data:"username=jack&age=23"
data:{"username": "lei", "age": 23},
success: function () {
alert("成功了")
},
})
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>
2.2 $.get()
- url
- data
- callback
- type
2.3 $.post()
- url
- data
- callback
- type