IBM®
메인 컨텐츠로 가기
    Korea [국가변경]    이용약관
 
 
   
        제품    서비스 & 솔루션    고객지원 & 다운로드    회원 서비스    
메인 컨텐츠로 가기

한국 developerWorks  >  XML | 웹 개발  >

Ajax에서 XML 처리하기, Part 3: JSON을 사용하고 프록시 피하기

Ajax 프로그램에서 XML을 구문 분석하고 변환하는 방법을 살펴보자

developerWorks
문서 옵션

JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다.

샘플 코드

영어원문

영어원문


제안 및 의견
피드백

난이도 : 중급

Mark Pruett, 시스템 아키텍트, Dominion

옮긴이: 박재호 이해영 dwkorea@kr.ibm.com

2008 년 7 월 15 일

ajax 프로그램이 서버와 통신할 때 반드시 XMLHttp 요청을 보낼 필요는 없습니다. 연재 기사 마지막 편인 이번 기사에서는 공개 웹 서비스, JSON(JavaScript Object Notation), 동적 script 태그를 사용해 날씨 뱃지를 구현해 봅니다.

앞서 연재 기사 두 편에서 재사용 가능한 날씨 뱃지를 구현하는 방식 세 가지를 살펴보았다. 세 방식 모두가 Ajax(Asynchronous JavaScript™ + XML) 프로그램에서 자바스크립트 XMLHttpRequest 객체를 사용하여 날씨 뱃지 라이브러리를 구현했다. 세 방식 모두 일종의 웹 프록시를 사용하여 미국립 기상청(NWS, National Weather Service)에서 XML 데이터를 우리 서버로 가져오는 방법으로 Ajax의 '같은 도메인' 문제를 해결했다.

자주 쓰는 약어
  • DOM: Document Object Model
  • HTML: Hypertext Markup Language
  • RSS: Rich Site Summary
  • XML: Extensible Markup Language
  • XSLT: Extensible Stylesheet Language Transformation

Part 1에서도 상세히 설명했지만, '같은 도메인' 문제는 Ajax 프로그램이 원래 페이지를 가져온 서버로만 XMLHttp 요청을 보내야 한다는 보안 제약이다. 그런데 현실적으로 Ajax 프로그램에서 가져오는 정보는 한 서버에 국한하지 않는다. 그래서 흔히 (아파치 ProxyPass 규칙을 설정하는 등) 웹 서버 구성을 변경하거나 특수한 서버 스크립트를 생성하는 방법으로 '같은 도메인' 문제를 해결한다.

그런데 밝혀지겠지만 또 다른 방법이 있다. 앞서 설명한 '같은 도메인' 문제를 우회하므로 프로그래머가 위와 같은 제약사항에 신경쓸 필요가 없는 방법이다.

접근 방식 4에서 사용하는 도구

연재 기사에 실린 다른 기사

네 번째 날씨 뱃지 라이브러리 구현 방식을 자세히 살펴보기 전에, 네 번째 접근 방식이 사용하는 도구부터 설명하겠다.

  • 야후 파이프(Yahoo! Pipes)
  • JSON
  • 동적 script 태그

야후 파이프

야후 파이프는 RSS 피드와 같은 다양한 웹 정보 유형을 수집하는 웹 기반 도구다. 야후 파이프는 그림 1과 같이 그래픽 편집기로 제작하는데, 편집기는 윈도우 인터넷 익스플로러(Windows® Internet Explorer®)나 파이어폭스 같은 표준 웹 브라우저에서 돌아간다.


그림 1. 야후 파이프 편집기
야후 파이프 편집기

사용자는 도구 템플릿에서 캔버스로 모듈을 끌어다 배열하는 방법으로 파이프를 만든다. 구체적으로는, 한 모듈의 출력에서 다른 모듈의 입력으로 파이프를 연결하여 각 모듈을 연결한다.

완성한 야후 파이프는 고유한 URL이 지정된다. 이 URL을 참조하면 야후 서버에서 파이프가 실행된다. 야후 서버는 다양한 정보 출처로부터 정보를 가져와 조작한 후 결과를 출력한다. 기본적인 출력 형식은 RSS지만, URL에다 JSON 등과 같은 출력 형식을 지정해도 된다. 이 기사에서는 JSON으로 결과를 출력하여 사용한다.

