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)
Last updated
Was this helpful?