동기식&비동기식 그리고 ajax

 

 

▶ 동기식( Synchronous) 통신 

•  '동시에 발생(존재)하는'이라는 사전적 의미를 갖는다.
• 요청과 응답의 순서를 보장한다.
• 보낸 요청에 대한 결과 값을 보장 받을 수 있다.
• 서버와 웹브라우저가 통신하는 동안은 다른작업을 할 수 없다.
• 즉, Request(요청)을 보내면  Response(응답)가 올 때까지 다음 작업을 할 수 없는 Block상태가 된다.
• 응답이 늦어지면 다음 요청들은 계속 지연이 되어 성능적인 이슈가 발생할 수 있다.
• 빠른 처리보다는 보장된 결과 값을 필요로 하는 서비스나 작업에 적합하다. (은행 서비스, 결제 서비스)

 

▶ 비동기식(Asynchronous) 통신

•  '동시에 발생(존재)하지 않는'이라는 사전적 의미를 갖는다.
• 서버와 웹브라우저가 통신하는 동안 다른 작업을 할 수 있다.
• Request를 보내고 Response를 기다리지 않고 다른 일을 할 수 있는 Non Block 상태를 갖는다.
• Non Block 상태로 계속 일을 해서 Sync(동기식)에 비해 성능이 좋다
• 요청과 응답의 순서를 보장하지 않는다. 나중에 보낸 요청의 응답 값이 먼저 올 수도 있다.
• 처리결과보다는 빠른 처리가 필요한 서비스나 작업에 적합하다.

 

▶ ajax란?

• Asynchronous JavaScript and XML의 약자
• 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식.
• XML, TEXT, JSON 형태 타입을 사용한다.

 

▶ jQuery를 이용한 ajax 통신의 가장 기본적인 API 방식과 주요 속성

$.ajax
type	전송방식                                               ex) get, post
url	데이터를 전송할 URL
data	전송할 데이터                                        ex) key / value 형식의 객체
dataType	서버가 반환하는 데이터 타입                     ex) xml, json, script, html
success	ajax통신에 성공했을 때 호출되는 이벤트 핸들러
error	ajax통신에 실패했을 때 호출되는 이벤트 핸들러

• ajax는 비동기 방식이기 때문에  페이지이동없이 회원가입 페이지에 있는중에도 id 값을 입력(요청)할 때마다 중복유무를 확인할 수 있다.   
• ajax통신은 결과값을 페이지(HTML)로 전달하지 않고 Text또는xml, json 형태로 브라우저에 전달한다.
• 그래서 실시간으로 서버와 통신하여 값을 전달받을 수 있다.
• 필요한 데이터만 전송하므로 서버의 부담을 덜어준다.
• ajax통신을 사용하지 않는다면 중복확인을 위해서 페이지전체(HTML)을 불러오게되어 새로운 페이지로 이동한게 되기 때문에 작성하던 정보가 모두 새로고침되어 다시 작성해야한다.