메인 컨텐츠로 가기

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

jQuery로 XML 처리

jQuery, XML, DOM 및 Ajax로 동적인 XML 기반 UI 앱 빌드

Aleksandar Kolundzija, 웹개발자, Meebo
Aleksandar Kolundzija사진
Aleksandar Kolundzija는 업계에 10년 이상 몸담은 웹 개발자로서, 현재는 Meebo의 Frontend Engineering 팀을 관리하고 있다. 그는 또한 Gallerama.com 웹 기반 사진 관리 애플리케이션의 설립자이자 작성자이기도 하다. 그는 Hunter College에서 컴퓨터 공학 학위를 받았다. Alex에 관한 자세한 정보는 www.subchild.com 의 블로그를 확인하거나, Twitter에서 @subchild로 연결할 수도 있다.

요약:  XML 파일을 처리하기 위해 jQuery의 빠르고 강력한 DOM 조회(traversal) 및 조작 메소드를 사용할 수 있다는 것을 알고 있었습니까? Ajax를 사용하여 XML 파일을 간편하게 로드하는 jQuery의 기능과 결합된 이러한 기능으로 인하여 이 JavaScript 라이브러리가 동적인 XML 기반 UI 애플리케이션을 빌드하기 위해 훌륭한 선택이 됩니다. 이 튜토리얼에서 이러한 접근방식의 구체적인 내용을 자세히 살펴보고 그 이점과 제한사항을 탐색해보십시오. 이 과정에서 브라우저에서 DOM 처리의 개요를 보고 XML을 구문 분석할 때에 jQuery의 메소드가 얼마나 유용하게 입증할 수 있는지 알아봅니다. 또한 튜토리얼에서 다루는 기술을 사용하여 일반 브라우저 기반의 실시간 XML 편집기 개발에서 기본 단계에 대한 개요를 서술합니다.

원문 게재일:  2011 년 6 월 17 일
난이도: 중급 PDF:  A4 and Letter (129 KB | 24 pages)Get Adobe® Reader®

페이지뷰: 7269 회
의견: 

시작하기 전에

이 튜토리얼은 jQuery 및 XML 처리 기술을 회복하거나 강화하려고 하는 숙련된 개발자에게는 유용한 한편, 필수 DOM 스크립팅 개념의 실제적인 개요도 제공하므로, 가장 경험이 적은 JavaScript 코더조차도 빠르게 작업할 수 있도록 교육하여 튜토리얼의 전체 범위를 이해할 수 있다.

이 튜토리얼의 정보

자주 사용하는 약어

  • Ajax: Asynchronous JavaScript + XML
  • DOM: Document Object Model
  • HTML: Hypertext Markup Language
  • JSON: JavaScript Object Notation
  • UI: User interface
  • W3C: World Wide Web Consortium
  • XML: Extensible Markup Language

고급 미디어 및 데이터 리치 웹 애플리케이션이 브라우저 내에서 수적인 면에서 성장하면서 XML과 jQuery와 같은 기술은 광범위한 활용과 유연성으로 인해 아키텍처에서 중요한 컴포넌트가 되었다. 이 튜토리얼에서는 브라우저에서 DOM 처리를 탐색하여, 이러한 패러다임이 특히 XML에 어떻게 적용되는지와 jQuery 라이브러리가 어떻게 개발 속도를 높이고 더 견고해질 수 있는지에 관심을 집중한다.

이 튜토리얼은 다음과 같은 구체적인 주제를 다룬다.

  • DOM 소개
  • 브라우저에서 XML 및 JavaScript
  • jQuery 및 XML
  • 케이스 연구: LiveXMLEditor

선수조건

이 튜토리얼은 독자가 HTM과 JavaScript를 기본적으로 이해하고 있다고 가정한다. 코드를 따라 진행하려면 다음이 필요하다.

  • 코드를 쓰고 읽기 위해 즐겨찾는 텍스트 편집기.
  • jQuery 라이브러리. 다운로드하여 로컬로 사용하거나, Google CDN에서 직접 이를 포함하여 사용할 수 있다.
  • 우수한 브라우저. 오늘날 사용되는 브라우저를 대부분 지원하긴 하지만, 권장 브라우저는 jQuery Browser Compatibility 페이지를 검토하자. 많은 UI 엔지니어들은 가장 대중적인 Firebug와 같은 Firefox의 유용한 플러그인으로 인해 개발을 위해 Firefox를 선택한다. Firebug는 이 튜토리얼에 필수는 아니지만, 강력히 권장된다.
  • 서버측 언어(특히, PHP)에 익숙하다면 특정 섹션에 도움이 되지만, 필수적인 것은 아니다.

이러한 모든 도구에 대한 다운로드 링크는 참고자료를 확인하기 바란다.

19 | 다음

의견



static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=20
Zone=XML, 웹 개발
ArticleID=681319
TutorialTitle=jQuery로 XML 처리
publish-date=06172011
author1-email=ak@subchild.com
author1-email-cc=nancy_hannigan@us.ibm.com

태그

Help
검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오.

태그를 더 많이 보거나 적게 보기 위해 슬라이더 막대를 사용하십시오.

인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다.

내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.

검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오. 인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다. 내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.