Ajax
文章目录
Ajax
页面的局部刷新技术，给人一种很好的交互体验 ；
关于 XMLHttpRequest 对象
XMLHttpRequest 对象，在不同的刘浏览器上被创建的方式是不同的，但是对于创建出来的对象是一样的，它们的方法和属性是相同的 ；
在 IE 系浏览上，XMLHttpRequest 对象被实现为 ActiveXObject 对象，在非 IE 上，比如 filefox、chrome 等浏览器上被实现为一个本地 JS 对象，；
因此为了能兼容浏览器，XMLHttpRequest 对象一般这样获得，先判断下当前浏览器有 ActiveXObject 还是有 XMLHttpRequest 对象 ：
function getXMLHttpRequest() {
var xmlHttpRequest = false;
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
return xmlHttpRequest;
}
知道这个事，就行了，实际开发中，使用 Jquery ，不需要我们进行兼容性判断 ；
通过 XMLHttpRequest 对象演示 Ajax
<script type="text/javascript">
alert("${pageContext.request.contextPath}")
window.onload = function () {
// 获取节点
var testAjax = document.getElementsByTagName("a")[0];
// 绑定 点击事件
testAjax.onclick = function () {
// 创建 XMLHttpRequest 对象
var xmlHttpRequest = getXMLHttpRequest();
// 设置要访问的资源，使用 POST 传递一些数据过去
var method = "POST";
var url = this.href;
xmlHttpRequest.open(method, url);
// 上面设置了 post 传递数据，需要告诉服务器正在发送数据，数据已经符合编码
// 如果是 get 方法，则不需要进行设置
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 发起请求,如果有数据需要提交，参数就写数据；没有，就写 null ；
xmlHttpRequest.send("name:yaz");
// 接受状态响应
xmlHttpRequest.onreadystatechange = function () {
// 判断状态码
var state = xmlHttpRequest.readyState;
if (4 == state) {
// 获取回应,响应头
var response = xmlHttpRequest.responseText;
// 打印输出
console.log(response) ;
}
};
// 取消 超链接的默认行为
return false;
}
}
</script>
Ajax 传输的数据格式
只要是文本数据，理论上，Ajax 都可以请求，但是请求回来以后，怎么解析，是个问题，目前便于解析格式有三种：Html、XML、JSON ；
Ajax 请求回来的数据格式，我认为，是一个纯文本形式，就是数据在服务器端是什么样的，请求回来的数据就是什么样的；
Ajax 解析 HTML
因为请求回来的数据就是 HTML 格式，因此，不需要做过多的解析，直接使用节点的 innerHtml 即可；
但是缺点也有，数据的关系不明确，如果对传回来的某个节点进行数据的拆分，比较麻烦 ，比如传回来一个 TextArea 里面，想要对里面的数据进行拆分，只获取其中的某个部分；
if (4 == state) {
if ((200 == xmlHttpRequest.status) || (304 == xmlHttpRequest.status)) {
// get response , the information wo need is contain in the attribute that named responseText
var responseText = xmlHttpRequest.responseText;
// show the information in the html node's div
var showTextDiv = document.getElementById("showText");
showTextDiv.innerHTML = responseText;
}
}
Ajax 解析 xml
xml 就是为了传递数据而生，虽然说诞生的意义不在此，是为了取代 HTML ，但是目前来说，已经不可能，但是 xml 也是好样的，在与目标背道而驰的路上一路狂奔，称为传输数据的好帮手 ；
xml 可以明确的表示数据之间的关系，并且完全可以被 DOM 解析，使用 DOM 可以随意操控它 ；解决了 HTML 的拆分数据困难的问题 ，但是数据很复杂的时候，解析起来也是一件不容易的事情（此时使用 JSON）；
但是 xml 也有弊端，传输回来的数据，不是 HTML 的节点，需要我们自己进行对数据的解析，然后拼接成节点 ；
if (4 == state) {
if ((200 == xmlHttpRequest.status) || 304 == xmlHttpRequest.status) {
var xmlText = xmlHttpRequest.responseXML;
// parse xml to splice as a html node
var name = xmlText.getElementsByTagName("name")[0].textContent;
var skill = xmlText.getElementsByTagName("skill")[0].textContent;
// splice html node
var a = document.createElement("a");
a.appendChild(document.createTextNode(name + ":" + skill));
var h2 = document.createElement("h2");
h2.appendChild(a);
var showText = document.getElementById("showText");
// remove node's content
showText.innerHTML = "" ;
showText.appendChild(h2) ;
}
}
注意，服务器端的 xml 文档，则文档开头需要指出 <?xml version="1.0" encoding="UTF-8"?> ，不然 responseXML 的值是空的 ；
如果是动态生成的话，还需要调用 response.setContentType（） 方法，指定下文档类型，不然 responseXML 的值也是空的 ；
Ajax 解析 JSON
JSON 不需要像 XML 那样费劲的去解析，可以直接点出属性来 ： xx.aa 这样，对于复杂的数据关系，可以使用 JSON 可以免去解析 XML 的苦恼 ；
JSON 是 JS 里面的一个技术，JSON 对象就是 JS 对象，但是要将 JSON 从字符串变为 JS 对象，需要使用 eval() 方法 。形如：evel("（"+ json +"）")；
但是 JSON 怎么说，也是一个字符串，需要自己进行拼接节点 ；
// use for receive string ,such as html,json
var jsonText = xmlHttpRequest.responseText;
// transform json string to js's object
var object = eval("(" + jsonText + ")") ;
// get attribute from json
var name = object.name;
var birthday = object.birthday;
// splice html node
var a = document.createElement("a");
a.appendChild(document.createTextNode(name + ":" + birthday));
使用 eval() 有风险，如果对方传来的 json 里面有恶意的 js 代码，也会被执行 ；
var jsonObejce = {
...
...
"testEvel":function () {
for(var i = 0 ;i<1;i--){
alert(i);
}
}
}
比如这样的一个 json 对象，里面的一个属性方法，里面包含了一段死循环 alert 代码，会被执行 ；
Jquery 中的 Ajax
Jquery 对 Ajax 操作进行了封装，在 JQuery 中最底层的方法是 $.ajax()，第二层是 load()，$.get() 和 $.post() ，第三层是 $.getScript() 和 $.getJSON() ;
load() 方法：
是 JQuery 中最为简单和常见的 Ajax 方法，能载入远程的 HTML 代码，并插入到 DOM 中 ，根据此特性，该方法最适合解析 HTML；
用此方法，解析 XML ，它也会知直接将 XML 插入到 DOM 中，但是 XML 中的标签，都是自定义，不会被识别，还需要我们解析，拼接标签，对于解析，下面的 $.get()/$.post() 有便捷的方法；
方法签名：load(url,[data],[callback]) ;
url请求页面的URL地址，是个String类型- 需要发送给服务器的参数，是个键值对形式，
Object类型 - 请求完成以后执行的操作，无论请求成功与否，都会执行，是个
function；
只需要使用 JQuery 选择器为 HTML 片段指定目标位置，然后将要加载的文件的 URL 作为参数传递给 load（） 方法即可 ；
如果只需要获取传递回来的 HTML 页面中部分元素，则在 URL 后面添加一个选择器：URL+空格+选择器 ；
如果没有传递 data 参数，则 load（） 使用 get 方式提交，如果有 data 参数，则使用 post 方式提交；
回调函数，有三个参数，代表请求对象的 data ，代表请求状态的 testStatus 对象和 XMLHttpRequest 对象 ；
<script type="text/javascript">
$(function () {
alert(1);
$("a").click(function () {
var url = this.href + " #a";
var date = {"date": new Date()};
alert(2)
$("#content").load(url, date);
return false;
});
});
</script>
$.get()/$.post() 方法
方法有三个参数，分别是 URL地址，需要传给服务器的数据，回调函数 ，返回结果的类型；
其中 回调函数 的也有三个，跟 load() 方法的回调函数一样；
返回结果类型，用于告诉浏览器，数据的类型，可以使用该方法解析 JSON ；
跟之前解析 XML 一样，需要自己拼接下；
$("#testXml").click(function () {
var url = this.href ;
var args = {"time":new Date()}
// argument 'data' preserve data that server return
$.get(url,args,function (data) {
// parse xml to get special data that we need
var name = $(data).find("name").text();
var skills = $(data).find("skill").text();
$("#content").empty().append("<a href='"+skills+"'>name</a>") ;
})
return false ;
});
$.getJSON() 方法
用于解析 JSON 对象 ；
方法接受三个参数，基本都是一样，跟上面；
$("#testJSON").click(function () {
var url = this.href ;
var args = {"time":new Date()};
$.getJSON(url,args,function (data) {
var name = data.name ;
var age = data.age ;
$("#content").empty().append("<a href='"+age+"'>"+name+"</a>") ;
})
return false ;
});
jackson 的使用
参考这篇博客：Jackson使用
浙公网安备 33010602011771号