15. (ajax/에이젝스) get query param 쿼리파람 new Object 사용해 데이터 전송 실시

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : ajax

---

[소스 코드]

​

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. new Object : json 형태로 데이터를 삽입할 수 있습니다
        3. object[key] = value 형식으로 쿼리파라미터 형식을 지정합니다       
        */


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

            // 이벤트 함수 호출 실시
            requestGet();

        };


        /* [ajax get 방식 이벤트 함수 정의] */       
        function requestGet(){
            console.log("");
            console.log("[requestGet] : [start]");         
            console.log("");

            // [요청 url 선언 : 주소 마지막에 [?] 물음표 필요]
            var reqURL = "http://localhost:7000/showText?";


            // [요청 데이터 선언]
            var param = new Object();
            param["file"] = "test.txt";


            // [요청 url + 쿼리파람 데이터 결합 실시]
            reqURL += $.param (
                param // 파라미터 객체 첨부
            );  
            
            console.log("");
            console.log("[requestGet] [request url] : " + reqURL);
            console.log("[requestGet] [request data] : " + JSON.stringify(param));
            console.log("[requestGet] [request method] : " + "GET");
            console.log("");
            
            $.ajax({
                // [요청 시작 부분]
                url: reqURL, // 주소
                type: "GET", // 전송 타입
                async: true, // 비동기 여부
                timeout: 10000, // 타임 아웃 설정 (1000 = 1초)
                dataType: "TEXT", // 응답받을 데이터 타입 (XML, JSON, TEXT, HTML, JSONP)              
                contentType: "application/x-www-form-urlencoded; charset=utf-8", // 헤더의 Content-Type을 설정
                                
                // [응답 확인 부분 - json 데이터를 받습니다]
                success: function(response) {
                    console.log("");
                    console.log("[requestGet] [response] : " + response);                    
                    console.log(""); 
                },
                                
                // [에러 확인 부분]
                error: function(xhr) {
                    console.log("");
                    console.log("[requestGet] [error] : " + xhr);
                    console.log("");  
                },
                                
                // [완료 확인 부분]
                complete:function(data,textStatus) {
                    console.log("");
                    console.log("[requestGet] [complete] : " + textStatus);
                    console.log("");                    
                }
            });                                 
        };     
                
    </script>

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. new Object : json 형태로 데이터를 삽입할 수 있습니다

3. object[key] = value 형식으로 쿼리파라미터 형식을 지정합니다

*/

---