Data Caching Structure in Ajax(XHR) Pattern

웹에서는 수 많은 페이지에서 서버에 수 많은 데이터를 요청합니다.
Web 2.0 이전 방식에서는 페이지가 링크를 통해 이동할 때마다 서버에 불필요한 데이터 요청을 하게 됩니다.

예를 들어서 어느 블로그나 카페에 컨텐츠를 구성하는 요소 중 카테고리와 게시판이 있습니다.
우리는 이 게시판에서 요구하는 것은 게시글의 제목을 눌렀을 때 그 게시글에 대한 상세한 정보입니다.

누가 작성하였고 등록된 날짜와 시간이 언제인지 그리고 그 게시글의 내용이 무엇인지 하지만 이전 방식은 화면이 리로딩 되면서 게시글 보기 페이지로 이동되면서 좌측 카테고리 목록도 서버에서 다시 요청하는 쿼리가 수행되고 화면 인터페이스를 구성하기 위한 여러가지 쿼리들이 함께 수행되게 됩니다.

이는 Web 2.0 방식에 좀더 정확한 표현으로 Ajax 개발에 있어서 비 효율적임을 알 수 있습니다.
이로서 우리가 생각해야 하는 것은 데이터 캐싱에 대한 구조입니다.

Javascript를 이용한 간단한 예제를 들어보자면 아래의 그림과 같습니다.

사용자 삽입 이미지

기본적인 user interface 를 구성하는 코드들에 서버에 비동기 데이터 요청을 하게되는 XMLHTTPRequest 가 있습니다. 그리고 서버 사이드에서 이 비동기 요청을 받아 DBMS에 해당 요청에 대한 쿼리만 수행하고 그 결과를 응답해줍니다.

이때 화면이 리로드 되지 않기 때문에 우리는 받아온 데이터를 javascript 의 variable 즉 local storage에 hash( { key : value } ) 형태로 데이터를 저장해 놓습니다.  이는 저장된 데이터를 활용해 동일한 데이터 요청을 하지 않게 됩니다.

위에서 보는 것처럼 XMLHTTPRequest가 request가 발생되었을 때 var storage 에 기존에 요청한 데이터가 존재하는지 체크하여 있으면 Server-side Script에 요청을 하게 되고 이미 존재한 경우에는 요청 없이 local storage에 이미 있는 데이터를 그대로 활용하게 됩니다.

이 데이터 캐싱 구조는 Ajax 개발에 있어 매우 중요하고 Ajax Application을 개발하는 목적을 달성시켜주는 패턴중에 하나라고 말할 수 있습니다.

간단한 예제 소스입니다.

위의 예제처럼 storage에 서버에 요청했던 정보들을 저장해놓게 되면 재 요청이 이뤄지지 않고 기존 데이터를 그대로 활용할 수 있습니다.

하지만 단점은 한 페이지에서만 활용할 수 있으므로 화면이 리로드되거나 다른 페이지로 이동하게 되면 활용 할 수 없게 됩니다.

Firefox에서는 이를 session storage와 global storage로 storage 메커니즘을 지원하고 있습니다.

위의 예제는 session storage와 유사한 방식이며 global storage는 브라우저가 닫히기 전까지 사용할 수 있는 storage를 역할을 하고 있습니다.   하지만 현존하는 브라우저에서 모두 지원되는 메커니즘은 아닙니다.

신고
Posted by Rhio.kim
Prototype 1.5.1.1 의 Ajax 중복 요청에 대한(XHR Request managment)를 만들어 보았습니다.
자세한 내용은 아래를 참고해 주세요.

  문제제기
    네트워크 병목 현상이나 서버의 부하로 인하여 XHR(XMLHTTPRequest)의 Response가 늦어져
    사용자에 의해서 동일한 중복 요청이 발생할 경우

    e.g) Ajax 게시판에서 사용자는 1페이지에서 2페이지로 이동하는 단계에서 요청한 2페이지의 결과가
           Response 되기 전에 3페이지를 누르는 경우 2페이지의 XHR는 의미 없는 요청이 된다.

  해결방안 모색
    new Ajax.Request가 발생한 다는 것은 Ajax.Request.initialize() 생성자 함수가 호출되면서
    XHR 이 Request를 발생시키는데 이때 아래 시나리오를 추가하여 해결한다.
사용자 삽입 이미지


  시나리오
    1. 현재 개발되어진 소스에 영향을 받으면 안된다.
    2. Ajax._observers 배열에 이미 요청중인 요청이 있는 체크하여 있다면 현재의 요청과 비교한다.
        만약 있다면 3, 없으면 6
    3. 다음 Ajax.Request가 동알한 url 로 생성되어 질때 이미 쌓아 놓은 배열에 동일한 URL로 요청중인
        XHR에 abort() 이벤트를 발생시켜준다.
    4. 해당 Ajax.Request 오브젝트는 null로 변경한다.(메모리 누수 발생 될 수 있음)
    5. abort가 발생한 Ajax.Request 오브젝트 레퍼런스는 배열에 splice로 삭제한다.
    6. new Ajax.Request() 가 발생할 때 Ajax.Request 오브젝트의 레퍼런스를 배열
        Ajax._observers에 쌓는다.
    7. 정상 완료된 Ajax.Request가 있다면 Ajax.Responder에 의해서 사용자 등록한 responders 배열 중
        해당 callback method "onComplete"를 호출한다.
    8. Ajax._observers에 쌓아두었던 Ajax.Request 오브젝트의 레퍼런스를 소멸시켜준다.

예제
신고
Posted by Rhio.kim
W3C에서 "Enabling Read Access for Web Resources" 로 크로스 도메인 처리가 가능한 XMLHTTP Request(XHR) 을 추가하였습니다.

정말 크로스 도메인에 대한 처리는 너무 기대됩니다.
그간 많은 사용자들이 크로스 도메인을 해결하기 위한 시도가 있었는데요..

HTTP header 에 설정을 통하여 가능하게 됩니다.
Access-Control: allow <*.example.org> exclude <*.public.example.org>

XML 방식의 처리
<?access-control allow="allow.example.org" deny="deny.example.org"?>

그래서 이제는 cross_dmain.xml 이 필요없게 되었습니다.


이번 크로스 도메인 정책에 의미는 엄청난 잠재력을 지닌, 보안 문제에 있어서도 안전한
 Mash Up 메커니즘을 제공할 것입니다.

아래 표는 위의 제안과 JSONRequest 의 차이점에 대한 표입니다.
사용자 삽입 이미지



신고
Posted by Rhio.kim