Ajax 을 사용하여 Form 데이터를 POST 전송하고자 할 때

Ajax 을 사용하여 Form 데이터를 POST 전송하고자 할 때

 

개발환경 : JDK 1.5, eclipse-galieo, window XP

 

1. XMLHttpRequest.open 함수에 첫번째 파라미터로 POST 입력

2. XMLHttpRequest.send 함수에 key=value&key=value .. 로 값넣기

3. setRequestHeader 값 설정하기

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

request.setRequestHeader("Cache-Control","no-cache, must-revalidate");

request.setRequestHeader("Pragma","no-cache");

 

GET 방식과의 차이점인 위의 3가지를 셋팅해서 보내면 된다. 그런데 폼에 포함된 객체가

많을때에는 일일이 다 key=value 로 바꾸기가 만만치 않다. 그래서 javascript 로

자동 문자열을 구성할수 있도록 compFormPost 라는 함수를 만들었다. 인자로 form 명을

넣게 되면 폼에 포함된 객체들의 값을 key=value&key=value 로 조합해서 넘겨주게 된다.

이것을 send  함수에 그대로 넣으면 된다.

function compFormPost(frmObj) {
	var str = '';
	var elm;
	var endName = '';
	for (i = 0, k = frmObj.length; i < k; i++) {
		elm = frmObj[i];
		switch (elm.type) {
		case 'text':
		case 'hidden':
		case 'password':
		case 'textarea':
		case 'select-one':
			str += elm.name + '=' + escape(elm.value) + '&';
			break;
		case 'select-multiple':
			sElm = elm.options;
			str += elm.name + '='
			for (x = 0, z = sElm.length; x < z; x++) {
				if (sElm[x].selected) {
					str += escape(sElm[x].value) + ',';
				}
			}
			str = str.substr(0, str.length - 1) + '&';
			break;
		case 'radio':
			if (elm.checked) {
				str += elm.name + '=' + escape(elm.value) + '&';
			}
			break;
		case 'checkbox':
			if (elm.checked) {
				if (elm.name == endName) {
					if (str.lastIndexOf('&') == str.length - 1) {
						str = str.substr(0, str.length - 1);
					}
					str += ',' + escape(elm.value);
				} else {
					str += elm.name + '=' + escape(elm.value);
				}
				str += '&';
				endName = elm.name;
			}
			break;
		}
	}
	return str.substr(0, str.length - 1);
}

function findUser() {
	var request = createHttpRequest();
	var url = "user_check.do";
	// 폼에 포함된 객체들의 값을 key=value 형태로 만들어서 리턴한다.
	var param = compFormPost( [ form이름 ]);
	var result;
	request.open("POST", url, true); //POST 방식설정

	/* POST방식으로 넘길 경우 아래 헤더를 반드시 설정해야 한다.*/
	request.setRequestHeader("Content-Type",
			"application/x-www-form-urlencoded;charset=UTF-8");
	request.setRequestHeader("Cache-Control", "no-cache, must-revalidate");
	request.setRequestHeader("Pragma", "no-cache");

	request.onreadystatechange = function() {

		msg.innerText = "로그인 처리 중...";
		if (request.readyState == 4) {
			if (request.status == 200) {
				var xdoc = request.responseXML;
				var value = xdoc.getElementsByTagName("value");
				try {
					result = value[0].firstChild.nodeValue;
				} catch (e) {
					value = request.responseText;
					login_msg_frame.document.write(value);
					msg.innerText = "";
					return;
				}
				if (result == "true") {
					// 성공시 적절한 처리 
				} else {
					// 실패시 적절한 처리 
				}
			} else
				alert("status is " + request.status);
		}
	};
	request.send(param); //파라미터 전송
}