한빛출판네트워크

제공 : 한빛 네트워크
저자 : Jack Herrington
역자 : 김탁용
원문 : Building Mashup-Friendly Sites in Rails

Ajax와 XML을 사용해 서버에 접근하기

서버에 접근하는 첫번째 방법은 XML 뷰를 호출하는 Ajax를 사용하는 것이다. 들어가기 앞서, curl을 사용해 커맨드 라인으로 XML 데이터를 요청해보겠다. 이는 [리스트 4]에 나와있다.

[리스트 4] XML 결과

% curl  "http://0.0.0.0:3000/photos/xml"

  
    
      Megan after winning 2nd  place in the pumpkin race.
      1
      37.591753
      -122.048358
      
      http://0.0.0.0:3000/megan1.jpg
     
 ...

‘to_xml’의 결과물은 포맷이 매우 잘 지켜져 있다. ‘photos’ 태그는 ‘photo’ 태그의 집합이고, 각각의 서브 태그는 다른 속성을 나타낸다. 완벽하다.

이것을 사용해 구글 맵과 매쉬업을 시켜보자. 구글 맵 API 페이지에서 가서 API를 요청한다. 그리고 [리스트 5]처럼 뷰 코드를 작성한다.

[리스트 5] Ajax/XML 맵 구현

 
 
 <%= javascript_include_tag "prototype"  %>
 
 
   
   
   

   
   

상단의 첫 두 줄은 매우 중요하다. "javascript_include_tag"는 페이지에 Prototype 라이브러리를 포함시킨다. 서버로부터 XML을 가져오기 위해 Prototype 라이브러리의 Ajax.Request를 사용할 것이다. 다음 script 태그는 map 객체들을 가져오는 구글 맵스 script 태그이다.

그 뒤에 정의된 두 함수는 "buildMarker"와 "load"다. "load" 함수는 맵을 만들고 Ajax request를 시작한다. "buildMarker" 함수는 Ajax request 핸들러를 사용해 이미지들을 나타낼 표시를 지도에 추가한다. 이 표시들을 클릭했을 때 이미지와 함께 정보 창이 팝업될 것이다. 완성된 페이지는 [그림 4]와 같다.


[그림 4] 맵 매쉬업

여기서 클릭해서 나온 사진은 우리 딸 아이의 첫 번째 달리기 시합 때 사진이다. (2등을 했었다! 타고난 달리기 선수다. )

이제 잠시 코드로 다시 돌아가 Ajax.Request가 있는 함수 코드를 보면 XML에서 각각의 표시들마다 다양한 필드값을 얻어오려고 하는 부분을 볼 수 있을 것이다. 그 결과를 정렬하려 한다면 고통스러울 것이다. 그럴 땐 JSON 데이터로 가져와 빠르게 배열로 변환할 수 있도록 하는 게 훨씬 쉬울 것이다.

맵 매쉬업의 JSON 버전

고맙게도, 우리 컨트롤러에는 JSON으로 리턴하는 메소드가 있다. 다시 한번 curl을 사용해 커맨드라인에서 테스트를 해보자. 그 결과가 [리스트 6]에 있다.

[리스트 6] JSON 결과

% curl  "http://0.0.0.0:3000/photos/json"
 [{attributes: {latitude:  "37.591753", title: "Megan At The Races", 
url:  "http://0.0.0.0:3000/megan1.jpg", id: "1", description:  "Megan after winning 2nd 
place in the pumpkin race.", longitude:  "-122.048358"}}, ...

매우 훌륭하다. 이제 앞의 예제에서 load 함수를 XML 대신 JSON을 사용하도록 고쳐보자. 그 고친 결과가 [리스트 7]에 있다.

[리스트 7] JSON loader

function load() {
 if (GBrowserIsCompatible()) {
 var map = new  GMap2(document.getElementById("map"));

    new Ajax.Request( "/photos/json", {
   method: "get",
   onSuccess: function(  transport ) {
   var photos = eval(  transport.responseText );

for( var b = 0; b <  photos.length; b++ ) {

 if ( b == 0 )
   map.setCenter(new  GLatLng(photos[b].attributes.latitude,
   photos[b].attributes.longitude), 13);

 map.addOverlay( buildMarker(  photos[b].attributes.title, 
   photos[b].attributes.url, photos[b].attributes.description,
   photos[b].attributes.latitude, photos[b].attributes.longitude )  );
   } } } );
   }
   }

좋다, 이게 훨씬 더 쉽다. 모든 XML 처리 부분 대신 단지 responseText를 "eval"하기만 하면 표시를 만들 때 쓸 사진 배열을 얻어올 수 있다.

또 다른 방법은 직접 함수를 호출하는 자바스크립트를 리턴 받는 것이다. 이렇게 하려면 컨트롤러의 ‘jscallback’ 메소드를 사용하면 된다. [리스트 8]에서 그 결과를 볼 수 있다.

[리스트 8] JavaScript 콜백 결과

% curl  "http://0.0.0.0:3000/photos/jscallback"
 photos_callback([{attributes:  {latitude: "37.591753", title: "Megan At The Races", ...

이제 사진 핸들링 코드 대부분이 ‘photos_callback’이라는 새로운 함수 쪽으로 옮겨가기 때문에 우리의 ‘load’ 함수는 정말 작아질 것이다.

[리스트 9] Photos 콜백

var map = null;

function  photos_callback( photos ) {
   for( var b = 0; b < photos.length; b++ ) {

   if ( b == 0 )
   map.setCenter(new GLatLng(  photos[b].attributes.latitude,
   photos[b].attributes.longitude ), 13);

   map.addOverlay( buildMarker(  photos[b].attributes.title, 
   photos[b].attributes.url,  photos[b].attributes.description,
   photos[b].attributes.latitude,  photos[b].attributes.longitude ) );
   }
   }

function load() {
   if (GBrowserIsCompatible()) {
   map = new  GMap2(document.getElementById("map"));

    new Ajax.Request( "/photos/jscallback", {
   method: "get",
   onSuccess: function( transport ) {  eval( transport.responseText ); }
   } );
   }
   }

여기가 재미있는 부분이다. 우리가 Ajax.Request 메소드를 사용하길 원치 않았다면 어떻게 되었을까? 원하는 데이터가 다른 도메인에 있는 서버에 있어서 Ajax.Request를 사용할 수 없었다면 어떻게 됐을까? 자, 여기에 그 해결책이 있다.

---

역자 김탁용님은 연세대학교 컴퓨터과학과를 졸업하고 현재 대한항공 정보시스템실에서 근무하고 있습니다. 무엇인가 새로운 것을 만드는 일, 그로 인해 다른 사람들에게 도움이 되는 일에 관심이 많아 소프트웨어 개발을 계속 하고 있습니다.