jQuery Mobile - Ajax, hashes & history

(이글은 http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html 의 번역으로 오역이 있을수 있습니다.)

jQuery Mobile’s navigation model

JQM에서 페이지는 일반적으로 data-role속성 값이 page인 태그 안에 header, content, footer의 div태그로 이루어집니다.
페이지 로딩의 기본 흐름은 다음과 같습니다.
HTTP request 요청을 받은 페이지는 이전 페이지의 DOM에 추가되어 집니다.
DOM은 여러 페이지를 갖게 되며, 각 페이지는 data-url 속성의 링크를 통해 이동됩니다.
URL이 처음 요청되어지면, 하나 혹은 여러 페이지가 응답될 것입니다. 그 중 가장 앞에 있는 페이지만 보여지게 됩니다. 이는 사용자가 보다 편리하게 페이지를 볼 수 있도록 해줍니다.

Ajax-driven page navigation

모든 페이지는 방문시마다 location.hash에 방문기록을 업데이트 합니다.
현재 페이지에서 다음 페이지로 이동될 때는 페이지가 DOM에 이미 존재하거나, Ajax를 통해 자동적으로 로딩되거나에 상관없이 부드러운 전환효과를 사용할 수 있습니다.
JQM에 의해 저장되는 hash 값은 처음 실제로 로딩된 페이지의 URL과 관련된 full paths로 저장됩니다. 그래서 어느 페이지나 북마크 되거나 링크로 연결될 수 있습니다.  hash기반의 url이 아닌 페이지로 이동할때에는 간단히 url의 ‘#’부분을 지우거나 새로고침을 하면 됩니다.

보통 링크가 클릭될 때마다 hash 변경이 발생합니다. 링크를 클릭 되었을 때 JQM은 링크가 로컬 URL의 참조임을 확인할 것입니다. 만약 그렇다면, 링크의 클릭시 발생하는 기본동작을 방지하고 그대신에 Ajax를 통해 url이 요청되도록 할 것입니다. 응답 페이지가 정상적으로 동작하게 되면, 새로운 페이지의 url이 location.hash에 셋팅될 것입니다.

프레임웍과 페이지의 변화에서는 $.mobile.changePage()함수를 사용합니다. 이 함수는 페이지에 관련된 모든 로직을 포함하고 페이지를 찾지 못했을 경우와 같은 다양한 응답을 제어합니다. 이 함수는 위부에서 호출될 수 있으며 to, transition, back, changeHash 인수들을 수용합니다. “to” 요소는 문자열과 일차 배열, 이차 배열, object, get 타입이나 post타입, 직렬화된 데이터 등을 수용합니다. “transition” 요소는 “slide”와 같은 지정된 문자열을 수용합니다. “back”요소는 페이지 이동이 앞으로 가야하는지 이전으로 가야하는지를 의미하는 Boolean 값을 수용합니다. “changeHash” 요소는 페이지가 성공적으로 로딩되었을 때 url을 업데이트 할 것인지에 대한 Boolean 값을 수용합니다.

$.mobile.changePage()는 JQM의 여러곳에 사용됩니다. 예를 들어, 링크가 클릭되었을 때 해당 링크의 href 속성을 제외한 나머지는 $.mobile.changePage()에서 다루게 됩니다. 폼이 전송되었을 때 JQM은 폼의 속성들과 직렬화된 데이터들을 모으고 한번더 문서 전송과 응답을 다루기 위해 $.mobile.changePage()를 사용합니다. 또한, 다이얼로그를 호출하는 링크는 hash 업데이트 없이 참조 페이지를 열기 위해 $.mobile.changePage()를 사용합니다.

JQM 페이지 이동 모델의 또 다른 중요한 요소는 기본 엘리먼트(base element) 입니다. 모든 페이지의 Head 태그에 추가되고 수정된 css,images,js 등은 적절한 경로를 가져야 합니다. 이런 기본 엘리먼트가 다이나믹하게 업데이트 되는 것을 지원하지 않는 브라우저들에서는 JQM가 페이지에 첨부된 파일들의 href와 src 속성의 기본 경로을 통해 인식합니다.

