AJAX
AJAX
一、AJAX
Asynchronous（异步的，不等待的） JavaScript And XML，多个技术联合实现的前端技术产物。 在服务器端，Ajax是一门与语言无关的技术。服务器端接受数据必须以浏览器能理解的格式发送，返回数据只能为XML、JSON或HTML。 案例：自动补全、地图
ajax请求就是一个线程，主要解决页面的局部刷新问题。
不刷新整个页面就可与服务器通讯： Flash、Java applet、框架、隐藏的iframe、XMLHttpRequest（ajax）
缺点：后退功能不好实现、对流媒体支持没有Flash和Java applet好、手持设备支持差。
二、 XMLHttpRequest的概述
<script type="text/javascript">
window.onload = function(){
//1.获取a节点，并为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据：url
//可以添加“?time=”+new Date()，来起到禁用缓存的效果
var url = this.href;
var method = "GET";
//5.调用XMLHttpRequest对象的open方法，准备请求
request.open(method, url);
//6.调用send方法，发送请求
request.send(null);
//7.为对象添加onreadystatechange响应函数，由服务器触发事件，标志是readyState属性变化
request.onreadystatechange = function(){
//8.判断响应是否完成：对象的readyState属性值为4的时候
//readyState：0表示未初始化，没有调用open方法；1表示正在加载，没有调用send方法；2表示已加载完毕，请求已经开始；3表示交互中，服务器正在发送响应；4表示完成，响应发送完毕。每次值的改变都要触发onreadystatechange事件。
if(request.readyState == 4){
//9.再判断响应是否可用：对象的status属性值为200
//status是服务器发送的状态码，1/2/3/4/5开头
if(request.status == 200 || request.status == 304){
//10.打印响应结果：responseText
//包含了从服务器端发送的数据，是一个html/xml/txt
alert(request.responseText);
}
}
}
//2.若是超链接，取消a节点的默认行为
return false;
}
}
</script>
<body>
<a href="helloAjax.txt">Hello</a>
</body>三、Ajax数据格式
- HTML 普通文本组成，文本存储在responseText属性中，HTML已经是希望的格式可以直接插入页面中。 方法：更新这个元素的innerHTML属性。
//放到id为details的div标签中
document.getElementById("details").innerHTML = request.responseText;优点：HTML不需要JS解析、可读性好、与innerHTML属性搭配效率高； 缺点：HTML不合适更新一篇文档的多个部分、非DOM标准。
- XML
//1.结果为XML格式，需要使用responseXML来获取
var result = request.responseXML;
//2.结果不能直接使用，需要先建立对应的节点，再将节点加入到#detail中
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
var aNode = document.createElement("a");
aNode.appendChild(document.creatTextNode(name));
aNode.href = "mailto:"+email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode.appendChild(document.creatTextNode(website));
aNode.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);优点：XML为数据自定义合适的标记、利用DOM可以完全掌控文档； 缺点：文档手部信息/类型不正确，responseXML值为空、DOM解析复杂。
- JSON JSON（JavaScript Object Notation）是JavaScript原生格式，处理时不需要任何特殊的API或工具包。对象是无序的键值对集合，Json的值还可以是一个方法。
//把字符串转成json对象，使用eval方法
var jsonStr = "{'name':'huang'}";
eval("("+jsonStr")");
var result = request.responseText;
var object = eval("("+result+")");
var name = object.person.name;优点：JSON不需要从服务器端发送含有特定内容类型的首部信息。 缺点：过于严谨、不易读、eval函数存在风险（死循环）。
- 总结 不需要与其他应用程序共享数据时，用HTML片段返回数据； 数据需要重用，用JSON； 远程应用程序未知时，用XML（web服务领域的世界语）。
四、JQuery中使用Ajax
JQuery对Ajax进行了封装，最底层方法.ajax()，第二层是load()，.get()和.post()，第三层是.getScript()和
//load方法，加载后的数据是HTML
<script type="text/javascript">
$(document).ready(function () {
$("#testAjax").click(function () {
var url = this.href; //添加：+ “ h2 a div”
//load可以添加callback函数，或者添加Date来去除缓存
//只返回部分信息：可以添加选择器，url后加空格加位置
$("#details").load(url);
return false;
});
});
</script>
//get方法，自己填充data。post方法类似，args为JSON格式变量
$.get(url, args, function(data){
var name = $(data).find("name").text();
...
$("#details").empty().append("${JS语句，加上面的name}");
})
//getJSON方法
var name = data.person.name;
//或者使用get方法，在最后加上type属性为"JSON"
//找name为username的input节点
$(":input[name='username']")
//解决乱码
response.setContentType("text/html";charset=UTF-8);
response.setCharacterEncoding("UTF-8");五、Ajax使用Jackson
1. 代码
//1.创建ObjectMapper对象
//2.调用writeValueAsString方法把一个对象转成Json字符串
//Jackson使用getter方法来定位JSON对象的属性
//可以添加JsonIgnore注解来忽略某个geeter定义的属性
/**
* 序列化
* ObjectMapper是JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现。
* ObjectMapper有多个JSON序列化的方法，可以把JSON字符串保存File、OutputStream等不同的介质中。
* writeValue(File arg0, Object arg1)把arg1转成json序列，并保存到arg0文件中。
* writeValue(OutputStream arg0, Object arg1)把arg1转成json序列，并保存到arg0输出流中。
* writeValueAsBytes(Object arg0)把arg0转成json序列，并把结果输出成字节数组。
* writeValueAsString(Object arg0)把arg0转成json序列，并把结果输出成字符串。
*/
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(user);
/**
* 反序列化
* ObjectMapper支持从byte[]、File、InputStream、字符串等数据的JSON反序列化。
*/
ObjectMapper mapper = new ObjectMapper();
User user = mapper.readValue(json, User.class);2. 注解
（1）@JsonAutoDetect 自动检测，（作用在类上）来开启/禁止自动检测。
（2）@JsonIgnore 作用在字段或方法上，用来完全忽略被注解的字段和方法对应的属性。 @JsonIgnoreProperties更高级。
（3）@JsonProperty 作用在字段或方法上，用来对属性的序列化/反序列化，可以用来避免遗漏属性，同时提供对属性名称重命名。
（4）@JsonUnwrapped 作用在属性字段或方法上，用来将子JSON对象的属性添加到封闭的JSON对象。
（5）@JsonIdentityInfo 2.0+版本新注解，作用于类或属性上，被用来在序列化/反序列化时为该对象或字段添加一个对象识别码，通常是用来解决循环嵌套的问题。 用法：@JsonIdentityInfo(generator = ObjectIdGenerators.PropertyGenerator.class, property = “id”) // 可加参数resolver = 类名.class 解释：被注解的实体类每次被序列化时，Jackson都会被为它生成一个标识id，若遇到id相同的对象（即同一个对象），则不会再次对其序列化，直接忽略，可以断绝循环引用。
（6）@JsonPropertyOrder 作用在类上，被用来指明当序列化时需要对属性做排序，它有2个属性。
（7）@JsonView 视图模板，作用于方法和属性上，用来指定哪些属性可以被包含在JSON视图中。
更多的注解可以参考这篇博客。