Java EE day16学习总结
今天主要学习AJAX表达式和 JSON
思维导图：
一．AJAX
1.概念：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）【异步JavaScript加载技术】，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
Asyn Javacript And Xml = AJAX(异步JS和XML的技术)
2.同步与异步：
（1）同步：客户端发起了一个请求到服务端,在这个服务端返回之前 客户端必须等待，服务端多就返回 客户端等待多久，服务端卡死，客户端卡死。(同时只能执行一个事情)
（2）异步:客户端发起了一个请求到服务端,在服务端处理的期间 客户端无需在乎返回结果，仍然可以在服务端处理的同时操作其他的事情(同时执行N个事情)
3.AJAX的使用场景
（1）数据实时校验
（2）实时补全数据
（3）地图数据的实时更新
（4）数据的局部加载
4.原生JavaScript的AJAX的初体验
（1）创建一个ajax的核心引擎对象 XMLHttpRequest
var xhr = new XMLHttpRequest();
（2）提前告知ajax请求服务端后，该处理一个什么样的事情(回调函数)
xhr.onreadystatechange = function(){.....}
<1>保证ajax从服务端已经成功完成了数据的解析(xhr.readyState == 4)
readyState响应的状态类型(5大类型)
0.代表了这个XMLHttpRequest已经被创建好了
1.已经成功调用或者正在调用open
2.已经成功调用或者正在调用send
3.从服务端正在获取数据或者数据获取成功
4.已经成功从服务器获取到了并且解析了数据
<2>保证服务端返回状态是200 (xhr.status == 200)
<3>获取服务端的响应数据的文本(xhr.responseText)
（3）提前告知ajax要将请求提交到后端的哪个一个Servlet处理,提交的方式是GTE还是POST(确定请求路径)
xhr.open("GET","/day21_Ajax/DemoServlet?username=toobug","true");
参数1:提交的方式（GET/POST）
参数2:提交的后端处理的路径
参数3:是否异步(true/false) 默认true
（4）发送请求
xhr.send();
参考代码:
function ajax_demo() {
// 1.创建一个ajax的核心引擎对象 XMLHttpRequest
var xhr = new XMLHttpRequest();
// 2.提前告知ajax请求服务端后，该处理一个什么样的事情(回调函数)
//ajax引擎的对象绑定事件,监听服务端的状态响应数据
xhr.onreadystatechange = function(){
//保证ajax从服务端已经成功完成了数据的解析,并且服务端返回状态是200
if(xhr.readyState == 4 && xhr.status == 200){
//获取服务端的数据的文本
document.getElementById("ts").innerHTML = xhr.responseText;
}
}
// 3.提前告知ajax要将请求提交到后端的哪个一个Servlet处理,提交的方式是GTE还是POST(确定请求路径)
xhr.open("GET","/day21_Ajax/DemoServlet?username=toobug","true");
// 4.发送请求
xhr.send();
}
5.使用jQuery的Ajax的封装(带签名)
$.get({url:value , data:value , fn , dataType:value})
参数解释:
url:请求的服务端的地址
data:这个请求携带的参数
fn:回调函数
dataType:服务器的响应数据的格式(text/json)
参考代码:
function ajax_demo() {
//使用get提交
$.post({
//提交的地址
url:"/day21_Ajax/DemoServlet",
//携带参数
data:"username=toobug",
//回调函数(成功,success是jQuery封装好的函数,这个函数是响应状态为4/200的时候才会执行)
success:function(data) {
alert(data);
$("#ts").html(data);
},
//回调函数(封装了失败的判断)
error:function(data){
alert("服务端响应失败");
},
//响应类型
dataType:"text"
});
}
注意问题:
(1)根据不同的提交方式,选择不同的$.get或者$.post就可以了
(2)关于回调函数
1)fn:function(data){..}
这个回调函数,jQuery没有进行任何状态判断的封装,需要自己手动去判断返回的状态结果
2)success:function(data){..}
这个回调函数,jQuery已经进行了成功与否的判断封装,如果是xhr.readyState == 4 && xhr.status == 200,则返回的是success
3)error:function(data){...}
这个回调函数,jQuery已经进行了成功与否的判断封装,如果是非xhr.readyState != 4 && xhr.status != 200,则返回的是error，这三个函数,自己根据需求 选择调用即可，可以同时写上。
4)回调函数里面的参数是我们需要注意的一个问题,这里的参数个数可以是多个，当默认只有一个时候，则返回的是服务端响应的数据，一般也只需要这个数据，其他参数 基本见不到,名字可以随意命名 但是一般都是data。
6.使用jQuery的Ajax的封装(不带签名)
get和post的写法一致,区别和带签名的方式就是要去掉{}，不需要写方法的签名，但是的顺序必须固定 url->data->success->dataType参数，这个顺序千万不能乱,{}千万不能加。
function ajax_demo() {
$.post({
//提交的地址
"/day21_Ajax/DemoServlet",
//携带参数
"username=toobug",
//回调函数(成功,success是jQuery封装好的函数,这个函数是响应状态为4/200的时候才会执行)
function(data) {
alert(data);
$("#ts").html(data);
},
//响应类型
"text"
});
}
7.jQuery的基于AJAX的底层实现方式($.ajax)
$.ajax是我们上面$.get和$.post的底层实现，因为$.ajax的操作也比较简单，和上面的基本一致，不过灵活度更高
$.ajax({
//是否异步提交
async:true,
//设置一个请求类型
type:"GET",
//提交的地址
url:"/day21_Ajax/DemoServlet",
//携带参数
data:"username=toobug",
//回调函数(成功,success是jQuery封装好的函数,这个函数是响应状态为4/200的时候才会执行)
success:function(data) {
alert(data);
$("#ts").html(data);
},
//回调函数(封装了失败的判断)
error:function(data){
alert("服务端响应失败");
},
//响应类型
dataType:"text"
});
二.JSON数据(普普通通的字符串类型的数据格式)
在以后的实际开发当中，后端返回给前端的数据，往往是复杂的、多样的、量大的,也就是说，前端都需要的数据 绝对不仅仅只是一个普通的字符串而已。那么像这种数据，后端怎么响应给前端?
String usernmae = "TOOBUG"
double price = 190;
char sex = '男';
Date date = "2020年03月19日11:26:08"
.....
String str = {usernmae=TOOBUG,price=190.00,sex=男,date=2020年03月19日11:26:08}
String arr= [usernmae=TOOBUG,price=190.00,sex=男,date=2020年03月19日11:26:08]
我们可以将我们对象的数据,存储到一个容器当中，然后将这个容器转换成字符串，交给前端处理。但是要注意一个问题,目前的这种方式 还仅仅只是我们Java的操作，而前端 有可能对应的编程语言是PHP、.NET、Python。也就是说，现在前端和后端是处于一种异构的开发模式(完全两种不同的数据结构和代码风格)。最少我们是知道的,不论是前端，和后端都是支持字符串的，后面JavaScript的生态圈就提出了一种概念，能否诞生一个新的数据格式这种格式仅仅只是一个字符串，但是格式的风格固定下来，前端和后端都完全参考这种格式进行数据的传输，实现完全兼容。
1.什么是JSON
JSON(JavaScrpt Object Notation) 是一种轻量级的数据交换格式,JSON一个完全独立于编程语言之间的普通文本格式，也就是说JSON从来没有和编程语言的强绑定关系。
2.优点:
（1）打破语言和语言之间的数据交换的弊端
（2）格式简单，易于机器解析和人的阅读
3.JSON的两种格式(字符串):
（1）对象格式:{"属性名":属性值,"属性名":属性值,"属性名":属性值...}
属性名:只能是字符串，必须要双引号包裹
属性值:可以是任意类型,可以是变量也是可以是一个具体的数据类型
举例:
{
"usernmae":"Andy",
"price":190.00,
"sex":'男',
"date":date
}
（2）数组格式:
[
对象1,
对象2,
对象3,
]
这里的对象可以的任意对象,比如说继续存放一个数组格式的JSON或者对象的类型的JSON。
上面两种格式是可以任意嵌套(完美兼容),数组嵌套对象，对象嵌套数组，数组嵌套数组，对象嵌套对象都是OK的。
（3）JSON的格式案例:
//使用对象格式创建一个json
var json1 = "{'username':'Andy','price':192.00,'sex':'男','date':'2020年03月19日14:05:20'}";
//黑魔法函数
var eval1 = eval("("+json1+")");
//--------------------------------------------------------
//使用数组格式创建一个json
var json2 = "[1,'hello',190,true]";
var eval2 = eval("("+json2+")");
//alert(eval2[3]);
//--------------------------------------------------------
//原生JS提供的一种对于JSON的简便式写法(这种并不是一个标准的JSON,但是在JS处理好之后，仍然会转换成字符串进行操作)
var json3 = {
'username':'Andy',
'price':192.00,
'sex':'男',
'date':new Date()
};
//--------------------------------------------------------
var json4 = [
new Date().getDate(),
100,
true,
"Andy"
];
//--------------------------------------------------------
//对象格式嵌套数组格式
var json5 = {
"username":"张三",
"age":18,
"password":"123",
"hobby":["打篮球","学习","学JAVA"]
};
//--------------------------------------------------------
//数组格式嵌套对象格式
var json6 = [
json5,
{
"username":"李四",
"age":19,
"password":"123",
"hobby":["打篮球","学习","学JAVA"]
},
{
"username":"王五",
"age":20,
"password":"123",
"hobby":["打篮球","学习","学PHP"]
}
];
alert(json6[2].hobby[2]);
4.在以后的开发当中，这些JSON的数据肯定是来自于后端而不是前端,所以出现了问题了，这些JSON的格式，在前端是比较容易拼写的但是在后端当中，我们Java工程师要拼接JSON的格式是非常难的。(不说太难,自己回想一下 我们学JDBC的时候 拼写SQL...)
JAVA不是不可以拼写JSON，只不过拼写起来比较的复杂，因为JAVA是一个强类型语言，对于每一个不同的数据都有严格的标识，一点都不能乱。
怎么处理?
（1）自己一个个手动拼(不理智)
（2）自己手动一个工具类进行JSON拼接(没必要)
（3）使用成熟的第三方工具类进行处理JSON
apache提供 jsonlib
阿里提供 fastjson
google gson
spring jackson
5.jackson是spring社区提供的一个用于将JAVA的任意数据转换为JSON的工具类:
（1）需要导包
jackson-annotations-2.2.1.jar
jackson-core-2.2.1.jar
jackson-databind-2.2.1.jar
（2）使用转换方法，将任意数据进行转换
String s = new ObjectMapper().writeValueAsString(数据);