[Ajax] #05. xml 파싱 :: 파일 불러와서 접근하는 방법

※ 이전 포스팅에서는 클릭을 해서 이벤트를 발생하는 식으로 데이터를 불러오긴 했으나, 사실 그냥 페이지에 노출시키는 것도 충분히 가능하다. 이번 포스팅에서는 여전히 클릭을 해서 이벤트는 발생하는 예제를 보여주긴 하지만, 클릭 함수를 빼도 무관하다는 사실, 참고하길 바란다.

● xml 파일을 불러오는 기본 셋팅을 먼저 해주자.

그리고, 데이터가 성공적으로 넘어오는지 alert으로 success, 에러표시는 필수! 시행착오를 덜 하게 되는 팁이다.

<p id="demo"></p>
<br>
<button type="button">click</button>
 
<script type="text/javascript">
 
// 배열 초기화
let target = [];    
let link = [];
let aname = [];
 
 
$(function () {
        $("button").click(function () {
            
            $.ajax({
                url: "data.xml",
                datatype: "xml",
                success: function( data ) {             // xml이라고 해도 된다
                    alert('success');
                }
                error:function() {
                    alert('error');
                }
            });
            
        });
});
 
</script>
 

● XML 파싱

xml 파일을 통해 네이버, 다음, 구글 링크로 넘어가는 코드를 짜보자.

<?xml version="1.0" encoding="UTF-8"?>
<xmldata>
	<news>
		<target>naver</target>
		<link>http://www.naver.com</link>
		<aname>네이버</aname>
	</news>
	<news>
		<target>daum</target>
		<link>http://www.daum.net</link>
		<aname>다음</aname>
	</news>
	<news>
		<target>google</target>
		<link>http://www.google.co.kr</link>
		<aname>구글</aname>
	</news>
</xmldata>

<p id="demo"></p>
<br>
<button type="button">click</button>
 
<script type="text/javascript">
 
// 배열 초기화
let target = [];    
let link = [];
let aname = [];
 
 
$(function () {
     $("button").click(function () {
            
         $.ajax({
             url: "data.xml",
             datatype: "xml",
             success: function( data ) {                    // xml이라고 해도 된다
             //    alert('success');
                 let xml = $(data).find("xmldata");         // root tag
                 let len = xml.find("news").length;
                 // alert(len);
                    
                 for (var i = 0; i < len; i++) {
                     target[i] = xml.find("news").eq(i).find("target").text();       // eq = equals
                     link[i] = xml.find("news").eq(i).find("link").text();
                     aname[i] = xml.find("news").eq(i).find("aname").text();
                 }
                
                 for(i = 0; i < len; i++){
                     $("#demo").append(target[i] + " " + link[i] + " " + aname[i] + "<br>");
                 }                
                }
                /*         
                error: function() {
                    alert('error');
                }
                 */
            });
            
        });
});
 
</script>
</body>
</html>

xml 파일을 url로 설정하고, datatype 역시 xml로 설정한다.

xml 변수, len 변수를 선언해 각 태그를 기준으로 find 함수를 사용해 for문으로 데이터들을 출력해준다.  

데이터의 갯수만큼(len) p 태그의 id인 #demo로 정리정돈하여 출력해주면 된다.