우리 날씨 뱃지에서는 NWS 서버가 정보 출처에 해당한다. 네 자리 NWS 스테이션 ID는 야후 파이프 URL에 매개변수로 넘긴다.

그림 1은 최신 날씨 뱃지를 구현하기 위해 만든 파이프다. 야후 파이프는 아주 강력한 자료 변환 기능을 제공하지만, 여기서는 한 가지 목적으로만 사용한다. 위 그림에서 야후 파이프는 NWS 정보를 XML에서 JSON으로 변환하는 것만 맡는다.

JSON

JSON은 이미 여러 차례 언급했다. 그렇다면 JSON은 무엇일까? 왜 날씨 뱃지에 사용하려고 고려할까?

JSON은 JavaScript Object Notation을 줄인 약어로, 자바스크립트 언어가 기본적으로 이해하는 자료 형식이다. XML과는 달리, JSON은 자바스크립트 코드라서 별도로 구문을 분석할 필요가 없다.

JSON과 XML을 비교하려면, 먼저 NWS에서 가져온 XML 정보를 살펴본다. Listing 1은 버지니아 주 리치몬드 시의 날씨 정보 일부다.


Listing 1. NWS 정보(XML 형식)
                
<?xml version="1.0" encoding="ISO-8859-1"?> 
<current_observation version="1.0"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation=
    "http://www.weather.gov/data/current_obs/current_observation.xsd">

    <location>Richmond International Airport, VA</location>
    <station_id>KRIC</station_id>
    <observation_time>
      Last Updated on Jan 26, 1:54 pm EST
    </observation_time>
    <weather>Mostly Cloudy</weather>
    <temperature_string>41 F (5 C)</temperature_string>
    <relative_humidity>32</relative_humidity>
    <wind_string>Calm</wind_string>
    <visibility_mi>10.00</visibility_mi>
    <icon_url_base>
      http://weather.gov/weather/images/fcicons/
    </icon_url_base>
    <icon_url_name>bkn.jpg</icon_url_name>

</current_observation>

Listing 2는 같은 정보를 JSON 형식으로 변환한 결과다.


Listing 2. NWS 정보(JSON 형식으로 변환)
                
{
  "count": 1,
  "value":
    {"title": "NOAA Regional Weather",
     "description": "Pipes Output",
     "link": "http:\/\/pipes.yahoo.com\/pipes\/pipe.info?_id=CI6HgSh43BGP8nmJouNLYQ",
     "callback": "",
     "items":
       [
         {
          "location": "Richmond International Airport, VA",
          "station_id": "KRIC",
          "observation_time": "Last Updated on Jan 26, 1:54 pm EST",
          "weather": "Mostly Cloudy",
          "temperature_string": "41 F (5 C)",
          "relative_humidity": "32",
          "wind_string": "Calm",
          "visibility_mi": "10.00",
          "icon_url_base": "http:\/\/weather.gov\/weather\/images\/fcicons\/",
          "icon_url_name": "bkn.jpg",
         }
       ]
    }
}

JSON은 단순히 자바스크립트 자료 구조다. 즉, 위 Listing에 있는 JSON을 자바스크립트 변수에 할당하면 자바스크립트 코드 내에서 바로 참조할 수 있다. Listing 3을 참조한다.


Listing 3. 자바스크립트 코드에서 JSON 자료 구조 참조하기
                
var weather = {
      "count": 1,
      "value":
      {
       "items":
        [
         {
          "location": "Richmond International Airport, VA",
          ...
         }
        ]
      }
    };

alert (weather.value.items[0].location);

여기 소개한 자바스크립트 코드 조각은 간략히 줄인 JSON 정보를 자바스크립트 변수 weather에 할당한다. 맨 마지막 줄 alert() 함수는 weather 변수에 있는 location 정보를 출력한다. 그러면 그림 2에서 보듯이, alert()가 실행되면 위치 정보 창이 뜬다.


그림 2. alert() 함수로 JSON에 포함된 위치 정보 표시
alert() 함수로 JSON에 포함된 위치 정보 표시

