Written by 최태열
on January 17, 2021

Ajax란?

동기와 비동기

동기

화면 자체가 변경이 되는 갱신
하나의 동작이 실행될 때 까지 다른 동작을 수행할 수 없다.
페이지 이동, 로그인

비동기

페이지 변경 없이 그 상태에서 변화가 일어난다.
입력이 지속되는 중에 응답도 지속된다.
검색창에 글자가 바뀔 때마다 자동 완성이 실시간으로 바뀌는 것

Ajax

Ajax(Asynchronous Javascript And Xml) 란?

비동기 기능을 수행할 수 있게 도와주는 JavaScript의 라이브러리다.

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부 만을 위한 데이터를 로드하는 기법이다.

즉, Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다.

XML이외에도 Json 과 같은 데이터 포멧을 사용할 수도 있다.

기본 코드

<div id="demo"></div>

<button onclick="loadDoc()">비동기</button>

<script>

    //버튼 클릭시 실행되면서 서버에 요청 및 응답 받아와서 화면에 출력
    function loadDoc() {

        //ajax 비동기 요청, 응답 객체
        //브라우저 내부에 js 코드상에서 사용 가능한 js 객체
        var xhttp = new XMLHttpRequest();

        /* 
        1. onreadystatechange 
            - 브라우저와 서버간에 요청 시작~진행중~응답시작~완료까지를 감지하는 이벤트 핸들러 속성
            - 요청~응답 상태가 변화되는 겂을 감지
            : readyState 상태값 변경 감지로 간주 

        2. readyState
             1 : 요청시작 / 2 : 요청 진행 / 3 : 응답 시작 / 4 : 응답 완료

        3. status
            응답 상태값을 보유하게 되는 속성
            200 : 정상 응답
            404 : 요청 url 자원이 없을 경우 
            500 : 서버 문제 

        4. responseText
            - 서버가 응답하는 XML 포멧을 제외한 모든 데이터를 받는 속성
        
        5. responseXML
            - 서버가 응답하는 XML 포멧만 받는 속성 
            
        */
        xhttp.onreadystatechange = function () {

            //정상 응답인 경우를 filtering 하는 조건식 
            if (this.readyState == 4 && this.status == 200) {
                let data = this.responseText;

                alert(data);
                console.log(data);
                console.log(typeof (data));

                data = JSON.parse(data);

                document.getElementById("demo").innerHTML = data.name;
            }
        };
        //서버 요청 방식과 실행 프로그램명 지정, true :비동기 의미            
        xhttp.open("GET", "response.jsp", true);
        //실제 서버에 요청
        xhttp.send();
    }

</script>

response.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
{"name" : "유재석"}

Discussion and feedback

← → Top