Programmer's Progress

Ajax를 이용한 XML 데이터 Binding 하기 본문

JavaScript + JQuery/Self Learning

Ajax를 이용한 XML 데이터 Binding 하기

Blanc et Noir 2021. 2. 9. 15:30

Binding이란 비동기 통신 기술을 이용해서 DB에 데이터를 요청하고 이를 받아서 HTML 태그에 결합하는 것이다.

나는 이전에 Ajax를 이용해서 JSON 데이터를 HTML 태그에 결합시키는 Binding 하는 방법을 공부했었다.

이번에는 DB에서 XML데이터를 요구해서 전달받은 이후의 과정은 완료됐다는 가정하에 Binding 하는 것을 배웠다.

 

JSON(JavaScript Object Notation) 형식의 경우 JavaScript에서 객체를 리터럴 형식으로 생성한 것과 마찬가지로

각각의 Key와 이에 대응하는 Value값을 나열한 객체 표기법이다.

 

반면에 XML(Extensible MarkUp Language) 형식은 앞서 말했듯이 데이터를 구조적이고 체계적으로 나타내는 데에 중점을 둔 것이 특징이다. 이러한 특성은 Tag의 이름을 사용자 임의대로 정할 수 있기 때문에 가능한 것인데, 아래의 XML소스코드를 보면 이를 잘 알 수 있다.

 

XML : Source Code

<record>
    <id>1</id>
    <first_name>Marga</first_name>
    <last_name>Boldero</last_name>
    <email>mboldero0@wikispaces.com</email>
    <gender>Female</gender>
</record>
<record>
    <id>2</id>
    <first_name>Toddy</first_name>
    <last_name>Colkett</last_name>
    <email>tcolkett1@amazon.de</email>
    <gender>Female</gender>
</record>

 

JSON : Source Code

[
    {
        "id" : "1",
        "first_name" : "Marga",
        "last_name" : "Boldero",
        "email" : "mboldero0@wikispaces.com",
        "gender" : "Female"
    },
    {
        "id" : "2",
        "first_name" : "Toddy",
        "last_name" : "Colkett",
        "email" : "tcolkett1@amazon.de",
        "gender" : "Female"
    }
]

XML과 JSON형식의 데이터의 차이는 태그 형식으로 구성되어있느냐 배열 객체처럼 구성되어있느냐의 차이다.

여기서 XML의 특징을 엿볼 수 있는데, 태그의 이름이 HTML에서는 볼 수 없는 사용자 임의 태그로 구성되어있다.

태그의 이름이 태그 내부의 문자열과 연관성이 있기에 데이터를 구조적이고 체계적으로 나타내는데 좋다.

반면 JSON의 경우 각 객체마다 Key와 Value로 구성된 세트가 여럿 존재함을 알 수 있다.

 

JavaScript : Source Code

$.each(arr,function(index, obj){
    $("#wrapper table").append("<tr></tr>");
    $("#wrapper table tr").eq(index).append("<td>"+obj.number+"</td>");
});

JavaScript에서 Ajax로 이들 데이터를 처리할 때 주의할 점이 있는데, JSON형식의 경우 Key값이 존재하기 때문에 위와 같이 obj 객체의 Key값처럼 사용할 수 있지만, XML은 태그 형식을 취하고 있기 때문에 이렇게 처리할 수 없다.

 

HTML : Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="ajax - 3.css">
    <script src="../../../JQUERY/jquery.js"></script>
    <script src="../../../JQUERY/jquery-ui.js"></script>
    <script src="ajax - 3.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="wrapper"></div>
</body>
</html>

 

CSS : Source Code

table{
    border-collapse: collapse;
}
th{
    background-color: #ccc;
}
tr:nth-of-type(2n){
    background-color: #eee;
}

 

JavaScript : Source Code

$(document).ready(function(){
    $.ajax({
        "url" : "dataBase.xml",
        "dataType" : "xml",
        "success" : function(dataBase){
            var data = $(dataBase).find("record");
            var tr = $("<tr />").append($("<th />").text("ID"),$("<th />").text("First name"),$("<th />").text("Last name"),$("<th />").text("Email"),$("<th />").text("Gender"));
            var tb = $("<table />").append(tr);
            $("#wrapper").append(tb);
            $.each(data,function(index,obj){
                var id = $(obj).find("id").text();
                var firstName = $(obj).find("first_name").text();
                var lastName = $(obj).find("last_name").text();
                var email = $(obj).find("email").text();
                var gender = $(obj).find("gender").text();
                tr = $("<tr />");
                tr.append($("<td />").text(id),$("<td />").text(firstName),$("<td />").text(lastName),$("<td />").text(email),$("<td />").text(gender));
                tb.append(tr);
            });
        },
        "error" : function(){
            alert("Error has occurred");
        },
        "complete" : function(){
            alert("Binding has been completed")
        }
    });
});

 

위의 소스코드처럼 XML 파일의 객체 간 구분 태그인 <record> 태그를 find( ) 선택자를 이용해 전부 선택한 다음

each( ) 메서드를 통해, 인덱스 0 ~ 1000까지 반복하며 각 <recode> 태그의 하위 태그들의 text( ) 값을 임시 저장하고

이를 <td> 태그 생성과 동시에 text( )를 설정하고 append( )한다.

 

Ajax를 이용한 비동기 방식 통신으로 XML데이터를 HTML태그에 Binding한 모습

 

JSON이라고 생각하면 쉽게 JavaScript와 JQuery를 이용해 처리할 수 있는 반면

XML 데이터를 다룰 땐 JSON과 달리 태그처럼 생각하고 처리해줘야 한다는 게 생각보다 손에 잘 익지 않았다.

 

이번 공부를 통해 글로만 배웠던 XML를 좀 더 잘 이해하고, 사용할 수 있게 되었다.

 

저작자표시 (새창열림)

'JavaScript + JQuery > Self Learning' 카테고리의 다른 글

랜덤 미로 생성 및 출력하기  (0) 2021.05.26
Ajax 를 이용한 교차 도메인 XML 데이터 Binding 하기  (0) 2021.02.10
Ajax를 이용한 컴퓨터활용능력 실기 합격자 명단 출력하기  (0) 2021.02.08
포트폴리오 레이아웃 One Page Scroll  (0) 2021.02.06
Vertical 네비게이터 구현하기  (0) 2021.02.05
'JavaScript + JQuery/Self Learning' Related Articles more
Comments