jQuery를 활용한 XML data island 변경

Name  
   achor ( Hit: 2809 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,055일 전의 글로 현재의 관점과 다를 수 있습니다.

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

Share 밴드공유 Naver Blog Share Button


Tag

- 웹개발: IndieWeb 네이버 카페 연동 (2015-02-20 15:00:08)- 웹개발: 모바일 블로그 수정 (2015-05-03 23:29:14)

- 웹개발: 네이버 소셜앱 (2010-08-09 03:08:10)- 웹개발: 자네 취미가 뭔가 (2010-11-28 01:22:30)

- 웹개발: 설 연휴를 보내고... (2015-02-23 02:04:10)- 웹개발: IndieWeb 한국모임 (2015-02-07 16:59:52)

- 웹개발: Twitter: send message from a PHP page (2010-03-22 05:27:44)- 웹개발: 이 글의 본질은 (2014-10-20 01:34:57)

- 프로그래밍: 바르셀로나 지하철 노선도 App (2012-02-27 03:24:47)- 웹개발: CKFinder를 활용한 웹앨범 제작 방법 (2011-05-24 19:10:17)



 10   1   1
No
Category1
Category2
Subject
Date
Hit
10IT웹개발   jQuery를 활용한 XML data island 변경2013/11/162809
9IT모바일   주파수 경매2013/09/042920
8디지털마케팅Platform   Facebook은 영원할 것인가?2011/06/0615338
7디지털마케팅Seach   Google +1 Button2011/06/0311122
6IT웹개발   CKFinder 한글파일명 문제 해결 방법2011/06/0210228
5디지털마케팅Seach   meta tag를 통해 검색엔진 접근을 제한하는 방법2011/05/3113792
4디지털마케팅Seach   robots.txt를 통해 검색엔진 접근을 제한하는 방법2011/05/3111605
3IT웹개발   CKFinder를 활용한 웹앨범 제작 방법2011/05/2411284
2디지털마케팅Seach   RSS 피드, 블로그를 검색엔진, 메타블로그에 등록하자2011/05/2311230
1디지털마케팅Seach   중복되는 링크를 위해 canonical link를 사용하자2011/05/2311008
1 

  당신의 추억

ID  

  그날의 추억

Date  

  Poll
Only one, 주식 or 코인?

주식
코인

| Vote | Result |
First Written: 05/19/2011 14:55:00
Last Modified: 08/23/2021 11:46:44