Ajax

동기(Synchronous) 통신

: request가 있으면 해당 response가 전달될 때까지 다른 request를 요청할 수 없는 통신 방법

동기 통신 : 네이버 홈 → 블로그 홈 으로 움직일 때 다른 동작은 할 수 없는 것

비동기 통신 : 시간이 조금 지나면 자동으로 변경하는 거

동기 vs 비동기 통신 차이

: 사용자 입장에서는 화면갱신이 없고 요청과 응답 사이 시간에도 다른 일을 할 수 있어 편리하고 빠른듯한 환경을 느낄 수 있다.

 

데이터 형식

: 데이터를 주고 받을 때는 특정한 형식으로 맞춰주어야 한다.

: 쉼표를 기준으로 항목을 구분하여 저장한 데이터

• 장점 : 용량이 작다. (많은 양의 데이터 전송 시 활용)
• 단점 : 가독성이 떨어진다 → 컬럼이 있는 테이블이 있는 경우 사용
• 활용 : 간단한 테이블 작성, 읽는 속도가 중요한 부분

 

: 다목적 마크업 언어로 태그 등을 이용하여 데이터 구조를 작성하는 기술

• 장점 : 직관적이다(뛰어난 가독성)
• 단점 : 용량이 크고 데이터의 양이 많아지면 추출 속도가 떨어짐
• 활용 : 직접 데이터 수정이 잦은 부분, 단순 게임 옵션

 

: ‘키-값’ 쌍으로 이루어진 데이터 오브젝트를 전달하기 위한 개방형 표준 포맷

• 장점 : 용량이 적고 가독성이 좋다
• 단점 : 데이터 양이 많아지면 추출 속도가 떨어짐
• 활용 : 자바스크립트 객체, Ajax(비동기통신) 표준

 

// jQuery로 작성
<script>
	$.ajax({
    	type : "get", // 요청방식 (get/post)
        url : "ex01", // 요청 서버 경로
        data : {'id' : id}, // 전송 데이터
        contentType : 'application/json; charset=utf-8', // 전송 데이터 정보(형식/인코딩)
        dataType : 'json',
        success : function(){
        	alert(data) // 응답 성공 시 실행 함수
        },
      	error : function(){
        	alert('통신실패') // 응답 실패 시 실행 함수
        }
 })
 </script>