[IBM dWs] Ajax에서 XML 처리하기

웹에서 XML 자료를 가져온 후 파이프라인을 거쳐 원하는 정보를 정해진 형식으로 추출해서 출력하는 여러 방법을 보여준다.

Ajax에서 XML 처리하기, Part 1: 네 가지 방법
Ajax에서 XML 처리하기, Part 2: Ajax와 XSLT를 이용하는 방법 두 가지 

Ajax에서 XML 처리하기, Part 2- Ajax와 XSLT를 이용하는 방법 두 가지.pdf

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

이 글에서는 간단한 Ajax 라이브러리를 만들어 사용한다.(ajax-simple.js)
미국립 기상청(NWS) 사이트에서 날씨 정보를 가져온다.

접근 방법 1. DOM 트리 탐색
웹프록시를 거쳐서 데이터를 가져온 뒤 브라우저가 DOM에서 값을 추출해서 보여준다.

- Ajax 의 XMLHttpRequest 객체는 같은 도메인으로만 요청이 가능한데 이를 해결하기 위해 웹 프록시를 사용한다.
웹 프록시는 한 서버로 보낸 요청을 다른 서버로 전달하는 방법이다.
아파치 웹 서버에서 프록시는 ProxyPass 규칙으로 구현한다.(웹 서버 구성을 바꿀 권한이 있어야 하겠지)

- DOM에서 값을 추출하기

request.responseXML.documentElement.getElementsByTagName("ELEMENT")[0].firstChild.data

접근 방식 2: 서버쪽 XSLT
서버에서 데이터를 가져온 뒤 XSLT 를 사용하여 XML 을 HTML 로 변환한 다음, HTML 코드를 브라우저로 전송한다.

- 리눅스에 있는 xsltproc 이라는 명령행 XSLT 프로세서를 이용한다.
Perl 스크립트로 xsltproc, wget 을 사용해서 파이프라인 구성 =-=> wget 은 자바 URLConnection 으로 가능하지 않나?

접근 방식 3: 클라이언트쪽 XSLT
웹프록시를 거쳐 데이터를 가져온 뒤 브라우저에서 XSLT 변환을 해서 보여준다.

- 인터넷 익스플로러, 파이어폭스, 오페라 등 주요 브라우저는 모두 나름대로 XSLT 처리를 지원한다.
파이어폭스와 오페라는 XSLTProcessor 객체를 제공한다. 인터넷 익스플로러는 문서 모델을 확장하여 XSLT 처리를 지원한다.
 

if (typeof XSLTProcessor != "undefined") { //객체 감지(Object Detection) 기법
	var xsl_proc = new XSLTProcessor ();
	xsl_proc.importStylesheet (xsl_doc);
	var node = xsl_proc.transformToFragment (xml_doc, document); //이 메서드는 HTML 텍스트가 아니라 문서 단편(document fragment)을 반환하므로 innerHTML을 사용하여 DIV 태그에 바로 뿌려넣지 못한다.

	div.innerHTML = "";
	div.appendChild (node);

}else if (typeof xml_doc.transformNode != "undefined") {
	div.innerHTML = xml_doc.transformNode (xsl_doc);
}else {
	div.innerHTML = "XSLT not supported in browser.";
}

접근 방식 4: JSON과 동적 script 태그
야후 파이프를 거쳐 데이터를 가져온 뒤 브라우저에서 보여준다.

- Ajax 동일 도메인 제약 문제(same domain problem) 해결하기
(아파치 ProxyPass 규칙을 설정하는 등) 웹 서버 구성을 변경
다른 서버의 데이터를 긁어오는 서버 스크립트를 작성
야후 파이프(Yahoo! Pipes) 같은 외부 서비스 이용(여기에는 script tag hack 같은 기법이 추가된다.)

- script 태그를 동적으로 생성하기

var head = document.getElementsByTagName("head").item(0);
var script = document.createElement ("script");
script.src = "some_javascript_code.js"; //다른 서버에 있는 자바스크립트일 수도 있다. 게다가 동적으로 변경될수도 있다. 이 응답의 결과는 이 서버에 있는 콜백함수를 호출하는 구조이므로 응답을 기다릴 필요가 없다.
head.appendChild (script);

 페이지를 읽은 후에 자바스크립트 코드를 읽어들인다. =-=> onload 에 두면 안되나?
- JSON

var weather = {
  "count": 1,
  "value":
    {"title": "NOAA Regional Weather",
     "description": "Pipes Output",
     "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)",
          "icon_url_name": "bkn.jpg"
         }
       ]
    }
}
alert(weather.value.items[0].station_id);