대다수 자바스크립트 프로그래머는 XML DOM 구조보다 JSON 데이터 구조를 참조하는 쪽이 더 쉽고 직관적이라 여긴다. Ajax 프로그램에서 JSON이 점점 인기를 더해가는 이유가 여기에 있다.

하지만 JSON은 Ajax 개발자들이 반겨할 또 다른 장점을 제공한다. 특수한 자바스크립트 기교 덕택에 프록시를 사용할 필요가 없다는 점이다.

동적 script 태그

앞서 살펴본 날씨 뱃지 라이브러리 세 가지는 모두 한 가지 공통점이 있다. 브라우저에서 돌아가는 자바스크립트 프로그램이 (XMLHttp 요청을 통해) 우리 서버로부터 정보를 가져온다는 사실이다. NWS 서버가 아니라 우리 서버에서 정보를 가져오는 이유는 XMLHttp 요청으로 인한 '같은 도메인' 제약 때문이다.

세 가지 접근 방식 중 두 가지는 ProxyPass 규칙으로 '같은 도메인' 문제를 해결한다. 나머지 하나는 특별한 서버측 스크립트를 두어 NWS 서버로부터 정보를 가져온다.

하지만 우리 서버 환경 설정을 내 맘대로 변경하지 못한다면? 혹은 우리 서버에다 서버측 스크립트를 돌리지 못한다면?

자바스크립트 프로그램에서 다른 도메인에 있는 정보를 가져오는 기교가 있다. 때로 script 태그 해킹(script tag hack)이라고도 불리는 기교다.

먼저 HTML script 태그를 생각해 보자. HTML script 태그는 웹 페이지에다 자바스크립트 코드 라이브러리를 포함할 때 사용한다. Listing 4를 참조한다.


Listing 4. HTML script 태그
                
<html>
  <head>
    <title>An Example</title>
    <script language="JavaScript" src="some_javascript_code.js"></script>
            

Listing 4는 일반적인 웹 페이지 처음에 나오는 몇 행이다. 마지막 행이 서버에서 자바스크립트 원시 파일인 some_javascript_code.js를 읽어들이라는 script 태그다. src 속성 태그는 스크립트가 위치한 URL을 가리킨다. 이 예제에서 스크립트는 웹 페이지와 같은 서버에 위치한다. 하지만 스크립트가 반드시 웹 페이지와 같은 서버에 있을 필요는 없다. 다른 서버에 있는 자바스크립트 코드를 지정해도 괜찮다.

즉, script 태그를 사용하면 (자바스크립트 코드인) JSON 정보를 브라우저로 읽어들일 수 있다는 뜻이다. 그런데 script 태그는 HTML 코드이므로 웹 페이지가 초기에 읽힐 때 script 코드에서 지정하는 자바스크립트 파일도 함께 읽히므로 그다지 유용하지 않아 보인다. Ajax 날씨 뱃지 프로그램에서는 웹 페이지를 읽은 후에 JSON 정보를 읽어야 한다.

자바스크립트 코드에서 웹 페이지의 DOM을 조작할 수 있다. 즉, 웹 페이지에 있는 자료를 추가하고 수정할 수 있다는 뜻이다. 그렇다면 페이지를 읽은 후 자바스크립트 코드에서 script 태그를 생성하여 DOM에 추가하면 어떨까? Listing 5는 동적으로 script 태그를 생성하여 페이지에 추가하는 코드다.


Listing 5. script 태그 동적으로 생성하기
                
var head = document.getElementsByTagName("head").item(0);
var script = document.createElement ("script");
script.src = "some_javascript_code.js";
head.appendChild (script);

위 코드를 실행하면 현재 페이지에 head 태그 자식으로 새로운 script 태그가 추가된다. Listing 4 코드처럼 some_javascript_code.js를 읽어들이지만, Listing 4 코드와는 달리 원래 페이지를 읽은 후에 자바스크립트 코드를 읽어들인다.

접근 방식 4: JSON과 동적 script 태그

동적 script 태그 기능이 날씨 뱃지 라이브러리에 무슨 소용인지 여전히 의문스러울지도 모르겠다. 다음 코드가 some_javascript_code_js 파일에 든 내용 전부라고 가정하자.

