ajax datatype_Ajax的基本使用

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的优点：