사용자가 back버튼을 클릭 시 변경되는 Hash는 Ben Alman의 해쉬변경 이벤트 플러그인을 사용하는 Window 객체내에 있는 해쉬변경 이벤트를 통해 다뤄집니다.(JQM에도 포함되어 있습니다. )
첫 페이지가 로딩되거나 hash에 변경이 발생하면, 해쉬변경 이벤트 핸들러는 location.hash를 $.mobile.changePage() 함수로 보낼 것입니다. 그로인해 참조된 페이지가 로딩되거나 나타나게 됩니다.

페이지가 DOM에 삽입되면, $.mobile.changePage() 함수는 현재 페이지와 다음 페이지의 이동을 지원합니다. 페이지 전환은 css 애니메이션을 적용한 classes의 추가, 삭제를 통해 페이지 전환이 발생됩니다. 예를들어, 왼쪽 슬라이드 효과라면 새로운 페이지가 보여질 때 ‘ui-page-active’ class뿐만 아니라 ‘slideleft’와 ‘in’ class가 추가됩니다. 애니메이션이 완료되면 ‘in’ 과 ‘out’ classes는 제거되고  ‘ui-page-active’ class도 없어집니다.

Developer explanation of base url management

JQM은 URL 경로와 <base>엘리먼트의 href 속성의 조합으로 http request를 관리합니다.
이 두 접근 방법의 조합은 로딩된 페이지의 전체 경로를 포함하는 url을 생성하는 것을 허용하고, 이렇게 로딩된 페이지에 이미지나 스타일시트와 같은 적절한 base element를 만들도록 합니다.


Auto-generated pages and sub-hash urls

몇몇 플러그인들은 동적으로 하나의 페이지 컨텐트가 여러 이동가능한 페이지로 쪼갤 수 있도록 합니다. 내장된 UL(혹은 OL)태그의 내용을 여러 페이지로 쪼갤수 있는 Listview 플러그인이 그런 예제입니다.  data-url 속성을 주어 다른 평범한 페이지처럼 링크될 수 있습니다. 그러나, 이런 여러 페이지 링크하기 위해서는 이 페이지가 서버로부터 가장 처음 요청되어져야 합니다. 이를 위해 플러그인에 의해 자동으로 생성되는 페이지는 특별한 data-url 구문을 사용합니다. <div data-url=”page.html&subpageidentifier”

예를들어 , listview 플러그인에 의해 생성된 페이지는 data-url=”artists.html&ui-page=listview-1”과 같은 data-url 속성을 가져야 합니다.

페이지가 요청될 때 jQM은 ‘&ui-page’를 분리하여 앞부분의 URL로 HTTP request를 하게 됩니다. 위의 listview 예의 경우,  URL은 http://example.com/artists.html&ui-page=listview-1 이렇게 상단에 보여지게 됩니다. JQM은 artists.html을 요청하고 그 하위 페이지를 생성할 것입니다.

그런 엘리먼트의 data-url속성은 단지 “&ui-page=” 부분만이 아닌 전체 url경로를 포함해야 한다는 것에 주목하세요. 이것은 JQM이 url과 페이지 data-url 속성들을 적절히 조화하여 하나의 일관적인 메커니즘을 사용하도록 허용합니다.

Cases when Ajax navigation will not be used

특정 조건에서 정상적인 http 요청은 Ajax 요청 대신에 사용될 것입니다. 이렇게 되는 경우는 외부웹사이트에 페이지가 링크될 때 입니다. 또한 정상적인 http 요청은 다음과 같은 링크 특성을 통해 만들도록 지정할 수 있습니다.

rel = external
target(with any value, such as “_blank”)