jQuery XML 파싱 방법

개발하며 서버와 통신시 데이터 포맷은 주로 XML과 Json을 사용합니다.

파싱속도는 Json이 XML보다 약간 더 빠르다고 알려져있는데요.

속도 측정도 해보지 않았고, 사용량이 많은 웹을 개발하지 않아 저는 잘 모르겠네요 :(

어찌됫든 이번 주제는 jQuery를 사용한 XML 파싱에 대한 방법입니다.

jQuery는 파싱도 매우 쉽고 간편하게 할 수 있습니다.

먼저 서버에 요청을 해야겠지요?

$.ajax({
	url : "요청경로",
	type : "POST",
	success : function(xml){
		console.log(xml);
	}
});

 

여기서 요청경로(URL)는 필요한 경로에 맞게 사용하시면 되겠습니다.

실제 웹루트안에 XML 파일에 요청할수도 있는거고,

서버에서 XML을 만들어서 리턴받을수도 있는거고,

페이지 자체를 XML페이지로 사용할 수도 있고..

여러가지 전제사항이 있으니 경로는 잘 잡아서 사용하시길 바라겠습니다.

그리고 저렇게 서버에 요청을 할때 type을 따로 지정하는 옵션이 있는데 저는 구지 사용하지 않습니다.

똑똑한 jQuery가 알아서 잘 잡아주니까요 :)

어찌됫든 저 소스대로 서버에 요청하면 콘솔창에 우리가 요청한 XML문서가 찍히곘네요.

<문서>
	<첫번째문단>첫번째입니다</첫번째문단>
	<두번째문단 순서="2">두번째입니다</두번째문단>
</문서>

 

이런식으로 말이죠.

(쉽게 설명하기 위해 한글로 예시를 하였으며, 개발하면서 인코딩문제는 자주 발생하니 가급적 영어로 사용하시길 권고합니다.)

결과를 가지고 파싱을 해보기 앞서, 가장 핵심적인 함수를 소개하겠습니다.

1. find()

jQuery를 사용하며 사용량이 매우 많은 함수입니다.

find 함수는 사전의미 그대로 무언가를 찾는 함수입니다.

ex) $('body').find('span').text();

2. text()

text함수 또한 함수명만 보시면 감이 올거라 믿습니다.

인자가 없으면 셀럭터로 선택된 것의 문자열을 가지고 옵니다.

반대로 인자를 넣어주면 셀렉터로 선택된 것에 문자열(인자)을 적용하게 됩니다.

ex) $('body').find('span').text();

ex) $('body').find('span').text('TEXT');

3. attr()

attr함수는 어트리뷰트의 줄임말 입니다. 말그대로 속성을 제어하는 함수입니다.

인자는 두가지를 넣을 수 있습니다.

첫번째 인자는 속성명, 두번째 인자는 속성값 입니다.

첫번째 인자만 넣을 경우 속성명에 해당하는 값을 리턴하고, 두번째 인자까지 넣을 경우 속성값을 적용합니다.

ex) $('body').find('span').attr('id');

ex) $('body').find('span').attr('id', 'A');

이 외에도 사용할 함수는 많지만, 핵심적인것만 간단하게 설명 드렸으니 이제 이 함수들을 가지고 파싱작업을 해보겠습니다.

위의 XML문서를 참조해주시구요.

먼저 우리는 ajax success함수에서 리턴받을 XML 명을 xml 이라고 적어놨습니다.

그럼 첫번째 선택자는 xml이 되겠습니다.

$(xml);

 

이러면 서버에 요청하여 받은 XML 이 선택됩니다.

그다음 첫번째문단의 텍스트를 받아와 보겠습니다.

var txt = $(xml).find('첫번째문단').text();

 

앞서 설명드린 find 함수로 노드명을 적어주시면 셀렉트가 되고, 그뒤에 text 함수를 사용하시면 해당 노드의 텍스트를 가지고옵니다.

그럼 저 txt 변수의 값은 첫번째입니다 가되겠습니다.

두번째역시 노드명을 셀렉터로 잘 적어주신 뒤 text 함수를 사용하면 텍스트를 가지고 오겠죠?

그럼 이제 노드의 속성값을 가지고 오겠습니다.

앞에서 속성값을 제어하는 함수는 attr 이라고 설명드렸습니다.

기억나지 않으시면 다시 위에 함수설명 보시면 되겠구요.

우리는 속성값을 가지고와야 하기때문에 첫번째 인자만 넣어주면 되겠네요 :)

var attr = $(xml).find('두번째문단').attr('순서');

 

그럼 attr 변수는 어떤 값이 찍히게 될까요?

2가 되겠네요.

설명 해드린것 잘 보셧으면 아시겠지만 정말 어려운거 하나 없습니다.

함수명이 기억나질 않거나, 또는 함수사용법이 미숙해서 어렵다고 느껴지는 상황을 제외하고는 너무너무 쉽습니다.

사실 이 외에 다른 함수들도 사용합니다.

그러나 저 함수들만 알면..참 쉽게 파싱할 수 있을것 같아서 이번에는 3개의 함수만 설명드렸습니다.

어렵다면 어려울 수 있고, 쉽다면 쉬운 jQuery XML 파싱 방법이었습니다.

마지막으로 이번 포스팅 세줄 요약해봅시다.

1. find(), text(), attr() 만 이해하면

2. XML을 파싱하는데

3. 너무 쉽다

:D