75. (Http/XMLHttpRequest) XMLHttpRequest 사용해 GraphQL Mutation 방식 API 요청 및 응답 확인 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : XMLHttpRequest

 

---

[소스 코드]

​

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


        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. window.onload : 웹 페이지 로드 완료 시 호출 됩니다 (css , js 로드 완료)
        -----------------------------------------
        2. GraphQL 개념 학습 사이트 : https://blog.naver.com/kkh0977/223570768767
        -----------------------------------------
        3. 참고 사이트 : https://blog.naver.com/kkh0977/223600908810
        -----------------------------------------
        */



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


            // [주소 정의 실시]
            var REQ_URL = "https://graphql.postman-echo.com/graphql";


            // [데이터 전송 파라미터 정의]
            var REQ_PARAM = {
                "query" :"mutation CreatePerson {\n" +
                         "    createPerson(person: {name: \"Larry David\", age: 47}) {\n" +
                         "        age\n" +
                         "        id\n" +
                         "        name\n" +
                         "    }\n" +
                         "}"
            };


            // [요청 데이터 확인 실시]
            console.log("");
            console.log("======================================================");
            console.log("REQ_TYPE : " + "POST");
            console.log("-----------------------------------------");
            console.log("REQ_URL : " + REQ_URL);
            console.log("-----------------------------------------");
            console.log("REQ_PARAM : " + JSON.stringify(REQ_PARAM));
            console.log("======================================================");
            console.log("");


            // [HTTP 요청 수행 실시]
            var xhr = new XMLHttpRequest();
            xhr.open("POST", REQ_URL, true); // [전송 타입]
            xhr.setRequestHeader("content-type","application/json"); // [전송 헤더]


            xhr.onreadystatechange = function() { // [응답 콜백 확인]

                // [complete 완료 상태 인 경우]
                if (xhr.readyState == 4) { 

                    // [응답 상태 코드 확인 실시]
                    if (xhr.status == 200 || xhr.status == 201){
                        console.log("");
                        console.log("======================================================");
                        console.log("RES_STATUS : " + xhr.status);
                        console.log("-----------------------------------------");
                        console.log("RES_DATA : " + xhr.responseText);
                        console.log("======================================================");
                        console.log("");                    
                    }
                    else {
                        console.log("");
                        console.log("======================================================");
                        console.log("ERROR_STATUS : " + xhr.status);
                        console.log("-----------------------------------------");
                        console.log("ERROR_DATA : " + xhr.responseText);
                        console.log("======================================================");
                        console.log("");                       
                    }                   
                }               
            };

            xhr.send(JSON.stringify(REQ_PARAM)); // [HTTP 전송 수행]


        }; 

        
    </script>

 

---

[결과 출력]

 

======================================================
[WebFile] : [window onload] : [start]
======================================================


======================================================
REQ_TYPE : POST
-----------------------------------------
REQ_URL : https://graphql.postman-echo.com/graphql
-----------------------------------------
REQ_PARAM : {"query":"mutation CreatePerson {\n    createPerson(person: {name: \"Larry David\", age: 47}) {\n        age\n        id\n        name\n    }\n}"}
======================================================


======================================================
RES_STATUS : 200
-----------------------------------------
RES_DATA : {"data":{"createPerson":{"age":47,"id":"88","name":"Larry David"}}}
======================================================

---