공룡호가 사는 세상 이야기

지난 2달간, Ajax에서 XML을 처리하는 방법(Part 1, Part 2)을 리뷰했었다.
이제 연재의 마지막인 Part 3가 소개되었다.
Part 1 링크 : http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt1
Part 2 링크 : http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt2

1. DOM 트리 탐색 - Part 1
2. 서버쪽 XSLT - Part 2
3. 클라이언트쪽 XSLT - Part 2
4. JSON과 동적 스크립트 태그

Part 3에서는 JSON과 동적 스크립트 태그를 이용하는 방법을 알아본다.
위 1,2,3 방식 모두 Ajax 에서 자바스크립트 XMLHttpRequest 객체를 사용하는 방법이었다. 즉, 모두 일종의 웹 프록시를 사용하여 원격지 서버의 XML 데이터를 가져오는 방법으로 Ajax의 '같은 도메인'문제를 해결했다.
Part 1에서도 언급되었고, Part 3에서도 잠깐 언급하고 있는데 '같은 도메인'문제는 Ajax프로그램이 원래 페이지를 가져온 서버로만 XMLHttp Request를 보내야 한다는 보안 제약을 말한다. 그러나 현실적으로는 Ajax 프로그램에서 가져오는 정보는 한 서버에 국한되지 않는다. 그래서 흔히 웹 서버 구성을 변경하거나 특수한 스크립트를 생성하는 방법으로 '같은 도메인' 문제를 해결한다.
그러나, 또 다른 방법이 있다. 해당 문제를 우회하여 프로그래머가 위와같은 제약사항에 신경쓸 필요가 없다.
Part 3에서는 JSON을 이용하여 이 문제를 해결한다.

JSON은 JavaScript Object Notation 을 줄인 약자로, 자바스크립트 언어가 기본적으로 이해하는 자료 형식이다. XML과는 달리, JSON은 자바스크립트 코드이므로 별도의 구문 분석이 필요 없다.
Part 1, 2에서도 그랬듯 날씨 정보 NWS(XML)을 가져와 야후 파이프를 이용, JSON으로 변환한다.

그림: 야후 파이프
야후 파이프 편집기

JSON으로 변환 후, 해당 변수에 할당하면 코드 내에서 바로 참조가 가능하게 된다.
전체 파이프 라인을 보면 다음과 같다.

접근 방식 4가 따르는 파이프라인

자세한 방법 및 수순은 아래 링크에서 확인하도록 하자. 더불어 각 방법의 장단점에 대해서 고민해 보고,
해당 방법을 변형하여 새로운 접근을 만들어 낼 수도 있을 것이다.

Part 3 링크 : http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt3/