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

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : fetch

 

---

[소스 코드]

 

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

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

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






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

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


      /*
      -----------------------------------------
      [요약 설명]
      -----------------------------------------
      1. window.onload : 웹 페이지 로드 완료 시 호출 됩니다 (css , js 로드 완료)
      -----------------------------------------
      2. PUT 메소드는 리소스를 생성 및 업데이트하기 위해 서버로 데이터를 보내는 데 사용됩니다
      -----------------------------------------
      3. 클라이언트는 PUT 요청시 Body 에 Json 데이터를 설정 및 Content-Type 에 application json 을 지정해야합니다
      -----------------------------------------
      */



      // [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";


          // [데이터 전송 파라미터 정의]
          var REQ_PARAM = {
              id: 1,
              title: 'foo',
              body: 'bar',
              userId: 1
          };


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


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

          xhr.open("PUT", REQ_URL, true); // [전송 타입]
          
          xhr.setRequestHeader("content-type","application/json; charset=UTF-8"); // [전송 헤더]

          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(JSON.stringify(REQ_PARAM)); // [HTTP 전송 수행]

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

      
  </script>

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






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

======================================================
REQ_TYPE : PUT
-----------------------------------------
REQ_URL : https://jsonplaceholder.typicode.com/posts/1
-----------------------------------------
REQ_PARAM : {"id":1,"title":"foo","body":"bar","userId":1}
======================================================


======================================================
RES_STATUS : 200
-----------------------------------------
RES_DATA : {
  "id": 1,
  "title": "foo",
  "body": "bar",
  "userId": 1
}
======================================================

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

---