XML 파일 비동기 통신

XML 파일을 비동기 통신 하여 브라우저에 불러오는 실습을 한다.

  • [].map.call() → $.map()으로 변경 

  // json 실습에서 사용할 수 있도록 Dom.js에 함수 추가
  Dom.map = function (list, callback) {
    return [].map.call(list, callback)
  }
;(function (global, $, ajax) {
  'use strict'

  var $menu = $('.ediya-menu')

  ajax.get('/data/ediya-menu.xml').then(function (xmlDoc) {
    // XML -> 데이터 추출
    var names = xmlDoc.querySelectorAll('name')
    names = $.map(names, function (name) {
      return name.textContent
    })
    var widths = xmlDoc.querySelectorAll('width')
    widths = $.map(widths, function (width) {
      return width.textContent
    })
    var heights = xmlDoc.querySelectorAll('height')
    heights = $.map(heights, function (height) {
      return height.textContent
    })
    var kos = xmlDoc.querySelectorAll('ko')
    kos = $.map(kos, function (ko) {
      return ko.textContent
    })
    var ens = xmlDoc.querySelectorAll('en')
    ens = $.map(ens, function (en) {
      return en.textContent
    })
    var descs = xmlDoc.querySelectorAll('desc')
    descs = $.map(descs, function (desc) {
      return desc.textContent
    })
    var display = xmlDoc.querySelectorAll('display-criteria')
    display = $.map(display, function (criteria) {
      var items = criteria.querySelectorAll('item')
      var keyMaps = $.map(items, function (item) {
        var key = item.querySelector('key').textContent
        var value = item.querySelector('value').textContent
        return [key, value]
      })
      return keyMaps
    })

    // 추출한 데이터 -> 템플릿 바인딩
    var template = $.template(names, function (name, i) {
      var templ =
        '\
        <li class="ediya-menu__item">\
          <a href="#">\
            <figure>\
              <img src="https://raw.githubusercontent.com/yamoo9/assets/master/images/ediya/' +
        names[i] +
        '.png" alt width="' +
        widths[i] +
        '" height="' +
        heights[i] +
        '">\
              <figcaption>' +
        kos[i] +
        '</figcaption>\
            </figure>\
          </a>\
          <div hidden class="ediya-menu__item--detail">\
              <strong class="ediya-menu__item--name">' +
        kos[i] +
        '<span lang="en">' +
        ens[i] +
        '</span></strong>\
              <p>' +
        descs[i] +
        '</p>\
              <div class="ediya-menu__item--multi-column is-2"><p>\
        '

      templ += $.template(display, function (item, index) {
        if (i === index) {
          return $.template(item, function (it) {
            var key = it[0]
            var value = it[1]
            return '<span>' + key + '<b>(' + value + ')</b></span>'
          })
        }
      })

      templ +=
        '</p></div><button type="button" class="button is-close-panel" aria-label="아이템 소개 패널 닫기">×</button></div></li>'

      return templ
    })

    $menu.html(template)
  })
})(window, Dom, ajax)
// var template = '\
//                 <li class="ediya-menu__item">\
//                   <a href="#">\
//                     <figure>\
//                       <img src="https://raw.githubusercontent.com/yamoo9/assets/master/images/ediya/'+ name +'.png" alt width="'+ width +'" height="'+ height +'">\
//                       <figcaption>'+ ko +'</figcaption>\
//                     </figure>\
//                   </a>\
//                   <div hidden class="ediya-menu__item--detail">\
//                       <strong class="ediya-menu__item--name">'+ ko +'<span lang="en">'+ en +'</span></strong>\
//                       <p>'+ desc +'</p>\
//                       <div class="ediya-menu__item--multi-column is-2"><p>\
//                 ';

// template += _.template(display, function(item){
//   return '<span>'+ item[0] +'<b>('+ item[1] +')</b></span>';
// });

// template += '</p></div><button type="button" class="button is-close-panel" aria-label="아이템 소개 패널 닫기">×</button></div></li>';

XML을 사용하지 않는 이유

XML파일의 태그는 사용자가 정의하여 임의로 작성할 수 있다. 그리고 파일의 중첩도 높아질 수록 데이터를 가져오는 것이 여간 힘들 일이 아니다 (물론 라이브러리를 만들면 가능하다.) 그렇기 때문에 최근에는 XML을 사용하지 않고 이보다 더 간편하게 만들 수 있는 json을 사용한다.

PreviousHTML 파일 비동기 통신NextJSON 파일 비동기 통신

Last updated