[WebBase] Ajax

Ajax

 

Ajax는  Asynchronous JavaScript and XML의 약어로 자바스크립트를 이용한 비동기처리방식으로 XML을 이용하여 서버와 통신하는 것을 뜻한다.

요즘에는 XML 보다는 JSON을 이용한 방식이 더 많이 사용되고 있다.

Ajax는 백그라운드 영역에서 서버와 통신하여, 웹 페이지의 전체를 다시 로딩하지 않고도, 웹 페이지의 일부만을 갱신할 수 있다.

 

 

동기식 & 비동기식

 

출처 : 윤성우 저, " 열혈강의  TCP/IP 소켓 프로그래밍", 오렌지미디어

 

동기식 처리 모델 (Synchronous processing model)

 

동기식 처리 모델은 직렬적으로 업무를 수행한다.

즉, 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다.

 

동기식 처리 모델

위의 이미지를 보면 Task1 이 서버에서 데이터를 가져와 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후의 작업들 (Task2, Task3)은 블로킹(작업중단)상태가 된다.

 

아래의 자바스크립트 코드가 동기식으로 동작하는 코드이다.

function task1(){
	taks2();
}

function taks2(){
	task3();
}

function task3(){
	console.log("complete");
}


task1();

 

비동기식 처리 모델 (Asynchronous processing model)

 

비동기식 처리 모델은 병렬적으로 업무를 수행한다.

즉, 업무가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 업무를 실행한다.

서버에서 데이터를 가져와 화면에 표시하는 업무를 수행할 때, 서버에서 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고 즉시 다음 업무를 수행한다. 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 업무를 계속하여 수행한다.

자바스크립트의 대부분의 DOM 이벤트와 Timer함수, Ajax요청은 비동기식 처리모델로 동작한다.

 

아래의 자바스크립트 코드는 비동기식으로 동작하는 코드이다.

결과는 콘솔창에 task1 > task3 > task2 순으로 보여지게 된다.

function task1(){
	console.log('task1');
	task2();
}

function task2(){
	setTimeout(function() {
    	console.log('task2');
    },2000); // console.log('task2')는 task2()가 호출되고 2초후에 실행되게 된다.
 
 	task3();
 }
 
 function task3(){
 	console.log('task3');
 }
 
 
 task1();

 

Ajax의 장점

1. 웹 페이지 전체를 다시 로딩하지 않고도 웹 패이지의 일부분만을 갱신할 수 있다.
2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.
4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

 

Ajax의 한계

1. 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식* 을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
2. 바이너리 데이털르 보내거나 받을 수 없다.
3. 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax요청을 보낼 수 없다.
4. 클라이언트의 PC로 Ajax요청을 보낼 수 없다.

클라이언트 풀링(client pooling) 방식이란

사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 의미한다.
이에 반해 서버 푸시(server push) 방식이란 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미한다.
요즘 많이들 사용하는 스마트 폰에서 각종 앱이 보내는 푸시 알림이 서버 푸시 방식의 대표적인 예이다.

 

 

 

출처 :

http://www.tcpschool.com/ajax/ajax_intro_basic