82. (Http/XMLHttpRequest) XMLHttpRequest 사용해 delete 방식 HTTP 요청 수행 및 응답 상태 확인

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : fetch

 

---

[소스 코드]

 

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[소스 코드]
// --------------------------------------------------------------------------------------

  <!-- ===================================================================================================== -->
  <!-- [자바스크립트 코드 지정] -->
  <!-- ===================================================================================================== -->
  <script>


      /*
      -----------------------------------------
      [요약 설명]
      -----------------------------------------
      1. window.onload : 웹 페이지 로드 완료 시 호출 됩니다 (css , js 로드 완료)
      -----------------------------------------
      2. DELETE 메서드는 지정된 리소스를 삭제합니다
      -----------------------------------------
      3. DELETE 메서드는 데이터를 삭제하는 것이기 때문에 HTTP 요청시에 Body 값과 Content-Type 값이 비워져있으며, URL을 통해서 어떠한 데이터를 삭제할지 파라미터를 받습니다
      -----------------------------------------
      */



      // [html 최초 로드 및 이벤트 상시 대기 실시] 
      window.onload = function() {
          console.log("");
          console.log("======================================================");
          console.log("[WebFile] : [window onload] : [start]");
          console.log("======================================================");
          console.log(""); 


          // [주소 정의 실시]
          var REQ_URL = "https://jsonplaceholder.typicode.com/posts/1";


          // [요청 데이터 확인 실시]
          console.log("");
          console.log("======================================================");
          console.log("REQ_TYPE : " + "DELETE");
          console.log("-----------------------------------------");
          console.log("REQ_URL : " + REQ_URL);
          console.log("======================================================");
          console.log("");


          // [HTTP 요청 수행 실시]
          var xhr = new XMLHttpRequest();

          xhr.open("DELETE", REQ_URL, true); // [전송 타입]

          xhr.onreadystatechange = function() { // [응답 콜백 확인]

              // [complete 완료 상태 인 경우]
              if (xhr.readyState == 4) { 

                  // [응답 상태 코드 확인 실시]
                  if (xhr.status == 200 || xhr.status == 201){
                      console.log("");
                      console.log("======================================================");
                      console.log("RES_STATUS : " + xhr.status);
                      console.log("-----------------------------------------");
                      console.log("RES_DATA : " + xhr.responseText);
                      console.log("======================================================");
                      console.log("");                    
                  }
                  else {
                      console.log("");
                      console.log("======================================================");
                      console.log("ERROR_STATUS : " + xhr.status);
                      console.log("-----------------------------------------");
                      console.log("ERROR_DATA : " + xhr.responseText);
                      console.log("======================================================");
                      console.log("");                       
                  }                   
              }               
          };

          xhr.onabort = function() {
              console.log("");
              console.log("======================================================");
              console.log("ERROR_ABORT : " + xhr.abort);
              console.log("======================================================");
              console.log("");    
          };

          xhr.send(null); // [HTTP 전송 수행]

          setTimeout(() => { xhr.abort() } , 5000); // [밀리 세컨드 단위 타임 아웃 값 지정] : 타임아웃 발생 시 xhr.onabort 호출 됨
      }; 

      
  </script>
    
// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[결과 출력]
// --------------------------------------------------------------------------------------

======================================================
REQ_TYPE : DELETE
-----------------------------------------
REQ_URL : https://jsonplaceholder.typicode.com/posts/1
======================================================


======================================================
RES_STATUS : 200
-----------------------------------------
RES_DATA : {}
======================================================

// --------------------------------------------------------------------------------------

---