jquery實戰(三)------Ajax

//1.發起請求
/*
	1.指定http方法，比如post或get
	2.提供將要觸發的服務器資源的url
	3.讓xhr實例知道如何通報進展
	4.爲post請求提供任何體內容
*/
//2.我們通過調用xhr的open方法，設置最先的兩項如下：
xhr.open('get','/some/resource/url');//這個方法不把請求發送到服務器，它不過是設置URL和http方法。
//3.通過指派回調函數到xhr對象的onreadystatechange屬性實現，這個函數稱爲就緒狀態。
xhr.send(null);//發起請求的最後一步，請求post請求提供內容併發送到服務器。
//4.跟蹤進展
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status >= 200 && xhr.status <300){
			//sucess
		}else{
			//error
		}
	}
}
//利用元素的創建一個html片段
var xhr;
if(window.XMLHttpRquest){
	xhr = new XMLHttpRquest();
}else if(window.ActiveXObject){
	xhr = new ActiveXObject("msxm12.XMLHTTP");
}else{
	throw new Error("axaj is not supported by this brower");
}
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status >= 200 && xhr.status <300){
			document.getElementById('someContainer').innerHTML =xhr.responseText;
		}
	}
}
xhr.open('get','/serverResource');
xhr.send();
//利用jquery編寫作爲就緒程序體的等效代碼
$('#someContainer').load('/serverResource');
//jquery允許在URL上指定選擇器以便對哪一些響應響應元素可以插入到已包裝元素進行限制，通過URL添加空格好#作爲後綴來完成。
$('.injectMe').load('/someContainer #div');

//接受數據，傳遞到頁面
Pub.handleResponse= function handleResponse(data,eleid){
	  //獲取表單Form2的對象
      var ele =document.getElementById(eleid);
      //將返回的結果放置到表單Form2的元素中
      ele.innerHTML = data;
    
}
//實例
$(function(){
	$('#styleDropdown').change(function(){//當值改變時，觸發change。一般使用在文本框中
	var styleValue = $(this).val();
	$('#detailDisplay').load('getDetails.jsp',{style:styleValue});//爲選中的款式。
		
	}).change();//觸發change
});
//2.發起get和post請求
//2.1利用jquery獲取數據
$.get()
//實例
$(function(){
	$('#testButton').click(function(){
		$.get('reflectData.jsp',{a:1,b:2},
		function(data){alert(data);});
	});
});
//2.2獲取json數據
$(function(){
	$('#styleDropdown').change(function(){//當值改變時，觸發change。一般使用在文本框中
	var styleValue = $(this).val();
	$('#detailDisplay').load('getDetails.jsp',{style:styleValue});//爲選中的款式。
	adjustColorDropdown();//1.觸發顏色的下拉列表調整狀態
	}).change();//觸發change
	$('#colorDropdown').change(adjustSizeDropdown);//2.給顏色的下拉列表綁定change監聽器
});
function adjustColorDropdown(){
	var styleValue = $('#styleDropdown').val();
	var dropdownSet = $('#colorDropdown');
	if(styleValue.length == 0){//1.啓用或禁用顏色下拉列表
		dropdownSet.attr("disabled",true);
		dropdownSet.emptySelect();
		adjustSizeDropdown();//2.清空已禁用的下拉列表並清除從屬下拉列表
	}
	else{
		dropdownSet.attr("disabled",false);
		$.getJSON(
		'getColors.jsp',{style:styleValue},//3.根據款式選擇顏色
		function(){
			dropdownSet.loadSelect(data);
			adjustSizeDropdown();//4.觸發從屬下拉列表的調整
		}
		)
	}
}
function adjustSizeDropdown(){
	var styleValue = $('#styleDropdown').val();
	var colorVlaue = $('#colorDepth').val();
	var dropdownSet = $('#sizeDropdown');
	if((styleValue.length == 0) || (colorVlaue.length == 0)){
		dropdownSet.attr("disabled",true);
		dropdownSet.emptySelect();
	}else{
		dropdownSet.attr("disabled",false);
		$.getJSON(
		'getSizes.jsp',{style:styleValue,color:colorVlaue},
		function(data){dropdownSet.loadSelect(data)}
		);
	}
}
//整合一切
$(function($){
	$.fn.termifier = function(options){//定義命令的API
		options = $.extends({//把傳入的選擇與默認值進行合併
			lookupResource : 'getTerm',
			flyoutClass : 'lookerUpperFlyout'
		},options ||{});
		this.attr('title','Click me for my definie');
		return this.click(function(event){//在術語上建立click處理程序
		$.ajax({
			url : options.lookupResource,
			type : 'GET',
			data : {term :this.innerHTML},
			dataType : 'html',
			success: function(data){//操作響應數據
				$('<div></div>').css({
					postition : 'absolute',
					left:event.pagex,
					top: event.pagY,
					cursor: 'pointer',
					display:'none'
				}).html(data)
				.addClass(options.flyoutClass)
				.click(function(){//在工具上提示上建立click處理程序
				$(this).fadeOut(1500,function(){$(this).remoce();});
					
				}).appendTo('body').fadeIn();//把工具提示附加到dom上並使其淡入
			}
		});
		return false;
			
		});
	}
})(jQuery);