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

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : Ajax

 

---

[소스 코드]

​

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





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

        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. window.onload : 웹페이지 로드 완료 상태를 확인합니다
        -----------------------------------------
        2. DELETE 메서드는 지정된 리소스를 삭제합니다
        -----------------------------------------
        3. DELETE 메서드는 데이터를 삭제하는 것이기 때문에 HTTP 요청시에 Body 값과 Content-Type 값이 비워져있으며, URL을 통해서 어떠한 데이터를 삭제할지 파라미터를 받습니다
        -----------------------------------------
        4. 로직 : 
        서버는 DELETE API 생성 필요 >> 
        클라이언트가 DELETE 방식으로 서버에 요청 하면 >> 
        서버는 DB 데이터 DELETE 삭제 >> 
        삭제 성공 및 실패 결과를 >> 
        클라이언트로 반환
        -----------------------------------------
        */






        // [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: "DELETE", // 전송 타입
                async: true, // 비동기 여부
                timeout: 5000, // 타임 아웃 설정
                dataType: "TEXT", // 응답받을 데이터 타입 (XML,JSON,TEXT,HTML)   
                cache : false, // 캐시 사용 여부            
                contentType: null, // 헤더의 Content-Type을 설정
                data: null, // body 데이터 삽입
                                
                // [응답 확인 부분]
                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] : { }
=========================================


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

---