Ajax에 대한 글을 찾아보는데 XMLHttpRequest 객체를 이용해서 페이지를 호출하는 예제들은 거의다
GET 메소드를 사용하는 경우만 있어서 POST 형식을 사용하는 내용을 찾아보았다.

다행히 녹두장군이라는 분의 블로그(http://mainia.tistory.com/530)에 좋은 포스트와 소스를 발견하게 되었다.

녹두장군님께 감사드리며 내 블로그에 백업 겸 소스를 올려둔다. :-)
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); //파라미터 전송
}

'[Web Prgoramming] > AJAX' 카테고리의 다른 글

Ajax 에서 데이터 POST로 전송하기  (0) 2012.02.12
IBM developerWorks. Ajax 마스터하기  (0) 2012.02.12

티스토리 툴바