42. (Http/Ajax) PUT 방식 http 요청 수행 및 response 응답 결과 확인 실시

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : Ajax

 

---

[소스 코드]

​

    <!-- [CDN 설정 실시] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>





    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->
    <script>
    	

        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. window.onload : 웹페이지 로드 완료 상태를 확인합니다
        -----------------------------------------
        2. PUT 메소드는 리소스를 생성 및 업데이트하기 위해 서버로 데이터를 보내는 데 사용됩니다
        -----------------------------------------
        3. 클라이언트는 PUT 요청시 Body 에 Json 데이터를 설정 및 Content-Type 에 application json 을 지정해야합니다
        -----------------------------------------
        4. 로직 : 
        서버는 PUT API 생성 필요 >> 
        클라이언트가 PUT 방식으로 서버에 요청 하면 >> 
        서버는 DB 데이터 UPDATE 수정 >> 
        수정 성공 및 실패 결과를 >> 
        클라이언트로 반환
        -----------------------------------------
        */






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


            // [테스트 함수 호출]
            testMain();
        };





        // [자바스크립트 테스트 코드]
        function testMain(){
        	console.log("");
            console.log("=========================================");
            console.log("[testMain] : [start]");
            console.log("=========================================");
            console.log("");


            // [URL 선언 실시]
            var urlData = "https://jsonplaceholder.typicode.com/posts/1";


            // [Ajax 요청 수행 실시]
            $.ajax({

                // [요청 시작 부분]               
                url: urlData, // 주소    
                type: "PUT", // 전송 타입
                async: true, // 비동기 여부
                timeout: 5000, // 타임 아웃 설정
                dataType: "TEXT", // 응답받을 데이터 타입 (XML,JSON,TEXT,HTML)   
                cache : false, // 캐시 사용 여부            
                contentType: "application/json; charset=UTF-8", // 헤더의 Content-Type을 설정
                data: JSON.stringify({ // body 데이터 삽입
                    id: 1,
                    title: 'foo',
                    body: 'bar',
                    userId: 1,
                }),
                                
                // [응답 확인 부분]
                success: function(response) {
                    console.log("");
                    console.log("=========================================");
                    console.log("[testMain] : [response] : [http 응답 결과 확인]");
                    console.log("-----------------------------------------");
                    console.log("[response] : " + response);
                    console.log("=========================================");
                    console.log("");                
                },
                                
                // [에러 확인 부분]
                error: function(xhr) {
                    console.log("");
                    console.log("=========================================");
                    console.log("[testMain] : [error] : [http 에러 결과 확인]");
                    console.log("-----------------------------------------");
                    console.log("[error] : " + xhr);
                    console.log("=========================================");
                    console.log("");                  
                },
                                
                // [완료 확인 부분]
                complete:function(data, textStatus) {
                    console.log("");
                    console.log("=========================================");
                    console.log("[testMain] : [complete] : [http 완료 상태 확인]");
                    console.log("-----------------------------------------");
                    console.log("[status] : " + textStatus);
                    console.log("=========================================");
                    console.log("");        
                }
            });

        };  


    </script>

 

---

[결과 출력]

 

=========================================
[window onload] : [start]
=========================================


=========================================
[testMain] : [start]
=========================================


=========================================
[testMain] : [response] : [http 응답 결과 확인]
-----------------------------------------
[response] : {
  "id": 1,
  "title": "foo",
  "body": "bar",
  "userId": 1
}
=========================================


=========================================
[testMain] : [complete] : [http 완료 상태 확인]
-----------------------------------------
[status] : success
=========================================

---

​