alert ("Hello!");

브라우저가 자바스크립트 파일을 읽는 즉시 자바스크립트 해석기는 코드를 실행한다. 즉, 웹 페이지를 읽는 즉시 alert() 창이 뜬다.

야후 파이프에서 생성하는 JSON 정보는 자바스크립트 코드이므로 위에서 설명한 '동적 script 태그' 방식으로 읽어들일 수 있다. 하지만 야후 파이프가 제공하는 JSON 정보는 실행 가능한 자바스크립트 코드가 아니라 단순한 자바스크립트 자료 구조일 뿐이다. 브라우저로 읽어들일 수는 있지만, 정보가 다 들어왔다는 사실을 어떻게 알까?

동적 script 태그를 생성하기 전에 타이머를 생성해서 예를 들어 3초와 같이 일정 시간 후에 JSON 정보가 모두 도착했다고 가정하는 방법도 있겠다. 신뢰도가 떨어지는 방법일 뿐 아니라 굳이 이렇게 할 필요도 없다.

각 야후 파이프는 고유한 URL을 제공한다. Listing 6은 우리 NWS 파이프의 URL이다.


Listing 6. NWS 야후 파이프 URL
                
http://pipes.yahoo.com/pipes/pipe.run?
&_id=CI6HgSh43BGP8nmJouNLYQ
&textinput1=KRIC
&_run=1
&_render=json
&_callback=myfunction
            

매개변수를 명확히 보여주려고 URL을 여러 행으로 나눴다. _id 매개변수는 우리 파이프에 할당된 ID다. textinput1은 NWS 스테이션 ID를 가리킨다. _run 매개변수는 파이프를 실행하겠다는 뜻이고, _render 매개변수는 출력 형식을 JSON으로 지정한다.

그렇다면 마지막 매개변수 _callback은 무엇일까? 최종 결과가 나오면 콜백 매개변수에 지정한 함수, 여기서는 myfunction()을 호출하라는 뜻이다. 야후 파이프는 JSON 정보를 다음과 같이 반환한다.

myfunction ( {"count":1, ... } );

편의상 JSON 정보를 크게 축약하여 {"count":1, ... }로만 표현했지만, 무슨 뜻인지 이해하리라 믿는다. 앞서 alert() 한 줄만 포함하는 자바스크립트 파일을 읽어들였을 때와 마찬가지로, 자바스크립트 해석기는 내가 요청한 모든 JSON 정보를 인수로 넘겨 myfunction() 함수를 실행한다.

즉, 콜백 함수를 사용하면 JSON 정보가 끝까지 도착하기를 기다릴 필요가 없다는 뜻이다.

그렇다면 콜백 함수는 무엇을 할까? 우리 날씨 뱃지 예제에서는 날씨 정보를 추출해 HTML 페이지에 삽입한다. 접근 방식 1에서 보았던 XMLHttpRequest response 함수와 비슷하다. 접근 방식 1에서는 responseXML DOM 객체에서 필요한 정보를 추출했지만, 여기서는 (아래 jsonHandler 함수처럼) JSON 자료 구조에서 필요한 정보를 추출한다. Listing 7은 날씨 뱃지를 만들기 위해 JSON 접근 방식 4에 필요한 원시 코드 전부다.


Listing 7. JSON/야후 파이프 접근 방식: weather_badge_ypipes_json.js
                
var yp = new Array();
var idx = 0;

function weather_badge (nws_id, div_name) {

  var callback_obj = "yp[" + idx + "]";

  var url = "http://pipes.yahoo.com/pipes/pipe.run?"
          + "&_id=CI6HgSh43BGP8nmJouNLYQ"
          + "&textinput1=" + nws_id
          + "&_run=1"
          + "&_render=json";

  yp[idx] = new YPipesWeather (url, div_name, callback_obj);
  yp[idx].requestJSON ();
  idx++;
}

// YPipesWeather 생성자

function YPipesWeather (ypipes_url, div_name, obj_name) {
  this.url = ypipes_url + "&_callback=" + obj_name + ".jsonHandler";
  this.div_name = div_name;
}

