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>');
	});
});