rustandbone Developer

이듬 강의_비동기 프로그래밍(AJAX)

22 Jul 2023

비동기 프로그래밍(AJAX)

ajax 심플 라이브러리

let xhr = new XMLHttpRequest();
//비동기통신 설정
xhr.open('GET', '../data/ajax-desc.txt');

//서버에서 응답이 올 경우, 이벤트를 감지하여 처리하는 이벤트 핸들링 설정
xhr.onreadystatechange = function() {
  //통신 요청에 따른 응답이 오면 처리(비동기)
  if((xhr.status === 200 || xhr.status === 304) && xhr.readyState === 4) {
    console.info:(xhr.status, xhr.readyState)
    //readyState 0 : Uninitialized, 1 : Loading, 2 : Loaded, 3 : Interactive, 4 : Complete
    print_area.textContent = xhr.responseText;
  } else {
    console.warn('통신 실패');
  }
}

call_btn.addEventListener('click', ajaxDemo);
call_btn.addEventListener('click', function() {
  ajax({
    url: '../data/ajax-desc.txt',
    dataType: 'text'
  }).then(function(data) {
    print_area.textContent = data;
  })
  })

(function (global, $, ajax) {
  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
    ajax.get(href).then(function (data) {
      $main.html(data);
    });
  };
  $.each($links, function (link, index) {
    var $link = $links.eq(index);
    $link.on("click", ajaxCallHTML);
  });
})(window, Dom, ajax);

  • XML 가져오기

    • 구조 복잡
    • 잘 사용하지 않음

  • JSON

    • 원시형, 객체 배열 사용 가능, “” 사용해야 함
    • 함수 사용은 안됨
    • 자바스크립트 객체 모양(string)이므로 가져와서 사용할 수 있음
    • JSON.parse() : 문자열을 객체화
    • JSON.stringify() : 객체를 문자화
ajax.get = function (url) {
  return new Ajax({
    url: url,
    method: "GET",
    dataType: checkFileExtension(url),
  });
};

ajax.post = function (url, data) {
  return new Ajax({
    url: url,
    method: "POST",
    body: data,
    dataType: "json",
    headers: { "Content-type": "application/json; charset=UTF-8" },
  });
};

ajax.put = function (url, data) {
  return new Ajax({
    url: url,
    method: "PUT",
    body: data,
    dataType: "json",
    headers: { "Content-type": "application/json; charset=UTF-8" },
  });
};

ajax.delete = function (url) {
  return new Ajax({
    url: url,
    method: "DELETE",
  });
};

Related posts