[JavaScript] Ajax 와 XML / JSON

November 24, 2019

javascript

Ajax (Asynchronous JavaScript and XML)

Ajax는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.

보통 브라우저에서 웹페이지를 요청하면 서버와 통신하여 화면을 refresh하는데, Ajax를 이용하여, 서버로부터 웹 페이지가 반환될 때 화면 전체를 refresh하지 않고, 일부만을 갱신할 수 있게 해준다. 이와 같은 효과로 인해, 페이지 전체를 로드하여 렌더링할 필요가 없어지며, 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.

특히 jQuery 라이브러리로 Ajax를 사용하면 자바스크립트로만 처리하는 것에 비해 간결해지고 크로스 브라우징 문제도 해결된다.

Ajax는 비동기적으로 서버와 브라우저가 데이터를 주고 받는데, 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML만을 사용해서 통신해야 하는 것은 아니다. 사실 XML보다는 JSON을 더 많이 사용한다.

데이터 전송 형식 - XML / JSON

서버와 클라이언트 또는 애플리케이션에서 처리할 데이터를 주고받을 때 쓰는 자료 형식 중 대표적인 것으로는 XML과 JSON이 있다.

XML 형식

HTML과 같이 태그 구조의 형식으로 데이터를 표현한다. XML 문법 특성상 데이터 이외에 열고 닫는 태그가 반드시 필요하기 때문에 구조가 복잡해지고 용량이 커지는 것이 단점이다.

XML Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book>
        <title>자바스크립트</title>
        <author>Jessie</author>
        <price>20000</price>
    </book>
    <book>
        <title>알고리즘</title>
        <author>cokk</author>
        <price>15000</price>
    </book>
    <book>
        <title>자료구조</title>
        <author>ellie</author>
        <price>18000</price>
    </book>
</books>
cs

$.ajax() 메소드

서버에 지정한 형식의 자료를 요청하는 제이쿼리 범용 메소드이다. XML, JSON 등 다양한 타입의 자료를 요청할 수 있다.

$.ajax() 메소드 형식

1
2
3
4
5
6
7
8
$.ajax({
    url: '가져올 파일명',
    dataType: '데이터 형식',
    success: function() {
        //콜백 함수(가져온 파일에 대한 처리)
        ...
    }
});
cs

ajax() 메소드로 xml 문서 불러오기 Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    </head>
    <body>
        <script>
            $(function(){
                $.ajax({
                    url: 'book.xml',
                    dataType: 'xml',
                    success: function(data){
                        $(data).find('book').each(function(){
                            var title = $('title', this).text();
                            var author = $('author', this).text();
                            var price = $('price', this).text();
                            var txt = "<li>" + title + ", " + author + ", " + price + "</li><hr>";
                            $('body').append(txt);
                        });
                    }
                });
            })
        </script>
    </body>
</html>
 
Colored by Color Scripter
cs

(줄 10) : 불러올 파일의 경로를 지정.
(줄 11) : 불러올 파일의 형식을 지정. xml 형식의 파일을 불러온다.
(줄 12) : 파일을 불러오는 데 성공하면 콜백 함수를 처리한다. 콜백 함수 내부에서는 xml 데이터를 불러와서 항목별로 표시하기 위해 각각의 변수에 할당하는 작업을 했다.
(줄 13) : $(data)는 $.ajax() 메소드가 ‘book.xml’파일에서 불러온 데이터 객체다. find() 메소드로 하위 book 객체를 찾아서 작성된 book 객체만큼 each()를 반복 수행한다.
(줄 14) : this는 현재 book 객체를 의미하고, title은 book 객체 안의 title 객체를 선택한다는 의미이다. 선택한 객체의 내용을 title 변수에 대입한 것이며 나머지 author과 price도 같은 형태로 지정한다.

JSON 형식

JSON(JavaScript Object Notation)은 자바스크립트 객체 데이터 형식으로, XML 데이터 형식에 비해 구조 정의의 용이성과 가독성이 뛰어나서 AJAX의 표준으로 사용된다.

JSON Example

1
2
3
4
5
6
7
8
9
10
{
    "student": {
        "이름": "Jessie",
        "나이": 20,
        "성별": "여",
        "주소": "경기도 용인시 수지구",
        "취미": "프로그래밍",
        "별명": "제씨"
    }
}
cs

$.getJSON() 메소드

제이쿼리 getJSON() 메소드는 ajax() 메소드의 축약형으로, JSON 데이터에 특화되어 있다.

$.getJSON() 메소드 형식

$.getJSON(url, 콜백함수);

getJSON() 메소드로 JSON 문서 불러오기 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    </head>
    <body>
        <script>
            $(function(){
                //json 파일을 data로 가져옴
                $.getJSON('book.json', function(){
                    //data 객체 지정
                    var books = data.book;
                    //데이터 순회
                    $(books).each(function(i, obj){
                        var title = obj.title;
                        var author = obj.author;
                        var price = obj.price;
                        var txt = "<li>" + title + ", " + author + ", " + price + "</li><hr>";
                        $('body').append(txt);
                    });
                });
            });
        </script>
    </body>
</html>
 
Colored by Color Scripter
cs

(줄 12) : data 객체는 json()에서 불러온 데이터이다. data 객체의 book 객체를 지정해 변수 book에 대입한다.
(줄 14) : each() 메소드로 book 객체에 포함된 내부 속성 값을 읽어와 출력한다. i는 book 객체의 배열 index 값이고, obj는 book 객체를 의미한다.

👋@Jess2

👩🏻‍💻Frontend Developer

GitHub Facebook LinkedIn