[AJAX] 비동기 통신 방식

프로잭트 구현일정때문에 이제서야 메모해둔것을 글로 쓴다.

우선 재미 있었다.

전에는 데이터를 서버에 보낼때마다 굳이 load할 필요없는 것도 다시 load해야해서
보기에 별로 안좋았다...
(모바일 입장에서는 좋아요를 눌렀을뿐인데 ajax로 구현안하면 페이지 전체를 로드해야하므로 데이터를 또 쓰는 ...)

아무튼 ajax를 요약하자면

예전(?)코드인거같지만 내가 배운 내용은 이러하다

<script>
function checkSession(){
		
	//AJAX API 사용....
	var xmlhttp = new XMLHttpRequest();

          //서버에서 응답 후 처리 로직.
          xmlhttp.onreadystatechange = function(){
              if(xmlhttp.readyState==4 && xmlhttp.status==200){
              //alert("테스트");
              //alert(xmlhttp.responseText);
              var data = JSON.parse(xmlhttp.responseText);

              if(data.isLogin == true){
                     member = data.dw_member_no;
              }
    
	      }
	};

	//get 방식으로 파라미터 보내는법...
	xmlhttp.open("get" , "../member/getSessionInfo.do"); //마지막 false는 동기식 호출... 
	xmlhttp.send();
    
    	//post 방식으로 파라미터 보내는법...
	//xmlhttp.open("post" , "./directBid.do");
	//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//xmlhttp.send("auction_Bid_price="+bidCash+"&auction_no="+auctionNumber);
}
</script>

코드는 간단하다 하지만 아주 야무지다.
우선 ajax를 사용하려면 XMLHttpRequest() 객체를 생성해줘야한다.

보통 개발할때 필수적으로 사용하는 readyState 는
5단계로 나눌 수 있는데

1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.

2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.

3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.

4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.

5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

   가 되겠다

   보통 사이트들을 보면 ajax로 구현한곳은 데이터를 받을때 C 같은 아이콘이 빙글빙글 돌아가는것을 볼 수 있을것이다. 보통 이럴때 그 아이콘을 사용할 수 있다.

   데이터를 받아 처리할때 ( 아직 보여주기 전 ) 아이콘으로 사용자들에게 데이터가 로드되고 있음을 알려줄 수 있다.

   그 후 데이터를 받아 처리해야하는데
   ajax로 서버와 비동기 통신을 할 경우 HashMap형태로 데이터를 주고받는게 대부분이다.

   하지만 js는 hashMap이 없어서 JSON 형태로 받아야하는데
   xmlhttp.responseText (서버로 부터 받은데이터 )
   를 JSON.parse(xmlhttp.responseText);를 통해 JSON 형태로 저장 할 수 있는것이다
   (HashMap과 매우 유사해보임)
   JSON은 hashMap구조인 key와 value의 형태를 띄는데

   server쪽에서 memberVO 객체를 HashMap에 담은 형태인

   map.put("memberVO", memberVO); 로 보냈다면

   JSON은 { "memberVO" : { name : "name", age : 16} } 형태를 띈다.

   이것을 사용하려면 JSON형태로 저장된 변수가 data라고 한다면 data.memberVO.member_nick
   이렇게 값을 꺼낼수있다.