// requestJSON 메서드: script 태그를 만들고,
// 야후 서버에 요청을 보낸다.

YPipesWeather.prototype.requestJSON = function () {

  // 동적으로 script 태그를 생성한다.
  // 이렇게 하고 나서 야후 서버에 요청을 보낸다.

  var head = document.getElementsByTagName("head").item(0);
  var script = document.createElement ("script");
  script.src = this.url;
  head.appendChild (script);
}

// jsonHandler 메서드: 우리가 만든 콜백 함수다.
// 이 함수는 야후에서 JSON이 우리 브라우저로 반환될 때 호출된다.

YPipesWeather.prototype.jsonHandler = function (json) {
  var div = document.getElementById (this.div_name);

  var weather = json.value.items[0];

  var html = "";

  html += "<center>\n";

  html += "<b>" + weather.location + "</b><br>\n";

  html += weather.weather + "<br>";

  html += "<img border='0' src='"
       + weather.icon_url_base
       + weather.icon_url_name
  + "'><br>";

  html += weather.temperature_string + "<br>";

  html += "Wind: " + weather.wind_string + "<br>";
  html += "Humidity: " + weather.relative_humidity + "%<br>";
  html += "Visibility: " + weather.visibility_mi + " miles<br>";

  html += "<br><span style='font-size: 0.8em; font-weight: bold;'>"
  + weather.observation_time + "</span><br>";

  html += "</center>\n";

  div.innerHTML = html;

}

앞서 세 가지 접근 방식과 마찬가지로, 여기서도 weather_badge() 함수를 구현한다. 이 함수는 NWS 스테이션 ID 네 자리와 HTML DIV 태그를 받는다. DIV 태그는 날씨 뱃지를 삽입할 웹 페이지 영역이다.

나머지 코드에서는 YPipesWeather라는 자바스크립트 객체를 정의한다. 객체 메서드는 생성자, 동적으로 script 태그를 생성하는 함수(즉, 야후 파이프를 실행하는 함수), 콜백 함수 세 개다.

Listing 7을 보면 알겠지만, 결과적으로 XMLHttpRequest 객체를 사용하지 않으면서 앞서 세 접근 방식과 똑같이 동작하는 자바스크립트 라이브러리가 나온다.

그림 3은 접근 방식 4가 따르는 최종 날씨 뱃지를 위한 파이프라인이다. 처음 페이지를 읽은 후에는 더 이상 우리 서버를 참조하지 않는다.


그림 3. 접근 방식 4가 따르는 파이프라인
접근 방식 4가 따르는 파이프라인

Listing 8은 JSON 날씨 뱃지 라이브러리를 사용하는 웹 페이지다.


Listing 8. 웹 페이지에서 JSON 날씨 뱃지 라이브러리 사용하기
                
<html>
  <head>
    <title>JSON Script Tag Example</title>
    <link rel="stylesheet" type="text/css" href="weather.css" />
    <script language="JavaScript" 
            src="weather_badge_ypipes_json.js">
    </script>
    <script>
      function init () {
        weather_badge ("KRIC", "target1");
      }
    </script>
  </head>

  <body onload="init();">
    <h3>JSON Script Tag Example</h3>

    <div class="wbadge" id="target1">
      Loading...
    </div>
  </body>
</html>

네 가지 접근 방식 비교

정리하는 차원에서 지금까지 살펴본 접근 방식 네 가지를 비교해 보자. 먼저, Ajax 날씨 뱃지 라이브러리를 구현하는 절차는 다음과 같다.

  • NWS 서버에서 XML 정보를 읽는다.
  • XML 정보를 분석하여 필요한 부분만 추출한다.
  • 추출한 정보를 HTML로 변환한다.
  • 웹 페이지에 HTML을 표시한다.

표 1은 네 가지 접근 방식을 비교한다.


