AJAX

Jay Mild Lee·2022년 10월 3일

web programming

목록 보기

4/9

🍺 개요

🍕 AJAX란?

AJAX란 비동기 JavaScript와 XML을 의미한다. 서버측과 다양한 형식(JSON, XML, HTML 및 일반 txt)의 정보를 주고 받을 수 있으며, AJAX의 특징은 페이지 전체를 새로고침하지 않더라도 최신 정보를 얻어내는 "비동기성"이다. 이러한 비동시성을 통해, 사용자 Event에 따라 일부분만을 업데이트할 수 있다.

🍺 jQuery를 이용한 AJAX 사용

🍕 XMLHttpRequest(XHR)

document.addEventListener('DOMContentLoaded',function(){
  alert("function called");
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://spartacodingclub.shop/sparta_api/weather/seoul', true);
  xhr.responseType='json';
  xhr.send();

  xhr.onload = function(){
    if(xhr.status == 200){
      alert("API is availabe");
      let tmp = document.querySelector('#title_temp');
      let city = xhr.response['city'];
      let temp = xhr.response['temp'];
      let msg = city + ' , ' + temp;
      while(tmp.firstChild){
        tmp.removeChild(tmp.firstChild);
      }
      tmp.append(msg);
    }
    else{
      alert("API is not available");
    }
  }
})

위 코드는 XHR을 활용한 예제로, API에서 서울의 날씨를 받아오는 함수이다. 위 코드를 조금씩 뜯어보면 다음과 같다.

1) DOM 트리 구성 확인

document.addEventListener('DOMContentLoaded',function(){
  alert("function called");
  ...
})

document의 상태가 'DOMContentLoaded'일 때, function을 호출한다. 이때 함수가 정상적으로 호출된 경우, "function called"라는 메세지가 출력된다.

1-1) addEventListener

	EventTarget.addEventListener(type, listener, option)

EventTarget : Event의 발생 여부를 확인할 대상을 설정한다. 코드 예제에서는 문서의 상태를 확인하기 위해 document로 설정하였으며, window를 대상으로 스크린에 따른 요소들의 크기를 변경하는 등의 기능에 사용되기도 한다.
type : target이 어떤 type일 때 listener가 실행될 지 결정한다. document의 경우 총 4가지 타입이 있는데 이는 다음과 같다.
1. DOMContentLoaded : DOM 트리(html 태그 등의 상위, 하위 트리 등)가 생성 완료된 경우 cf) CSS, img 등의 로딩은 포함하지 않음
2. load : 외부 자원이 로드된 후. cf) 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 알 수 있음
3. beforeunload : 사용자가 사이트를 떠나려 할 때
4. unload : 사용자 분석 정보를 담은 통계자료를 전송하려 할 때
listner : target의 type이 일치할 때 실행될 것들이 들어간다. 주로 handleEvent()나, javascript 함수가 들어간다.

2) XMLHttpRequest()

2-1) 생성 및 정보 받아오기

  var xhr = new XMLHttpRequest(); // 생성자
  xhr.open('GET', 'http://spartacodingclub.shop/sparta_api/weather/seoul', true);
  xhr.responseType='json';
  xhr.send();

XMLHttpRequest() : 생성자. XMLHttpRequest를 초기화한다.
XMLHttpRequest.open('type', 'url', true) : 방식('GET', 'POST', 'PUT' 등), 서버주소를 선택한다.
XMLHttpRequest.responseType = 'type' : 서버의 응답 유형을 지정한다.
XMLHttpRequest.send() = 서버에 요청을 전송한다.

2-2) XMLHttpRequest(): 오류 검증

xhr.onload = function(){
    if(xhr.status == 200){
      alert("API is availabe");
    }
  	else{
      alert("API is not available");
    }

XMLHttpRequest.onload : XMLHttpRequest 트랜잭션이 성공적으로 끝났을 때 true 반환
XMLHttpRequest.status : html 상태 코드를 반환함. (200: 요청이 성공적으로 반환됨. 201 : 요청이 성공적으로 반환되었으며 결과로 새로운 리소스가 생성됨)

2-3) jquery empty() -> vanilla js(깨알팁)

while(tmp.firstChild){
  tmp.removeChild(tmp.firstChild);
}

🍕 jQuery, AJAX 적용

// 1) DOM 트리 구성 확인
$(document).ready(function() {
  // 여기에 코드를 입력하세요
  $.ajax({
    // 2) XMLHttpRequest(): 생성 및 정보 받아오기
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
    data: {},
    // 3) XMLHttpRequest(): 오류 검증
    success: function(response) {
      $('#title_temp').empty();
      let tmp = '';
      let city = response['city'];
      let temp = response['temp'];
      tmp = `${city} , ${temp}도`
      $('#title_temp').append(tmp);
    }
  })
});