[Ajax] Ajax란?

hwa.haha·2022년 9월 5일

Ajax

목록 보기

1/2

📌Ajax (Asynchronous JavaScript and XML)

-자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식.
-최근에는 XML 보다 JSON을 더 많이 사용한다.
-비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미

EX>웹사이트에서 키를 클릭 할 때마다 값이 변경한다,지도같은데서 드래그하고 떼면 변경된 값들.

📖Ajax 프로그래밍 순서

자바스크립트 이벤트
XHR객체 생성 ->서버와의 통신을 위하여
서버(URL) 에게 요청
서버의 결과 값 어떤 포멧 인지 확인(text,json,xml)
콜백함수 = > 일정한 HTML화

✍입력1-1

//httpRequest.js
function getXMLHttpRequest() {
	if (window.ActiveXObject) {//구형브라우저일때 객체생성방법.
		try {
			return new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				return new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e1) { return null; }
		}
	} else if (window.XMLHttpRequest) {
		return new XMLHttpRequest(); //표준객체
	} else {
		return null;
	}
}
var httpRequest = null; //XHR객체

function sendRequest(url, params, callback, method) {
  /*send로 자체적으로 함수화시켜서 ajax가능하게 만듬. 
  콜백은 서버로부터 반응을 봐야해서 필요, 
  메소드방식이랑 데아터 값 전달할때 */
	httpRequest = getXMLHttpRequest(); //xhr객체를 만들어줌 
	var httpMethod = method ? method : 'GET';
	if (httpMethod != 'GET' && httpMethod != 'POST') {
      //get은 파라미터 post는 바디에 넣구감.
		httpMethod = 'GET'; //get을 사용하겟다.
	}
	var httpParams = (params == null || params == '') ? null : params;
	var httpUrl = url;
	if (httpMethod == 'GET' && httpParams != null) {
		httpUrl = httpUrl + "?" + httpParams;
	}
	httpRequest.open(httpMethod, httpUrl, true);
  //true를 입력해야 비동기식이라고 셋팅
	httpRequest.setRequestHeader(
		'Content-Type', 'application/x-www-form-urlencoded');
  //기본 헤더값임. ,뒤에 내용은 원래 다른거 넣어야해
	httpRequest.onreadystatechange = callback;
  //콜백함수 등록.콜백함수에 뭐를 넣는냐에 다라 달라짐.
	httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}

✍입력1-2

//member_json.jsp
<%@ page language="java" contentType="text/plain; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

    {
    	"code": "success",
    	"data": {
    		"member": {
    			"name": "박찬호",
    			"id": "jQuery",
    			"sno": "1111-2222"    			
    		}	
    	}    
    }

✍입력1-3

//road_json.html
 <script type="text/javascript" src ="httpRequest.js"></script>
 <script type="text/javascript">
 
  window.onload = function(){
	  sendRequest("member_json.jsp","",viewInfo,"GET");
   //데이터값없이 요청하면 get방식
  }
 
  function viewInfo(){
	  if(httpRequest.readyState == 4){
		   if(httpRequest.status == 200){
			 var result = eval("("+httpRequest.responseText+")"); 
           //문자열 => 객체(변환) eval =>문자열을 객체로 변환할때 사용!
			 if(result.code == 'success'){
				var m = result.data.member;
				var html ='<span>이름:' + m.name+",ID:" +m.id+'</span>';
				
				var list = document.getElementById("list");
				list.innerHTML = html;
			  }
			 }
		   }
  }
  
  
 </script>
</head>
<body>
  <div id ="list"></div>
</body>
</html>

💻출력

예제2-1

Ajax는 제이쿼리 배우기전에 이해를 돕기위해 필요한 흐름에 대해서 배워보았다.

hwa.haha

개발자로 차근차근

다음 포스트