[Javascript] AJAX란 무엇인가?

Language/JavaScript

[Javascript] AJAX란 무엇인가?

gangintheremark 2023. 7. 12. 17:56

728x90

AJAX 란?

AJAX (Asynchronous Javascript And Xml)은 비동기식 자바스크립트와 xml라는 의미로 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 브라우저가 가지고 있는 XMLHttpRequest객체를 이용하여 전체 페이지를 새로고침없이 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

💡 동기 통신 vs 비동기 통신

동기 통신 : 웹 페이지를 새로고침하면서 데이터를 불러오는 방식

성능 저하 (사용자의 무한 대기 가능성有)
응답의 실체는 html 문서 👉 html 문서를 재랜더링

비동기 통신 : 웹 페이지를 새로고침 하지 않고도 데이터를 불러오는 방식

성능 향상
응답의 실체는 JSON 👉 html이 아니기 때문에 재랜더링 X

Ajax의 진행과정

user의 정보가 담긴 API에서 데이터 요청 후 table 형식으로 출력

<head>
    <script>
        var httpRequest = null;
        function req() {
              // XMLHttpRequest 객체 생성
            httpRequest = new XMLHttpRequest();

            // .onreadystatechange 이용하여 응답 시 처리하는 콜백함수 설정
            httpRequest.onreadystatechange = responseFunc;

            // 요청정보 설정
            var url = "https://reqres.in/api/users/2"; // user의 정보가 담긴 API 
            httpRequest.open("get", url, true);  // true이면 비동기처리, false이면 동기처리

            // 요청하기
            httpRequest.send(null); // get 방식이면 null 지정. 
        }
        // 응답시 처리하는 함수
        function responseFunc() { 
            // 요청이 성공인 경우에 처리 👉 readyState 값은 4, status 값은 200
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                // 서버에서 응답한 JSON 열기    
                var str = httpRequest.responseText;
                var json = JSON.parse(str); // 텍스트형식의 JSON을 객체로 변환
                var data = json.data;

                var id = data.id;
                var email = data.email;
                var first_name = data.first_name;
                var avatar = data.avatar;

                var table = `
              <table border=1>
                <tr>
                  <th> 아이디 </th>
                  <th> 이름 </th>
                  <th> 이메일 </th>
                </tr>
                <tr>
                  <td> ${id} </td>
                  <td> ${first_name} </td>
                  <td> ${email} </td>           
                </tr>
              </table>
              `;
              document.querySelector("#result").innerHTML = table;
            }
        } 
    </script>

</head>

<body>
    <button onclick="req()">데이터 불러오기</button>
    <div id="result"></div>
</body>

728x90