표 1. 날씨 뱃지 라이브러리 접근 방식 네 가지
접근 방식설명
1: DOM 트리 탐색서버에 있는 간단한 웹 프록시가 국립 기상청에서 정보를 가져와 브라우저로 전송한다. 브라우저에서는 자바스크립트 해석기가 전송 받은 responseXML DOM 트리로부터 필요한 정보를 추출하여 HTML로 변환한 후 페이지 내 DIV 태그 안에 삽입한다.
2: 서버쪽 XSLT서버쪽 스크립트가 국립 기상청 서버에서 정보를 가져온 후 XSLT를 사용하여 XML을 HTML로 변환한다. 그런 다음, HTML 코드를 브라우저로 전송한다. 브라우저는 전송 받은 HTML 코드를 DIV 태그 안에 삽입한다.
3: 클라이언트쪽 XSLT접근 방식 1과 동일하게, 간단한 웹 프록시를 사용하여 XML 정보를 브라우저로 전송한다. 접근 방식 1과 다르게, 클라이언트쪽 XSLT가 XML을 HTML로 변환하여 DIV 태그 안에 삽입한다.
4: JSON과 동적 script 태그(야후 파이프와 같은) 외부 서비스가 국립 기상청 정보를 XML에서 JSON(JavaScript Object Notation)으로 변환한다. 날씨 뱃지 라이브러리는 JSON 특성과 자바스크립트를 활용하여 변환된 XML을 브라우저로 가져온다. 프록시를 사용하지 않는다.

어느 방식이 가장 좋을까? 우리 날씨 뱃지처럼 간단한 예제에서도 답은 분명치 않다. 가장 좋은 방식이 제공하는 속성이 무엇일까?

JSON을 사용하는 마지막 접근 방식은 프록시를 사용하지 않는다. 따라서 서버 구성을 수정하지 못하거나 서버 스크립트를 실행하지 못하는 환경에 적합하다. 하지만 외부 웹 서비스인 야후 파이프를 사용한다는 단점이 있다. 만약 야후가 서비스를 변경해 날씨 뱃지가 동작하지 않는다면?

접근 방식 2는 어떨까? 접근 방식 2는 서버에서 XML을 변환한다. 서버에다 책임을 맡겨도 좋을까? 답은 (여러 브라우저 버전에서) 자바스크립트 언어를 어느 정도 신뢰하느냐에 달려 있다. 접근 방식 3은 실제 변환을 브라우저에서 수행한다. 접근 방식 2는 개발자가 서버를 통제하는 반면, 접근 방식 3은 개발자가 사용자 브라우저 유형을 통제하지 못한다. Part 2에서 보았듯이, 브라우저마다 XSLT를 처리하는 방식이 다르다. 그래서 뒷단 서버 스크립트보다 자바스크립트 코드를 디버깅하기가 더 어렵다. 자바스크립트 언어가 모든 브라우저에서 표준화될 때까지는 자바스크립트 코드를 가능한 줄이는 편이 현명하다.

그렇다면 일반적으로 XSLT를 사용하는 방법은 어떤가? XSLT를 사용하여 XML을 HTML로 변환하는 방법이 바람직할까? XSLT를 사용하지 않으려면 접근 방식 1이나 접근 방식 4를 취해야 한다. 접근 방식 1은 자바스크립트 코드에서 XML DOM 트리를 탐색하고, 접근 방식 4는 소프트웨어 서비스로 XML을 JSON으로 변환한 후 JSON 자료 구조를 탐색한다. XSLT를 사용하면 XSLT 코드를 변환하지 않고 브라우저에서 서버로 혹은 서버에서 브라우저로 XML 정보를 변환하기 쉽다. 그렇다면 XSLT 추상화 계층을 두는 데 드는 비용은? 나는 접근 방식 1이 접근 방식 3보다 빠르리라 생각한다. 접근 방식 1은 이미 구문이 분석된 XML 자료 요소를 탐색하기 때문이다. 접근 방식 3은 접근 방식 1과 동일한 XML 자료에 XSLT 프로세서를 돌려야 한다. 당연히 시간이 더 걸린다.

날씨 뱃지처럼 간단한 문제에서도 절대적으로 옳은 답은 없다. 알고리즘 효율이나 실행 속력을 객관적으로 비교할 수는 있지만, 실생활에서는 흔히 주관적인 문제가 떠오르기 마련이다. 실행 속력이 떨어져도 XSLT로 추상화하는 편이 나을까? 이런 문제에 속력을 고려할 필요가 있을까? 브라우저에서 변환하는 쪽이 나을까? 안정성이 어느 정도 중요할까? 단순성은? 유지보수 용이성은?

