61. (Http/Ajax) get 방식 요청에 dataType jsonp 지정 및 Cross Origin Issue Pass

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : Ajax

 

---

[소스 코드]

 

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






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


        // =======================================================================
        // [요약 설명]
        // =======================================================================
        // JSONP (JSON with Padding) : HTML 의 script 요소로부터 요청되는 호출에 보안상 정책을 우회 할 수 있는 방법 입니다
        // ---------------------------------------------------------------------------------------
        // JSONP 는 ajax 요청 시 dataType 에 값을 지정할 수 있으며, Response 데이터가 text , json 타입 이어야 합니다
        // =======================================================================




        function aTagDownload(){
            console.log("");
            console.log("=========================================");
            console.log("[aTagDownload] : [start]");
            console.log("----------------------------------------");
            console.log("[설 명] : a 태그 생성 및 파일 다운 로드 실시");
            console.log("=========================================");
            console.log("");


            // [로직 처리 실시]
            try {

                $.ajax({

                    // [요청 시작 부분]               
                    url: "http://jsonplaceholder.typicode.com/posts?userId=1&id=1", // 주소 [온라인 json] 
                    type: "GET", // 전송 타입
                    async: true, // 비동기 여부
                    timeout: 10000, // 타임 아웃 설정

                    dataType: 'jsonp', // 데이터 타입 : Cross Origin Client Pass

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

                    xhrFields: { 
                        withCredentials: true // [credential 정보 전달 여부]
                    }, 

                    crossDomain: true, // [크로스 도메인 설정]

                    contentType: "application/x-www-form-urlencoded; charset=utf-8", // 헤더의 Content-Type을 설정
                                    
                    // [응답 확인 부분]
                    success: function(response) {
                        console.log("");
                        console.log("=========================================");
                        console.log("[aTagDownload] : [response] : [http 응답 결과 확인]");
                        console.log("-----------------------------------------");
                        console.log("[response] : " + JSON.stringify(response));
                        console.log("=========================================");
                        console.log("");   

                    },
                                    
                    // [에러 확인 부분]
                    error: function(xhr) {
                        console.log("");
                        console.log("=========================================");
                        console.log("[aTagDownload] : [error] : [http 에러 결과 확인]");
                        console.log("-----------------------------------------");
                        console.log("[error] : " + JSON.stringify(xhr));
                        console.log("=========================================");
                        console.log(""); 

                        // [에러 팝업창 표시]
                        alert("[aTagDownload] :: [Http] :: [Error] :: " + JSON.stringify(xhr));   


                    },
                                    
                    // [완료 확인 부분]
                    complete:function(data, textStatus) {     
                    }
                });

            }
            catch (error){

                // [에러 발생 내용 확인]
                console.error("");
                console.error("=========================================");
                console.error("[aTagDownload] : [Exception]");
                console.error("--------------------------------------");
                console.error("[all error] : " + error);
                console.error("--------------------------------------");
                console.error("[error stack] : " + error.stack);
                console.error("=========================================");
                console.error("");


                // [에러 팝업창 표시]
                alert("[aTagDownload] :: [Exception] :: " + error);

            }

        };


    </script>

---