개조 요청 파라미터 - Ajax 의 2

전편 을 잇다.개인 함 수 를 도입 하 였 습 니 다serialize, js 대상 을 HTTP 에 필요 한 매개 변수 모드 로 직렬 화하 여 다음 과 같은 두 가지 구 조 를 받 아들 입 니 다.
 

{name:'jack',age:20} --> name=jack&age=20

{fruit:['apple','banana','orange']} --> fruit=apple&fruit=banana&fruit=orange

 
배경 에 있 는 servlet 을 요청 합 니 다. 인자 name = jack, age = 20 을 보 내 고 기본적으로 비동기, GET 방식 을 사용 합 니 다.이제 data 는 다음 과 같 습 니 다.

Ajax.request('servlet/ServletJSON',{
		data : {name:'jack',age:20},
		success : function(xhr){
			//to do with xhr
		},
		failure : function(xhr){
			//to do with xhr
		}
	}
);

 
전체 코드

/**
 *     ajax  ,  XMLHttpRequest
 * Ajax.request(url,{
 * 		async 	     true(  )
 * 		method 	     POST or GET(  )
 * 		encode 	      UTF-8(  )
 * 		data 	     (       js  )
 * 		success              xhr
 * 		failure              xhr
 * });
 *
 */
var Ajax = 
function(){
	function request(url,opt){
		function fn(){}
		var async   = opt.async !== false,
			method  = opt.method 	|| 'GET',
			encode  = opt.encode 	|| 'UTF-8',
			data    = opt.data 		|| null,
			success = opt.success 	|| fn,
			failure = opt.failure 	|| fn;
			method  = method.toUpperCase();	
		if(data && typeof data == 'object'){//           
			data = _serialize(data);
		}
		if(method == 'GET' && data){
            url += (url.indexOf('?') == -1 ? '?' : '&') + data;
			data = null;
        }
		var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
		xhr.onreadystatechange = function(){
			_onStateChange(xhr,success,failure);
		};
		xhr.open(method,url,async);
		if(method == 'POST'){
			xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=' + encode);
		}
		xhr.send(data);
		return xhr;	
	}		
	function _serialize(obj){
		var a = [];
		for(var k in obj){
			var val = obj[k];
			if(val.constructor == Array){
				for(var i=0,len=val.length;i<len;i++){
					a.push(k + '=' + encodeURIComponent(val[i]));
				}				
			}else{
				a.push(k + '=' + encodeURIComponent(val));
			}				
		}
		return a.join('&');
	}	
	function _onStateChange(xhr,success,failure){
		if(xhr.readyState == 4){
			var s = xhr.status;
			if(s>= 200 && s < 300){
				success(xhr);
			}else{
				failure(xhr);
			}
		}else{}
	}
	return {request:request};	
}();

 
데 이 터 를 대상 유형 으로 만 들 뿐 별 쓸모 가 없 는 것 같다.하지만 폼 (form) 과 결합 하면 유용 하 다.form 을 사용 하지만 ajax 방식 으로 제출 하려 면 form 의 요 소 를 HTTP 요청 의 매개 변수 형식 으로 정렬 하 는 것 은 힘 든 일이 다.여기에 도구 함수 formToHash 를 써 서 form 요소 버튼 값 형식 을 대상 으로 되 돌려 줍 니 다.
 

/**
 *         hash  
 * @param {HTMLElement} form  
 * @return {hash}
 * @example
 *         formToHash(document.forms[0]);
 */
function formToHash(form){
	var hash = {}, el;
	for(var i = 0,len = form.elements.length;i < len;i++){
		el = form.elements[i];
		if(el.name == "" || el.disabled) continue;
		switch(el.tagName.toLowerCase()){
		case "fieldset":
			break;
		case "input":
			switch(el.type.toLowerCase()){
			case "radio":
				if(el.checked)
					hash[el.name] = el.value;
				break;
			case "checkbox":
				if(el.checked){
					if(!hash[el.name]){
						hash[el.name] = [el.value];
					}else{
						hash[el.name].push(el.value);
					}
				}
				break;
			case "button":
				break;
			case "image":
				break;
			default:
				hash[el.name] = el.value;
				break;
			}
			break;
		case "select":
			if(el.multiple){
				for(var j = 0, lens = el.options.length;j < lens; j++){
					if(el.options[j].selected){
						if(!hash[el.name]){
							hash[el.name] = [el.options[j].value];
						}else{
							hash[el.name].push(el.options[j].value);
						}
					}
				}
			}else{
				hash[el.name] = el.value;
			}
			break;
		default:
			hash[el.name] = el.value;
			break;
		}
	}
	form = el = null;
	return hash;
}

 
자, formToHash 가 있 으 면 되 돌아 오 는 대상 을 Ajax 의 매개 변수 data 로 할 수 있 습 니 다. Ajax 내부 의serialize 는 이 대상 을 HTTP 요청 매개 변수 형식 으로 자동 으로 변환 할 수 있 습 니 다.