필자라면?

만약 내가 날씨 뱃지를 (기사용이 아니라 실제로) 구현한다면 어느 접근 방식을 사용할까? 한 번만 구현하고 말 코드가 확실하다면 접근 방식 1을 살짝 수정해 사용하겠다. XMLHttpRequest가 반환하는 XML DOM 트리를 곧바로 참조하는 방법 말이다. 앞으로 주식 정보나 다른 피드 정보도 구현할 예정이라면 좀 더 추상적인 접근 방식(접근 방식 2나 접근 방식 3)을 택하겠다. 다른 사람들이 다른 서버에서도 내 뱃지를 사용하도록 만들겠다면 JSON/야후 파이프 방식으로 가겠다. 이런저런 요구사항이 겹친다면 화이트보드로 되돌아가 다시 고민하겠다.





위로


다운로드 하십시오

설명이름크기다운로드 방식
이 연재의 예제 코드x-xmlajax.zip194KBHTTP
다운로드 방식에 대한 정보


참고자료

교육
  • Ajax에서 XML 처리하기, Part 1: 네 가지 접근 방법(Mark Pruett, 한국 developerWorks, 2008년 5월): 어떤 프로그래밍 문제든 해결 방법은 여러 가지가 있다. 이 기사에서는 Ajax 날씨 뱃지를 만드는 네 가지 방법 중 DOM 트리를 사용하는 첫 번째 방법을 소개한다.

  • Ajax에서 XML 처리하기, Part 2: Ajax와 XSLT를 이용하는 방법 두 가지(Mark Pruett, 한국 developerWorks, 2008년 6월): Ajax 날씨 뱃지를 만드는 방법 두 가지를 더 소개한다. 두 방법 모두 XSLT 변환을 사용하는데 하나는 서버쪽에서, 다른 하나는 브라우저쪽에서 변환을 수행한다.

  • Generate JSON from XML to use with Ajax"(Jack D Herrington, developerWorks, 2006년 9월): JSON을 좀 더 상세하게 소개한다. XSLT V2를 이용하여 XML을 JSON으로 변환한 후 자바스크립트 언어를 사용하여 JSON을 사용한다.

  • 야후 파이프: 무료 온라인 서비스다. 인기 있는 피드를 가져다 쓸 수 있으며, 시각적 편집기를 사용하여 매시업(mashup)을 만들 수 있다.

  • JSON.org: JSON에 대한 정보를 얻기에 좋은 사이트다.

  • IBM developerWorks Ajax resource center: 상호대화식 웹사이트를 만들기 위한 다양한 Ajax 기술을 소개한다.

  • IBM XML 인증: XML과 관련 기술 분야에서 IBM 인증 개발자가 되는 방법을 소개한다.

  • XML 기술 라이브러리: 기사와 팁, 튜토리얼, 표준, IBM 레드 북 등 다양한 기술 자료를 제공한다.

  • developerWorks 기술 행사와 웹 캐스트: 최신 기술 동향을 파악할 수 있다.

  • 기술 온라인 서점: 다양한 기술 서적과 기술 자료를 제공한다.


제품 및 기술 얻기

토론


필자소개

Mark Pruett는 Dominion 사 시스템 아키텍트다. Mark Pruett는 오라일리 출판사를 통해 Ajax and Web ServicesYahoo! Pipes를 저술했으며 Ajax Hacks의 기여 저자이기도 하다.




기사에 대한 평가


보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오.



 


 


 


이 문서 북마킹 하기

mar.gar.in mar.gar.in naver naver eolin eolin del.icio.us del.icio.us





위로


Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others. 기타 회사, 제품, 및 서비스명은 다른 상표나 서비스 마크일 수 있습니다.

developerWorks 콘텐트를 다른 사이트에 전재하기:
developerWorks 콘텐트에 대한 저작권은 IBM에 있습니다. IBM의 서면 허가나 원본 저자의 허락이 없이는 전재를 금합니다. 저희 콘텐트를 전재하시려면 IBM developerWorks 담당자 에게 문의하십시오.
    IBM 소개 개인정보 보호정책 문의