티스토리 뷰

지난 강의까지 일반 적인 String Data를 가져와 출력하는 것을 해보았습니다.
벌써 까마득한 옛날 이야기 같습니다.ㅋ 올린지가 오래된지라..ㅎㅎ
큰맘먹고 3강을 올리기위해 이렇게 들어왔습니다 ㅋ

3강에서는 Ajax 의 바로 'x' !!! XML 을 가져와 데이터로 파싱하여 처리하는 것에 대해 설명할까 합니다.

첫번째 생각해야 할것은 XML을 왜 사용해야 하는 것인가에 관한 것입니다.
XML을 사용하는 이유는 여러가지가 있을것입니다.
제가 그 이유 중 딱 한가지만 꼽자면 "계열이 다른 응용프로그램 간의 데이터 교환" 이라고 생각합니다.
Ajax에서 XML을 사용하는 이유는 그것입니다. 계열이 다른 응용프로그램이라 한다면 웹프로그램에서는 웹어플리케이션과 DB의 호환을 뜻합니다.
 
  자 아직 개념 이해가 안가신다구요? 예를 하나 들어보도록 하지요. 우리의 DB에는 다음과 같은 데이터가 있습니다.

[그림 1-1] 각 필드의 데이터.  //이름 유출 죄송합니다 ㅡㅡㅋ 동아리분들 ㅋㅋ]


  자 위와 같은 테이블이 있습니다. 이것을 가져와 테이블에 뿌려주고자 합니다. 기본적인 웹프로그램에서 데이터베이스 쪽으로 쿼리를 날려 값을 가지고 옵니다. 그리고 그 값을 fetch array 한 후 array 의 데이터를 반복문을 통하여 찍어줍니다. 여기까지는 통상적인 방법입니다.
  하지만 Ajax를 사용하여 저러한 데이터를 가져와 표현해 주고자 합니다. 어떻게 처리하면 될까요? 방법은 여러가지가 있습니다. 첫번째로 생각할 수 있는 것은 구분자를 통하여 데이터를 가져오는 방법입니다. 쉽게 말씀드리자면 아래 그림과 같습니다.


  자 위와 같은 데이터를 불러와 구분자 "/" 와 ":" 를 통해 분리해 낸다면 이름과 uid를 분리하여 표로 표현할 수 있을것입니다. 하지만 문제가 발생하고 말지요. 무슨문제일까요? 바로 필드내의 데이터에 구분자 "/"와 ":"가 포함된 경우입니다. 이렇게 우리가 생성해주는 구분자는 항상 오류가 있을 수 있고, 완벽한 데이터를 구해오는 것을 보장하지 못합니다. 프로그램 상에서 보장하지 못하는 문제는 버그의 원인이 될 수 있는 가장 큰 요인이라 해도 무방하겠지요. 특히 사용자의 참여를 통해 만들어지는 웹프로그램은 더더욱이 그럴 것입니다. 따라서 보장해 주는 데이터 처리 방법인 XML 형식을 사용하여 데이터를 주고받고 처리하는 것 입니다.

  XML에 대한 다른 설명은 드리지 않겠습니다. 정말 고수준의 데이터가 아니라면 기본적인 XML 폼만을 가지고도 충분히 구현 가능합니다. 물론 성능에 차이는 있겠지만 말이죠.



  자, 그럼 본격적으로 XML 데이터를 불러와 처리해 보도록 하겠습니다.
  그럼 먼저 XML 문서를 만들어 보겠습니다. 우리가 가져오고자 하는 데이터는 uid 값과 name 값입니다. 따라서 저는 아래와 같이 XML 문서를 작성해 보았습니다.



자, 소스를 보면 아래와 같습니다. 참고만 하시길 ^^


  자 위와 같이 DB에 있는 데이터를 XML 문서로 작성하였습니다. 이렇게 되면 조금 더 동적인 웹페이지를 구성할 수 있겠지요? 요번 강의는 여기서 마치도록 하겠습니다. XML 문서를 파싱하여 처리해 주는 부분은 4강에서 포스팅하도록 하겠습니다^^

미리 해보시고 싶으시다면 힌트를 드리겠습니다!
2장의 로딩을 통하여 가져온 responseText 데이터를 document.getElementByTagName 을 사용해서 각각의 데이터를 Array 처리 하셔서 사용하시면 됩니다^^

그럼 즐거운 코딩 되세요 ^^


태클 환영합니다^^