26. (ajax/에이젝스) ajax http request 요청 시 cache 캐시 초기화 방법

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : ajax

 

---

[소스 코드]

​

    <!-- [라이브러리 CDN 등록 실시] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    




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


        /**
         * --------------------------------
         * [요약 설명]
         * --------------------------------
         * 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
         * --------------------------------
         * 2. $.ajax() : 비동기식 Ajax를 이용하여 HTTP 요청을 전송합니다 (가장 흔히 사용)
         * --------------------------------
         * 3. ajax http request 요청 시 캐시 초기화 방법
         * 
         * - request 요청 시 파라미터에 랜덤 값을 삽입해서 요청 실시 (타임 스탬프 사용)
         * 
         * - ajax 옵션에서 cache 값 false 설정
         * --------------------------------
        */


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

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



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

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

            // [1]. [초기 주소 설정 실시]
            var urlData = "http://jsonplaceholder.typicode.com/posts?";

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

            // [2]. [전송 파라미터 삽입 실시 : ?date=타임스탬프]
            var reqParam = new Object();
            reqParam["userId"] = 1;
            reqParam["id"] = 1;

            let timeStamp = Date.now(); // [현재 날짜 및 시간 밀리세컨드 타임 스탬프 값 파라미터 추가]
            reqParam["realDateTimeStamp"] = String(timeStamp);

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

            // [3]. [요청 url + 쿼리파람 데이터 결합 실시]
            urlData += $.param (
                reqParam
            ); 
            console.log("");
            console.log("=========================================");
            console.log("[testMain] : [request] : [http 요청 정보 확인]");
            console.log("-----------------------------------------");
            console.log("[urlData] : " + urlData);
            console.log("=========================================");
            console.log("");

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

            // [4]. [ajax 요청 실시 : post query string]
            $.ajax({

                // [요청 시작 부분]               
                url: urlData, // 주소    
                type: "POST", // 전송 타입
                async: true, // 비동기 여부
                timeout: 5000, // 타임 아웃 설정
                dataType: "TEXT", // 응답받을 데이터 타입 (XML,JSON,TEXT,HTML)   

                cache : false, // 캐시 사용 여부            

                contentType: "application/x-www-form-urlencoded; charset=utf-8", // 헤더의 Content-Type을 설정
                                
                // [응답 확인 부분]
                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>

 

---

[결과 출력]

​

---