HTML 파일 비동기 통신

ajax 비동기 통신을 사용하여 html 데이터 파일을 html요소인 main에 넣는 실습을 진행한다. 이번 실습은 SPA(single-page application)방식이다.

  • ajax 라이브러리를 이용해서 기존의 HMLHttpRepuest를 생성하고 .open(), .send()를 진행하는 긴 과정을 간소화하여 비동기 통신할 수 있다.

  • Dom 라이브러리로 각 요소들을 Dom 객체에 참조하여 Dom의 메소드를 사용한다.

  • Dom의 기능 뿐만 아니라 네이티브 메서드도 사용할 수 있다. 

;(function (global, $, ajax) {
  'use strict'

  /* Dom 객체에 참조 -------------------------------------- */
  var $links = $('nav a')
  var $main = $('main.content')

  /* 이벤트 핸들러 ----------------------------------------- */
  var ajaxCallHTML = function (e) {
    // 앵커 요소의 기본 링크 능력을 상실
    e.preventDefault()
    var href = this.getAttribute('href')
    
    /* 요소에 상태 클래스 추가/제 ----------------------------- */
    // 라이브러리가 메서드가 아닌 네이티브 메서드 사
    // 다른 앵커 요소를 클릭했을 때 이전에 클릭한 요소의 색상이 여전히 남아있지 않도록 한다.
    $links.each(function (link) {
      if (link.classList.contains('is-active')) {
        link.classList.remove('is-active')
      }
    })
    // 앵커 요소를 클릭했을 때 색상이 활성화 되로록 한다.
    this.classList.add('is-active')

    /* 비동기 통신 실행 ------------------------------------- */
    // ajax 비동기 통신 수행
    // typeof data는 string
    ajax.get(href).then(function (data) {
      $main.html(data)
    })
  }

  /* 앵커 요소 순환 및 이벤트 바인딩 ---------------------------- */
  $.each($links, function (link, index) {
    // eq() : $link를 개별적으로 출력
    // Dom 객체가 각가의 앵커 요소를 출력
    var $link = $links.eq(index)
    $link.on('click', ajaxCallHTML)
  })
})(window, Dom, ajax)

사용된 jQuery 메서드 (확인하기)

  • jQuery.each( array, callback )

  • .each(function)

  • .eq(index)

  • .get(index)

  • .html()

PreviousAjax 비동기 통신NextXML 파일 비동기 통신

Last updated