jQuery를 활용한 XML data island 변경

Name

achor

( 2013-11-16 22:50:04 Hit: 2803 Vote: 79 )

Homepage

http://empire.achor.net

Category

웹개발

2000년 초반 유행한 XML data island.

XML 형식의 data를 직접 컨트롤 할 수 있어서 간단하게 소식을 전하기엔 매우 편리하긴 했지만
IE 밖에 지원하지 않는 치명적인 단점이 있었지요.

결국 웹표준이 중시되는 지금에 와서는
MS 또한 지원을 공식적으로 중단하여
IE10부터는 IE에서조차 사용이 불가능 해졌습니다.
http://msdn.microsoft.com/ko-kr/library/ie/hh801224(v=vs.85)

어디선가 XML data island 방식의 게시판을 jQuery로 변환하는 걸 본 적은 있는 듯 한데
다시 찾으려니 쉽지 않아
짬을 내 후딱, 직접 만들어 보았습니다.
요즘 jQuery의 정교함에 새삼 놀라고 있기도 하여 연습 삼아.

물론 저는 단순 취미로 웹개발을 즐길 뿐, 전문적인 개발자는 아니기에
코드의 수준은 매우 낮습니다.

곧 저와 같은 어려움을 겪은 분들이라면
참고는 하시되
코드는 직접 좀 더 세련되어 짜시길 추천 드립니다. -__-;

예전 XML data island의 코드는 아래와 같습니다.
10년 전 짠 코드라서 table로 틀을 잡고 있습니다. -__-;

일단 html 내 코드는 아래와 같이 바꿨습니다.
6줄씩 표현하고 있어서 cont0부터 cont5까지 id를 부여했고,
이전, 다음 페이지를 계산하기 위해 xmlpagepnum, xmlpagennum으로 hidden값을 부여해 놨습니다.

다음 javascript function을 2개 만들었는데,
acxmlboard는 레퍼런스처럼 제공되는 jQuery의 DOMParser 모델을 차용하여
xml file을 읽어 구조화 하였고,

processXMLDoc function으로
xml data를 각 요소별로 지정된 위치에 표현하였습니다.
맨 처음, 맨 마지막 페이지를 고려하여 페이지 이동을 설정하였고요.

완성된 화면은
http://empire.achor.net 화면 좌측 상단의 News를 통해 확인하실 수 있습니다.

공개하기엔 코드가 너무 지저분 하고, 수준 낮습니다만 (함수명이나 변수명도 대충 막 정해져 있고, -__-;)
이제는 쓰지 않아 반드시 변화가 필요함에도
한국어로 된 XML data island에 대한 정보가 너무 없어 일단 적어둡니다.

누군가에겐 도움이 되시길.

- achor

본문 내용은 4,033일 전의 글로 현재의 관점과 다를 수 있습니다.

Post: http://achor.net/board/blog/10
Trackback: http://achor.net/tb/blog/10
RSS: http://achor.net/rss/blog

Share

Tag

jQuery, XML, 웹개발, 프로그래밍

- 웹개발: Google reCAPTCHA (2016-04-18 01:02:51)	- 프로그래밍: 오락실 (2016-10-20 01:03:55)

- 웹개발: IndieWeb Facebook 댓글 연동 (2015-02-08 23:41:52)	- 웹개발: PHP fsockopen을 활용한 Twitter message 전송 (2010-07-18 09:35:12)

- 웹개발: 아처제국 미러사이트 (2014-12-30 01:24:09)	- 웹개발: Smart Phone User Agent (2010-04-17 20:28:19)

- 웹개발: CKFinder를 활용한 웹앨범 제작 방법 (2011-05-24 19:10:17)	- 웹개발: Opengraph 및 Google Map 적용 (2016-08-06 02:18:25)

- 웹개발: 홈페이지 글작성과 동시에 자동으로 Twitter에 전송되는 기능 이야기 (2010-09-14 23:26:28)	- 웹개발: Facebook Like Buttom (2011-01-07 01:41:39)