투케이2K

83. (Http/Ajax) 에이젝스 Http 요청 및 XML 형식 Response dataType 데이터 타입 지정 방법 본문

Http & Api

83. (Http/Ajax) 에이젝스 Http 요청 및 XML 형식 Response dataType 데이터 타입 지정 방법

투케이2K 2024. 12. 17. 19:51

[개발 환경 설정]

개발 툴 : Edit++

개발 기술 : Ajax

 

[소스 코드]

 

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

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

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






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

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






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


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

            // [URL 선언 실시]
            var urlData = "https://mocktarget.apigee.net/xml";


            console.log("");
            console.log("======================================================");
            console.log("[Http] : [request] : [http 요청 수행 실시]");
            console.log("-----------------------------------------");
            console.log("[urlData] : " + urlData);
            console.log("======================================================");
            console.log("");


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

                // [요청 시작 부분]               
                url: urlData, // 주소    
                type: "GET", // 전송 타입
                async: true, // 비동기 여부
                timeout: 5000, // 타임 아웃 설정
                dataType: "XML", // 응답받을 데이터 타입 (XML,JSON,TEXT,HTML)   
                cache : false, // 캐시 사용 여부            
                contentType: "application/x-www-form-urlencoded; charset=utf-8", // 헤더의 Content-Type을 설정
                                
                // [응답 확인 부분]
                success: function(response) {

                    // [XMLSerializer 사용해 XML Object 형식을 String 형식으로 변환 출력]
                    var oSerializer = new XMLSerializer();
                    var sXML = oSerializer.serializeToString(response);

                    console.log("");
                    console.log("======================================================");
                    console.log("[Http] : [response] : [Xml 파싱 확인]");
                    console.log("-----------------------------------------");
                    console.log("[xmlDoc] : " + sXML);
                    console.log("======================================================");
                    console.log(""); 

                },
                                
                // [에러 확인 부분]
                error: function(xhr) {
                    console.log("");
                    console.log("======================================================");
                    console.log("[Http] : [error] : [http 에러 결과 확인]");
                    console.log("-----------------------------------------");
                    console.log("[error] : " + xhr);
                    console.log("======================================================");
                    console.log("");                  
                },
                                
                // [완료 확인 부분]
                complete:function(data, textStatus) {
     
                }
            });

        }; 

        
    </script>
    
// --------------------------------------------------------------------------------------






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

======================================================
[Http] : [request] : [http 요청 수행 실시]
-----------------------------------------
[urlData] : https://mocktarget.apigee.net/xml
======================================================


======================================================
[Http] : [response] : [Xml 파싱 확인]
-----------------------------------------
[xmlDoc] : <?xml version="1.0" encoding="UTF-8"?><root><city>San Jose</city><firstName>John</firstName><lastName>Doe</lastName><state>CA</state></root>
======================================================

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

 

반응형
Comments