[자바스크립트/제이쿼리/ajax/xml]ajax 이용하여 xml 데이터 가져오기

학원 안간날에 배웠더라

필요했던건데 ㅠㅠ

아무튼 서칭으로 알아옴

<div id="target"></div>

html 문서에는 위와같이 적어줌

    <script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                url:"./data.xml",           //파일 경로, 어떤 파일을 불러올 것인지
                cache:false,                //캐시 사용여부 true false
                dataType:"xml",             //타입
                success:function(data){     //성공적으로 불러왔을때 할일
                    $(data).find("person").each(function(){
                        var personInfo = "name : " + $(this).find("name").text() + "</br>" + "age : " + 
                        $(this).find("age").text() + "</br>";
                        $('#target').append(personInfo)
                    })
                },
                error:function(){           //불러오지 못했을때 할일
                    alert('Error loading XML document');
                }

            })

        })
    </script>

스크립트에는 이렇게 적어줬다. 제이쿼리를 이용하면 편리하게 할 수 있다고 한다.

아래는 data.xml 로 사용한 데이터들이다

<?xml version="1.0"?>
  <contents>
  <person>
    <name>kim</name>
    <age>30</age>
  </person>   
  <person>
    <name>lee</name>
    <age>20</age>
  </person>   
</contents>

 

결과는 아래와 같다~

잘 불러왔다.

 

fine()가 data 안의 person을 찾아서 each로 반복적으로 돌면서 데이터를 가져와서 #target에 데이터를 뿌려준다.