[JavaScript] XHR

Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

승띵이의 개발일지

[JavaScript] XHR 본문

언어/JavaScript

[JavaScript] XHR

승띵이 2022. 11. 1. 17:55

Ajax

Ajax(Asynchronous Javascript ans XML)은 비동기적으로 자바스크립트를 이용해서 서버와 브라우저가 통신하는 방식이다.

비동기적이란 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식을 말한다.

JS에서 Ajax를 사용하기 위해 XMLHttpRequest 객체를 사용한다.

XHR 표준

XHR 표준은 아래와 같다. 이 로직은 아주 아주 자주 쓰인다고 하니 눈 감고도 쓸 수 있도록 외워야지

const xhr = new XMLHttpRequest();
const formData = new Formdata(); // 요청 시 같이 보낼 데이터(데이터가 없으면 상관 x)
xhr.open('요청 방식', '요청 주소'); //요청을 보낼 준비 과정
xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if(xhr.status >= 200 && xhr.status < 300) {
            //요청 성공 로직 구현

        } else {
            //요청 실패 로직 구현
        }
    }
};
xhr.send(formData); //찐 요청

XHR 예제

XHR 은 다음과 같이 활용할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>XHR Example</title>
</head>
<body>
<input>
<br>
<b id="ipVal">IP 주소가 여기 표시됩니다.</b>
<br>
<button id="ipBtn">IP 주소 가져오기</button>
<script>
  window.document.getElementById('ipBtn').addEventListener('click', () => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.ipify.org'); //현재 ip를 알려주는 사이트
    xhr.onreadystatechange = () => {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        ipBtn.removeAttribute('disabled');  //XMLHttpRequest.DONE 이 되면 비활성화 속성을 삭제한다.
        if (xhr.status >= 200 && xhr.status < 300) {
          window.document.getElementById('ipVal').innerText = xhr.responseText; //요청 성공 시 ipVal 을 xhr 의 텍스트로 변경한다. 
        } else {
          ipVal.innerText = '오류'; //실패 시 ipVal 에 "오류"라고 텍스트를 변경한다.
        }
      }
    };
    xhr.send();
    ipVal.innerText = '잠시만 기다려 주세요.'; //XMLHttpRequest.DONE 이 되기 전까지 해당 텍스트로 변경. 얘가 먼저 된다.
    ipBtn.setAttribute('disabled', 'disabled'); //XMLHttpRequest.DONE 이 되기 전까지 버튼을 비활성화 한다.

  });
</script>
</body>
</html>

궁금한 점

setAttribute() 의 파라미터는 setAttribute('속성명', '속성값') 으로 이루어 진다는데 '속성값' 파라미터에 뭘 적든 간에 removeAttribute('disabled')가 이상없이 실행되었다. 하지만 '속성명' 파라미터를 변경하면 disabled 속성이 나타나지 않는 현상이 발생했다.

내가 생각하기로는 키:값 형태로 이루어져서 뒤의 '속성명' 은 그냥 속성명이고, '속성값' 이 진짜 속성이라고 생각했어서 왜 속성값에 쓰레기 문자를 넣어도 '속성명'을 받는지 이해가 되지 않네..

++ 해결

JS 에서 setAttribute() 메서드는 속성명과 속성값을 매개변수로 받지만 '속성명'을 속성 그 자체로 받는다고 한다. 두번째 매개변수인 '속성값'은 setAttribute() 메서드에서 뺄 수 없는 세트라서 그냥 넣는다고 이해하면 된다고 한다. 그래서 보통 '속성명'에 진짜 속성을 주고, '속성값'에는 알아보기 쉽게 '속성명'과 같은 값을 넣는다고 한다.

쉽게 생각해서 '속성명'이 찐 속성이고 '속성값' 파라미터는 어쩔수 없이 따라오는 놈 이라고 생각할라고