230106 JS AJAX json데이터와 xml데이터

fetch를 통해 데이터 받아오기

 

HTML body

    <button onclick="ajax()">json파일 ajax요청</button>
    <div class="result"></div>
    
    <hr>

    <button onclick="ajax2()">xml데이터</button>

---

 

JSON

{
    "id": "kkk123",
    "topic": "헬로",
    "age": 20
}

 

 

 function ajax() {

            fetch("hi.json").then(function (response) {
                return response.json(); //json형변환. fetch가 제공하는 기능
            }).then(function (data) {
                console.log(data.id);//가능
                console.log(data["id"]);//가능
                var result = document.querySelector(".result");
                result.innerHTML = data["id"];
            })
        }

 

---

XML

<?xml version="1.0" encoding="UTF-8"?> 
    <datas> 
        <data> 
            <name>Windows</name> 
            <version>9</version> 
            <price>99</price> 
        </data> 
        <data> 
            <name>Mac</name> 
            <version>15</version> 
            <price>99999</price> 
        </data> 
        <data> 
            <name>Linux</name> 
            <version>123.4567</version> 
            <price>0</price>
        </data> 
    </datas>

xml은 태그로 감싸여 있다.

 

function ajax2() {

            fetch("hi.xml")
                .then(function (res) {
                    return res.text();
                }).then(function (data) {
                    var result = new DOMParser().parseFromString(data,'text/xml');
                    var arr = result.querySelectorAll("datas>data");
                    for(var i=0;i<arr.length;i++){
                        console.log(arr[i].querySelector("name").innerHTML);
                        console.log(arr[i].querySelector("version").innerHTML);
                        console.log(arr[i].querySelector("price").innerHTML);
                    }
                })
        }

 

DOMParser().parseFromString(data,'text/xml')로 형변환.