Ajax ($http) 처리

AngularJS 에서는 $http 라는 서비스를 통해 Ajax 요청을 수행한다.

Ajax는 비동기적 자바스크립트 및 XML의 약자인데 여기서 중요한 것이 바로 비동기적이다.

일반적으로 서버사이드에 요청을 하여 데이터를 수신하는 동작은 처리하는데 많은 시간이 필요하다.

이전의 동기적 방식에서는 서버사이드에서 데이터가 올때까지 모든 동작을 멈추고 기다리는데,

웹서비스에서 이런 상황은 사용자에게 굉장한 불편을 준다.

이를 위해 서버사이드에 데이터를 요청하여 받는것이나, 가공된 데이터를 메일 혹은 SMS로 보내는 등

처리하는데 많은 시간이 필요하지만 UI에서 변화가 필요없는 동작의 경우 비동기로 처리를 한다.

많은 시간이 필요한 처리는 요청만 해놓고 해당 결과가 올때까지 다른 일을 처리하다가,

결과가 오면 다음 행위를 수행하는 것을 비동기 처리라고 한다.

즉, Ajax는 백그라운드에서 수행되는 http 요청이라고 보면 된다.

아래 코드는 AngularJS에서 Ajax를 처리하는 예시이다.

위 그림처럼 controller 혹은 filter의 callback function에 $http 서비스를 추가하여 사용하면 된다.

$http 서비스는 아래 표에 따라 메소드를 제공한다.

메소드	설명
get(url, config)	지정한 URL로 GET 요청을 수행한다. (위 그림에서 $http.get 이 바로 이부분)
post(url, data, config)	지정한 data를 지정한 URL로 POST 요청을 수행한다.
delete(url, config)	지정한 URL로 DELETE 요청을 수행한다.
put(url, data, config)	지정한 data를 지정한 URL로 PUT 요청을 수행한다
head(url, config)	지정한 URL로 HEAD 요청을 수행한다.
jsonp(url,config)	GET 요청을 수행해 브라우저제약을 우회한다. 일반적으로 JSON 데이터는 같은 도메인내에서만 호출 가능하다. 이를 우회하여 동일 도메인외에서도 호출가능하도록 하는 방법이 JSONP 방식이다.

위 메소드들을 이용하여 Ajax를 요청하고 해당 요청에 대한 응답을 받아 처리 해야하는데

이때, AngularJS는 프로미스를 이용하여 응답을 처리한다.

프로미스란 콜백지옥(?)을 해결하기 위한 자바스크립트의 패턴으로

미래에 일어날 어떤 일에 대한 관심과 행위를 미리 등록하는 수단이다.

자세한 내용은 (http://programmingsummaries.tistory.com/325) 를 참고 바라며,

여기에서는 간단한 사용법만 소개하겠다.

메소드	설명
success(function)	HTTP 요청이 성공적으로 완료될 때 지정한 함수(function)을 호출한다.
error(function)	요청이 성공적으로 완료되지 않을 때 지정한 함수를 호출한다.
then(function, function)	성공함수나 실패함수를 등록한다.

success 메소드나 error 메소드는 아래 그림처럼 서버에서 받은 응답을 function의 인자로 넘겨주고, 이를 처리할 수 있다.