完整的ajax程序包

摘自<<精通javascript>>
XML:所有的浏览器都支持原生XML的文档处理,自动将它们转换为可用的DOM文档。
HTML:和XML文档的区别在于,它通常以纯文本字符串的形式存在,存放一个HTML片段
Javscript/Json:这包括两种格式--原始的可执行的javascript代码和Json(javascript object Notation,Javascript对象表示)格式。

获取HTTP响应数据的重点是XMLHTTPRequest对象的两个属性
responseXML:如果服务器返回的是XML文档,这个属性包含到预处理后DOM文档的引用,它是XML文档的表达。只在服务器明确指定其内容首部(content header)是"content-

type:text/xml"或类似XML的数据类型时才有效。

responseText:这一属性包含到服务器返回的原始文本数据的引用。HTML和Javascript类型的数据都依赖这一方法来获得。


/**
	*处理错误:
	*1、成功响应代码:通过读取代码,客户端能够知道服务器的情形。状太码在200-300之间属于成功的请求
	*2、未修改响应:'Not Modified(未修改)'的标记,也就是状态码304。说明返回的数据与浏览器的
	*               缓存内容一致,并未修改过。其实不算错误,因为客户端仍能读出正确的数据
	*3、本地存储的文件:在本机上直接执行Ajax应用程序,不通过web服务器,就算请求成功了,也不
	*               会得到任何返回的状态码。执行本地文件且得不到状态码时,算成功响应
	*4、Safari与未修改状态:文档处上次请求未曾修改过,Safari返回的状太码会是'undefined'
	*/
if(typeof XMLHttpRequest == 'undefined')
 XMLHttpRequest = function(){
  return new ActiveObject(navigator.userAgent.indexOf("MSIE 5")>=0?"Microsoft.XMLHTTP":"Msxml2.XMLHTTP");
 };
function ajax(options){
	//执行Ajax 请求的通用函数
	//如果用户没有提供某个选项的值,就用默认值替代
	options={
		//HTTP请求类型
		type:options.type||"POST",
		//请求的URL
		url:options.url || "",
		//请求超时的时间
		timeout:options.timeout ||5000,
		//请求失败、成功或完成(不管成功还是失败都会调用的)时执行的函数
		onComplete:options.onComplete || function(){},
		onFail:options.onFail || function(){},
		onSuccess:options.onSuccess || function(){},
		//服务器将会返回的数据类型,这一默认值用于判断服务器返回的数据并作相应动作
		data:options.data || ""
	};
	//创建请求对象
	//var xml = new XMLHttpRequest();
	var xml=createXMLHttpRequest();
	
	//初始化异步请求
	xml.open(options.type,options.url,true);
	
	//在请求后等待5秒,超时同放弃
	var timeoutLength=options.timeout;
	
	//记录请求是否成功完成
	var requestDone = false;
	
	//初始化一个5秒执行的回调函数,用于取消请求(如果尚未完成的话)
	setTimeout(function(){
		requestDone=true;
	},timeoutLength);
	
	//监听文档状态的更新
	xml.onreadystatuschange = function(){
		//保持等待,直到数据完全加载,并保证请求并未超时
		if(xml.readyState == 4 && !requestDone){
			//检查是否请求成功
			if(httpSuccess(xml)){
				//以服务器返回的数据作为参数调用成功回函数
				options.onSuccess(httpData(xml,options.type));
				
				//否则就请求失败,执行失败回调函数
			}else{
				options.onFail();
			};
			
			//调用完成回调函数
			options.onComplete();
			//为避免内存泄,清理文档
			xml=null;
			
		};
	};
	
	//建立与服务器的连接
	xml.send();
	
	//判断HTTP响应是否成功
	function httpSuccess(r){
		try{
			//如果得不到服务器状态,且我们正在请求本文件,认为成功
			return !r.status&&location.protocol=='file:'||
			//所有200到300间的状态码表示成功
			(r.status>=200&& r.status<300)||
			//文档未修改也算成功
			r.status==304||
			//Safari 在文档修改时返回空状态
			navigator.userAgent.indexOf('Safari')>=0&&typeof r.status =='undefined';
			
		}catch(e){
			//若检查状态失败,就假定请求是失败的
			return false;
		}
	};
	
	//从HTTP响应中解析正确数据
	//有两个参数:一个XMLHttpRequest对象和一个可选参数----期望从服务器得到的数据类型
	//正确的值包括:xml,script,text或html --默认是'',根据content-type的首部得到
	function httpData(r,type){
		//获取 content-type的首部
		var ct = r.getResponseHeader("content-type");
		
		//若没有提供默认的类型,判断服务器返回的否是XML形式
		var data= !type && ct && ct.indexOf("xml")>=0;
		
		//若是,获得XML文档对象,否则返回文本内容
		data = type=="xml" || data?r.resonpseXML:r.responseText;
		
		//若指定类型是"script",则以javascript形式执行返回文本
		if(type=="script"){
			eval.call(window,data);
		};
		
		//返回响应数据(或为XML文档或为文本字符串)
		return data;
	};
}

你可能感兴趣的:(JavaScript,Ajax)