공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/AJAX

03. 제이쿼리 ajax로 xml 파싱

serpiko 2014. 8. 28. 17:33

ajax로 xml 파싱하기


먼저 xml의 구조는 아래와 같다.


news.xml




	
	
		_blank
		http://daum.com
		
	
	
	
		_blank
		http://google.com
		
	
	
	
		_blank
		http://serpiko.tistory.com
		
	
	
	
		_blank
		http://bing.com

jQuery에서 ajax메서드를 사용하여 아래와 같이 XMLHttpRequest를 사용한 파싱이 가능하다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> NewDocument </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="XMLLoader.js"></script>
<script>
    var _xml;
    var _arrTarget = [];
    var _arrLink = [];
    var _arrDesc = [];
</script>
</head>
<body>
    <script>
        $(document).ready(function(){
            init();
        });
 
        function init()
        {
	    jQuery.ajax({
		dataType:"xml",
	                url:"xml/news.xml",
		success:function(data){
		    load(data);
		},
		complete:function(){
		    //alert("complete");
		},
		error:function(xhr,status){
		    console.log(xhr, status);
		}
	    });
        }
 
        function load($xml)
        {
            _xml = $($xml).find("xml");
            var len = _xml.find("news").length;
            for(var i=0; i<len; ++i)
            {
                _arrTarget[i] = _xml.find("news").eq(i).find("target").text();
                _arrLink[i] = _xml.find("news").eq(i).find("link").text();
                _arrDesc[i] = _xml.find("news").eq(i).find("name").text();
                $("body").append(_arrTarget[i]).append(_arrLink[i]).append(_arrDesc[i]).append("<br />");
                 
            }
        }
    </script>
</body>
</html>


결과)




위에서 사용한 ajax XML을 XMLLoader.js로 라이브러리화 시키면 아래와 같다.


(직접만든것은 아니고 과장님이)


/****************************************************************
 * title : 
 * author : Song-Hyun, Kim (shk@pulipinc.com)
 * last update : 2011.04.26
 * comment :"";
 * use : 
 * XMLLoader.url = "http://localhost/xml/gnb/gnb.xml";
   XMLLoader.complete = load;
   XMLLoader.error = errorHandler;
   XMLLoader.init();
 ****************************************************************/
var XMLLoader = {}
	XMLLoader.init = init;
	
	XMLLoader.xmlLoad = xmlLoad;
	XMLLoader.complete = null;
	XMLLoader.error = null;
	XMLLoader.url = "";
	XMLLoader.type = "xml";

	/****************************************************************
	 * init
	 ****************************************************************/
	function init() 
	{
		xmlLoad();
	};

	/****************************************************************
	 * load
	 ****************************************************************/
	function xmlLoad() 
	{
		//alert("load");
		jQuery.ajax({ 
				
			type:"GET", 
			dataType:XMLLoader.type,
			url:XMLLoader.url, 
			success: function(data){
				XMLLoader.complete(data);
			},
			complete: function() {
				//alert("complete");
			},
			error: function(xhr, status) {
				XMLLoader.error(xhr, status)
			}
		});
	}


사용할때에는 XMLLoader.js의 오브젝트트들을 참조하여 경로와 함수만 대입하여 참조 시켜주면 된다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> NewDocument </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="XMLLoader.js"></script>
<script>
	var _xml;
	var _arrTarget = [];
	var _arrLink = [];
	var _arrDesc = [];
</script>
</head>
<body>
	<script>
		$(document).ready(function(){
			init();
		});

		function init()
		{
			XMLLoader.url = "xml/news.xml";
			XMLLoader.complete = load;
			XMLLoader.error = errorHandler;
			XMLLoader.init();
		}

		function load($xml)
		{
			_xml = $($xml).find("xml");
			var len = _xml.find("news").length;
			for(var i=0; i<len; ++i)
			{
				_arrTarget[i] = _xml.find("news").eq(i).find("target").text();
				_arrLink[i] = _xml.find("news").eq(i).find("link").text();
				_arrDesc[i] = _xml.find("news").eq(i).find("name").text();
				$("body").append(_arrTarget[i]).append(_arrLink[i]).append(_arrDesc[i]).append("<br />");
				
			}
		}

		function errorHandler(xhr, status)
		{
			console.log(xhr, status);
		}
	</script>
</body>
</html>

결과는 동일하다)





저작자표시 비영리 동일조건 (새창열림)

'■ 프론트엔드 ■ > AJAX' 카테고리의 다른 글

아이디 중복확인 with. 제이쿼리, AJAX  (0) 2015.02.02
04. 제이쿼리 ajax and php JSON데이터  (0) 2014.08.28
03. 제이쿼리 load → JSON데이터  (0) 2014.08.28
02. XMLHttpRequest 함수화 - sendRequest(url, param, callback, method, asyncBool)  (0) 2014.08.28
01. XMLHttpRequest 함수화 기본형  (0) 2014.08.28
댓글