'Ajax'에 해당되는 글 3

  1. 2009.12.04 ExtJS
  2. 2009.11.09 Ajax 사용시 시스템 구조
  3. 2009.05.04 [IBM dWs] Ajax에서 XML 처리하기

ExtJS

ExtJS 기본 이해하기 - I
http://rhio.tistory.com/240

Ext JS 3.0
http://i-ruru.com/503

ExtJS 개발하기 위해 선행되는 지식들
http://techbug.tistory.com/1

ExtJS 1.1 프로젝트 적용 후기
http://horious.net/10

http://www.extjs.com/learn/Screencasts

Ajax 사용시 시스템 구조

- 기존 DAO 계층은 수정하지 않는다.
DAO에서 XML, JSON 데이터 형식으로 바꾸는 작업을 해서는 안된다.
DAO는 단지 데이터를 가져올 뿐이다.

- Command 계층

1. Command에서 XML, JSON 형태로 출력을 한다.
Command의 역할은 WebRequest를 객체로 전달하고 결과를 받는 역할을 한다.
출력과는 무관하다.

2. 기존과 동일하게 JSP로 이동시키고 json.jsp에서 XML, JSON 형태로 출력한다.
출력을 별도의 JSP에서 처리하는 형태는 바람직하다.

3. Controller에서 JSP로 이동시키지 않고, XML, JSON 형태로 출력한다.
정형화된 형태라면 Controller에서 일괄적으로 처리하는 것도 좋을거 같다.
응답 데이터 형태는 요청(예를 들면 인자를 resType=JSON 처리)으로 처리하기 보다 설정파일 등으로 서버에서 처리하는 것이 좋겠다.

- Presentation 계층
Ajax를 사용하는 화면으로 수정한다.


JSP로 이동하는 기존 방식에서는 request에 데이터를 여러 개 담았다.
request.setAttribute("header", header);
request.setAttribute("data", list);

이렇게 한번에 여러 개의 데이터 전달하는 것이 JSON에서는 안되는 줄 알았다.
그래서 header를 가져오는 Command와 data를 가져오는 Command를 분리하려고 했었음.


[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에서 값을 추출하기
접근 방식 2: 서버쪽 XSLT
서버에서 데이터를 가져온 뒤 XSLT 를 사용하여 XML 을 HTML 로 변환한 다음, HTML 코드를 브라우저로 전송한다.

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

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

- 인터넷 익스플로러, 파이어폭스, 오페라 등 주요 브라우저는 모두 나름대로 XSLT 처리를 지원한다.
파이어폭스와 오페라는 XSLTProcessor 객체를 제공한다. 인터넷 익스플로러는 문서 모델을 확장하여 XSLT 처리를 지원한다.
 
접근 방식 4: JSON과 동적 script 태그
야후 파이프를 거쳐 데이터를 가져온 뒤 브라우저에서 보여준다.

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

- script 태그를 동적으로 생성하기
 페이지를 읽은 후에 자바스크립트 코드를 읽어들인다. =-=> onload 에 두면 안되나?
- JSON