容易封装Ajax-AJAX教程-爱易网页

容易封装Ajax

日期：2014-05-16　浏览次数：20695 次

简单封装Ajax

/**
 * 异步通信Ajax
 * @param {object} config 
 * <code> 
var config={
	action:"test.json",//请求的URL;
	sync:true,//是否异步,默认异步true;
	method:"get",//请求类型,默认get;
	data:null,//post请求的数据;
	loaded: funLoadOk//回调方法 ; 	
};

调用代码:
<script type="text/javascript" src="Ajax.js?t=0"></script>
<script type="text/javascript">
var funLoadOk=function(httpRequest){
	alert(httpRequest.responseText);
}

var config={
	action:"test.json",
	sync:true,
	method:"get",
	data:null,
	loaded: funLoadOk   	
};

var ajax=new Ajax(config);
ajax.load();
</script>
 * </code>
 */ 
function Ajax(config){	
	this._config =config;	
    this.initXmlHttp=function(){
    		if(typeof XMLHttpRequest == "function")return new XMLHttpRequest();
    		
    		var MsxmlArr =['MSXML2.XMLHTTP.5.0',
    		 'MSXML2.XMLHTTP.4.0',
    		  'MSXML2.XMLHTTP.3.0',
    		   'MSXML2.XMLHTTP',
    		    'Microsoft.XMLHTTP'];    		    
		
			if (window.ActiveXObject){
				for(var i=0;i<MsxmlArr.length;i++){
					try{ 
						XMLHttpRequest =function(){
							return new ActiveXObject(MsxmlArr[i]);
						};
						
						return new XMLHttpRequest();						
	        		}catch(e){
	        			//创建失败跳过;
	        		}
				}		
			}	
			return null;
    	};  
    	/**
		 * 给请求的URL添加一个随机数
		 * @param {string} url 
		 */  
    	this.appendUrlRandom = function(url){
		    var rnd = "t=" + new Date().getTime();
		    if(url.indexOf("?")!=-1)url +="&" + rnd;
		    else url += "?" + rnd; 
		    return url;
	  	};  
    	/**
		 * 状态
		 * @param {object} req 
		 */  
    	this.stateOK = function(req){
		    var s = req.status || 0;
		    
		    return ((s>=200)&&(s<300))||
			    (s==304)||
			    (s==1223)||
			    (!s && (location.protocol=="file:" || location.protocol=="chrome:")); 
	  	};
    	/**
		 * 加载完毕执行内容
		 * @param {XMLHttpRequest} xmlHttpRequest 
		 */ 
    	this.loaded=function(xmlHttpRequest){
    		//加载完毕执行内容
    		//xmlHttpRequest.responseText;    		
    	};
    	/**
		 * 加载失败执行内容
		 */ 
    	this.loadFail=function(){
    		// 		
    	};
    	/**
		 * 给请求的URL添加一个随机数
		 * @param {string} url 
		 */ 
	    this.load = function(config){
	    	var c=config || this._config;
	    	var action = c.action || c,
	    		sync = c.sync || true,
	    		method = c.method || "get",
	    		loaded = c.loaded || this.loaded,
	    		data = c.data || null;
	    	try {
	    		var rpc=this.initXmlHttp();    	
	    		var stateIsOk=this.stateOK;
	    		action=this.appendUrlRandom(action);
	    		alert(action);
				if (rpc) {	
					rpc.open(method, action ,sync);
					if(sync)rpc.onreadystatechange = function(){//异步请求		
						if (rpc.readyState == 4) {
							if (stateIsOk(rpc)) {
								loaded(rpc);
							}
						}
					};
					
					if(method=="post"){					
					    rpc.setRequestHeader("content-length",data.length);    
					    rpc.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					}
					
					rpc.send(data);
					
					if(!sync){if(rpc.readyState == 4)//同步请求
						if(stateIsOk(rpc)) {
							loaded(rpc);
						}
					}
				}
			}catch (exception) {
				this.loadFail();
				return null;
			}
		};
    this.toString = function(){return "[object Ajax]";};
	
}

?测试的HTML页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax测试页</title>
</head>

<body>
		<script type="text/javascript" src="Ajax.js?t=0"></script>
		<script type="text/javascript">
		
		var funLoadOk=function(httpRequest){
			alert(httpRequest.responseText);
		}
		
		var config={
	   		action:"test.json",
	   		sync:true,
	   		method:"get",
	   		data:null,
	   		loaded: funLoadOk   	
   		};
		var ajax=new Ajax(config);

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

容易封装Ajax

相关资料更多>

推荐阅读更多>