Asynchronous javascript and xml
Ajax的实现 : 基于一个对象XMLHttpRequest (如何获取?)
步骤: 1. 获取ajax对象
function getRequestObject() {
if (window.XMLHttpRequest) {
// 支持Opera, Safari, Mozilla, Chrome,Internet Explorer 7, and IE 8.
return(new XMLHttpRequest());
} else if (window.ActiveXObject) {
//支持IE5.5或IE6
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else {
//其他低版本或者更老的浏览器不支持
return(null);
}
}
2. 发送请求
function sendRequest() {
var request = getRequestObject();
// 请求方式/请求的资源/是否异步
request.open("GET", "message-data.html", true);
//get请求send的参数为null,为啥?
request.send(null);
//服务器响应请求以后执行的代码
request.onreadystatechange = function() {
handleResponse(request)
};
}
Post请求如何发送?
request.open("POST", url, true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送HTTP请求头
request.send(data); //例如传入”a=6&b=8”,后台可用request.getparameter(“a”)获取
3. 响应处理
function handleResponse(request) {
// 4表示服务器成功完成响应(总共5种状态:0,1,2,3,4)
if (request.readyState == 4 && request.status==200) {
alert(request.responseText); //responseXML
}
}
JQ中的ajax函数应用
$.ajax({
// 请求路径, string类型 , 默认为当前页面
url : "address",
// 请求方式(post或get)默认为get, 注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持
type : ”GET”,
//发送到服务器的数据, 要求为Object或String类型的参数。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
data : { param1 : "Java", param2 : "PHP“ },
//要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息。 script：返回纯文本JavaScript代码。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。
dataType : "json",
//要求为Function类型的参数，请求成功后调用的回调函数 (1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data){ //data可能是xmlDoc、jsonObj、html、text等等 }
success : successHandlerFunction,
error : errorHandlerFunction,
//要求为Boolean类型的参数，默认为true，设置为false将不会从浏览器缓存中加载请求信息。
cache : false,
})
$.getJSON( “doFindPageObjects.do”, {pageCurrent:1} , function(result) {
//处理返回结果
})
$.post("doFindPageObjects.do", {pageCurrent:1} , function(result) {
//处理返回结果
})
ajax的优点：
1、最大的优点就是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
5、ajax可使因特网应用程序更小、更快，更友好。
ajax的缺点：
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
