나의 Ajax 단순 패키지 단순 호출

JavaEye 에 한 소인 이 JavaScript 로 Ajax 를 봉 인 했 던 것 을 기억 합 니 다. 그 가 글 을 보 내기 몇 달 전에 저도 이런 봉 투 를 썼 습 니 다.물론 내 가 쓴 것 은 그 가 쓴 기능 이 전면적 이 고 포장 이 완벽 하지 않다. 나 는 간단 한 방법 으로 포장 하고 대상 을 대상 으로 하 는 사상 을 사용 하지 않 았 다.제 코드 를 붙 여 주세요. 일반적인 Ajax 요청 에 도 충분 합 니 다.
 
저 는 post 와 get 이라는 두 가지 요청 방식 을 제 공 했 습 니 다. 방법 이름 은 기억 하기 쉬 운 'doGet' 과 'doPost' 를 사 용 했 습 니 다. 용법 상 Jquery 와 유사 한 get 방법 과 post 방법 은 자바 스 크 립 트 의 대상 프로 그래 밍 을 사용 하지 않 았 을 뿐 입 니 다.
 
먼저 다음 두 가지 간단 한 용법 을 살 펴 보 자.
 
//  Get  
var url1 = "user/deleteUser.action?id=12";
doGet(url1, null, function(data){
	//Todo something ...
	alert(data);
});

//  Post  
var url2 = "user/addUser.action";
var formData = "username=rongxinhua&sex=male";
doPost(url, formData, function(data){
	//Todo something ...
	alert(data);
});

 
 
나의 Ajax 방법 라 이브 러 리 는 get 요청 과 post 요청 을 지원 하 는 동시에 텍스트 형식, XML 형식 과 JSON 형식 등 세 개의 리 턴 데이터 형식 도 지원 합 니 다. 그 밖 에 비동기, 동기 화 두 가지 대화 방식 도 지원 합 니 다.좋아, 코드 를 보 자.
 
/**
 *    XMLHttpRequest  
 * 
 * @return
 */
function initXmlHttp() {
	//XMLHttpRequest  
	var xmlHttp = false;
	if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) { // IE6     IE  
		var activeXNames = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
		for ( var i = 0; i < activeXNames.length; i++) {
			try {
				xmlHttp = new ActiveXObject(activeXNames[i]);
				break;
			} catch (e) {
			}
		}
	}
	if (!xmlHttp) {
		alert("    XMLHttpRequest,         Ajax。");
	}
	
	return xmlHttp;
}

// info/user.action
// info/user.action?id=123
// info/user.action?id=123&name=tom
// info/user.action?name=tom&name=marry

/**
 * @param url       
 * @param data       ,  :"key1=value1&key2=value2"
 * @param callback     (       )
 * @param responseContentType        ,  3   :"TEXT","XML","JSON",        , 
 *              ,     ,              
 * @param asyn     ,  2   :true(  ), false(  )
 * 			    ,      ,         
 */
function doGet(url, data, responseFunction, responseContentType,asyn) {
	if(asyn==undefined){
		if(responseContentType!=undefined){
			if(typeof responseContentType =='boolean'){
				asyn = responseContentType;
			}
		}
	}
	
	var url = url;
	if(data != null && data != '') {
		if (url.indexOf("?") == -1) {
			url = url + "?" + data;
		} else {
			url = url + "&" + data;
		}
	}
	var xmlHttp = initXmlHttp();
	xmlHttp.onreadystatechange = function() {
		callbackAjax(responseFunction, responseContentType, xmlHttp);
	};
	
	if(asyn==undefined){
		xmlHttp.open("GET", url, true);
	}else if(asyn==false){
		xmlHttp.open("GET", url, false);
	}else{
		xmlHttp.open("GET", url, true);
	}
	xmlHttp.send(null);
}

/**
 * 
 * @param url       
 * @param data       ,  :"key1=value1&key2=value2"
 * @param callback     (       )
 * @param responseContentType        ,  3   :"TEXT","XML","JSON",        , 
 *              ,     ,              
 * @param asyn     ,  2   :true(  ), false(  )
 * 			    ,      ,         
 */
function doPost(url, data, responseFunction, responseContentType,asyn) {
	if(asyn==undefined){
		if(responseContentType!=undefined){
			if(typeof responseContentType =='boolean'){
				asyn = responseContentType;
			}
		}
	}
	var  xmlHttp = initXmlHttp();
	xmlHttp.onreadystatechange = function(){
		callbackAjax(responseFunction, responseContentType,xmlHttp);
	};
	if(asyn==undefined){
		xmlHttp.open("POST", url, true);
	}else if(asyn==false){
		xmlHttp.open("POST", url, false);
	}else{
		xmlHttp.open("POST", url, true);
	}
	xmlHttp.setRequestHeader("Content-Type",
			"application/x-www-form-urlencoded");
	xmlHttp.send(data);
}

/**
 * Ajax    
 * @param responseFunction     (       )
 * @param responseContentType        ,  3   :"TEXT","XML","JSON",        
 * @param xmlHttp XMLHttpRequest  
 * @return
 */
function callbackAjax(responseFunction, responseContentType, xmlHttp) {
	//              
	if (xmlHttp.readyState == 4) {
		//   http       
		if (xmlHttp.status == 200) {
			if (responseContentType == "XML") {
				var responseXml = xmlHttp.responseXML;
				responseFunction(responseXml);
			} else {
				var responseText = xmlHttp.responseText;
				if (responseContentType == "JSON") {
					var responseJson = eval("(" + responseText + ")");
					responseFunction(responseJson);
				} else if(responseContentType == "TEXT") {
					responseFunction(responseText);
				} else {
					//  responseContentType     
					if(responseText.indexOf("<")==0) {
						var responseXml = xmlHttp.responseXML;
						responseFunction(responseXml);
					} else if(responseText.indexOf("{")==0 || responseText.indexOf("[")==0) {
						var responseJson = eval("(" + responseText + ")");
						responseFunction(responseJson);
					} else {
						responseFunction(responseText);
					}
				}
			}
		}
	}
}

 
 

좋은 웹페이지 즐겨찾기