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