jQuery学习之AJAX

温习ajax

无需重新加载页面而向服务器发起异步请求的能力。

1.创建一个XHR实例

使用对象检测

var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject('Msxml2.XMLHttp');
}else{
throw new Error('Ajax is not supported by this browser');
}

XHR方法和属性

方法

1.abort()

2.getAllResponseHeaders()

3.getResponseHeaders(name)

4.open(method,url,async,username,password)

5.send(content)

6.setRequestHeader(name,value)

属性

1.onreadystatechange

2.readyState

3.responseText

4.responseXML

5.status

6.statusText

2.发起请求

xhr.open('GET','/some/resource/url');

默认async为false，即为异步请求

xhr.send(null);

如果为post请求，需要xhr.send('a=1&b=2');

send方法的字符串必须符合正确的格式，URI编码，使用该函数即可encodeURLComponent

3.跟踪进展&获取响应

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
document.getElementById('someContainer')
.innerHtml = xhr.reponseText;
}else{
//error
}
}
}

加载内容到元素上

使用原生的xhr则需要上面结合一起的例子

利用jQuery只需要一句话 $('#someContainer').load('/serverResource');

1.利用jQuery加载内容

load(url,parameters,callback)返回包装集

有时候需要筛选响应元素$('#someContainer').load('/serverResource #div');即可

serialize() 返回已格式化的查询字符串

serializeArray() 返回表单数据的数组

发起GET和POST请求

1.利用jQuery获取数据

$.get(url,parameters,callback)

$.get(url,{a:1,b:2},function(data){

alert(data);

})

2.获取JSON数据

$.getJSON(url,parameters,callback)

可以自动解析返回的JSON字符串，使得结果数据项可以在回调函数里面使用。

(function($) {
$.fn.emptySelect = function() {
return this.each(function(){
if (this.tagName=='SELECT') this.options.length = 0;
});
}

$.fn.loadSelect = function(optionsDataArray) {
return this.emptySelect().each(function(){
if (this.tagName=='SELECT') {
var selectElement = this;
$.each(optionsDataArray,function(index,optionData){
var option = new Option(optionData.caption,
optionData.value);
if ($.browser.msie) {
selectElement.add(option);
}
else {
selectElement.add(option,null);
}
});
}
});
}
})(jQuery);

3.发起POST请求

$.post(url,parameters,callback)

完全控制ajax请求

1.带着所有的修整发起ajax请求

$.ajax(options)

url string,type string get or post,data object post parameters,dataType string 响应类型 xml/hmtl/json/jsonp/script/text,timeout 数值,global 布尔，确实是否启用全局函数,contentType string 在请求上指定内容类型，如果省略 application/x-www-form-urlencoded,success,error,complete,beforeSend,async,processData
布尔类型 false的话，阻止已传递数据被加工为URL编码格式，默认情况下，数据被加工为URL编码格式（适用于application/x-www-form-urlencoded的请求）,ifModified 布尔类型 true，只有相应内容没有被改变(Last-Modified标头)才允许请求成功。

2.设置请求的默认值

$.ajaxSetup()参数和ajax函数一致，但是ajaxSetup无法影响load

3.全局函数

ajaxStart(callback)

ajaxSend(callback)

ajaxSuccess(callback)

ajaxError(callback)

ajaxComplete(callback)

ajaxStop(callback)

把传入的回调函数附加到所有匹配元素上，一旦到达ajax请求处理的指定时刻就会触发回调函数

其中callback的参数包括type和target，type为全局函数类型的字符串，target为DOM元素

$(function(){
$('#goodButton').click(function(){
$.get('reflectData.php');
});
$('#badButton').click(function(){
$.get('returnError.php');
});
$('#successDisplay').ajaxSuccess(function(info){
$(info.target)
.append('<div>Success at '+new Date()+'</div>');
});
$('#errorDisplay').ajaxError(function(info,xhr){
$(info.target)
.append('<div>Failed at '+new Date()+'</div>')
.append('<div>Status: ' + xhr.status + ' ' +
xhr.statusText+'</div>');
});
});