공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/AJAX

02. XMLHttpRequest 함수화 - sendRequest(url, param, callback, method, asyncBool)

serpiko 2014. 8. 28. 17:31 
<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> NewDocument </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head>
<body>


	<script>
		
		var xhr = null;
		//url경로, 전달할 파라메터, 완료시콜백함수, get/post, 동기화여부
		function sendRequest(url, param, callback, method, asyncBool)
		{
			if(window.ActiveXObject)
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			else
				xhr = new XMLHttpRequest();

			method = (method.toLowerCase() == "get") ? "GET" : "POST";
			
			param = ( param == null || param == '' ) ? null : param;

			if(method == "GET" && param != null) url = url + "?" + param;
			
			xhr.open(method, url, asyncBool);

			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			
			xhr.onreadystatechange = callback;

			xhr.send(  (method == "POST")? param : null   );
		}

		function res()
		{
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				/***************************************
				* ※데이터 주의사항.
				*
				* 1. 문자열일 경우 직접 사용 가능.
				*    var myData = xhr.responseText; //serpiko
				*
				* 2. 오브젝트일 경우 eval로 값으로 변환해야 하는데 이때 '()'로 감싸준다.
				*    데이터 형식 : {'label':'serpiko', 'value':'99999'}
				*    var myData = eval( '('+ xhr.resonseText + ')' ); //
				*    myData.label
				*    myData.value
				*
				* 3. 반복된 오브젝트({~~},{~~}... )일 경우 eval로 값으로 변환해야 하는데 이때 '[]'로 감싸준다.
				*    데이터 형식 : {'label':'serpiko', 'value':'99999'}, {'label':'serpiko', 'value':'8888'}
				*    var myData = eval( '['+ xhr.resonseText + ']' );
				*    myData[0].label
				*    myData[1].value
				***************************************/
				var obj = eval( xhr.responseText );
			}else{
				console.log( url + '의 ' + param + '로드를 실패했습니다.' );
			}
		}

		var param = 'Act=test&dateParse=20070421';
		sendRequest('syslog_data.php', param, res, 'get', false);
	</script>


</body>
</html>
저작자표시 비영리 동일조건 (새창열림)

'■ 프론트엔드 ■ > AJAX' 카테고리의 다른 글

03. 제이쿼리 ajax로 xml 파싱  (0) 2014.08.28
03. 제이쿼리 load → JSON데이터  (0) 2014.08.28
01. XMLHttpRequest 함수화 기본형  (0) 2014.08.28
XMLHttpRequest  (0) 2014.08.28
HTTP 상태 코드(status)  (0) 2014.08.28
댓글