Day05_AJAX

📌 01. AJAX란?

---

AJAX란 자바스크립트를 이용한 백그라운드 비동기 통신 기술이다.
말이 어렵지만 쉽게 이해하면
전체 페이지를 새로고침 하는게 아닌 일부 페이지만을 새로고침 하는 기법이다.

예시로 아이디 중복체크가 있다.
회원가입을 할때 보통 아이디 중복체크를 하는 단계가 있다.
만약 사용자가 아이디를 적고 중복체크 버튼을 눌렀을때
전체 페이지가 새로고침 된다면 입력란에 적어두었던 아이디가 사라질 것이다.
이렇게 된다면 중복되는 아이디가 없더라도 중복체크를 할때마다
계속해서 적어두었던 입력값이
초기화 되기 때문에 문제가 발생한다.
이럴때 사용하는 것이 AJAX기술이다.

📌 02. AJAX의 원리

---

AJAX는 처음에 기능을 수행할수 있는 파일(서버)을 호출해서 데이터를 생성하고
해당 데이터를 콜백 메서드를 통하여 받는다.
여기서 서버는 jsp, servlet등이 될 수 있다.

📌 03. AJAX의 사용준비

---

AJAX를 원활히 사용하기 위해선 그에 맞는 기능을 제공하는 Object의 인스턴스가 필요하다.
해당 인스턴스는 직접 만들기보단 만들어져 있는 파일을 가져와서
스크립트 영역에 사용을 위한 준비만 해주는 것이 편하다.

📌 04. AJAX의 사용 예시

---

구구단의 예시이다.
구구단의 단수를 입력하면 해당 단을 전부 출력하는 예시이다.
먼저 AJAX를 원활히 사용하기 위한 준비를 한다.

    <script src = "js/httpRequest.js"></script>

httpRequest.js는 위에서 말했던 인스턴스이다.
해당 스크립트는 AJAX사용하기 위한 변수, 메서드 등이 담겨있다.

        function send() {
            var dan = document.getElementById("dan").value;

            var url = "gugudan_ajax.jsp";
            var param = "dan="+dan;

            sendRequest( url, param, resultFn, "GET");
        }

"dan"이라는 id를 가진 input태그의 입력값을 가져온 것이다.
여기서 httpRequest스크립트에 있는 sendRequest 메서드를 호출한다.
sendRequest 메서드는 4개의 인자를 전달받는다.
여기서 resultFn은 콜백메서드 이름이다.

해석하자면

1. gugudan_ajax.jsp란 서버에
2. dan이라는 파라미터를 가지고 가서 기능을 수행하고
3. resultFn이라는 콜백메서드로 복귀해라
4. 여기서 파라미터를 보내는 방식은 "GET"으로 수행하라

다음은 콜백메서드이다.

function resultFn(){
    if(xhr.readyState == 4 && xhr.status == 200) {
        var data = xhr.response;
        document.getElementById("disp").innerHTML = data;
    }
}

sendRequest메서드는 최종적으로 xhr이라는 변수를 리턴한다.
xhr은 null값으로 선언이 되어있고 sendRequest메서드가 호출되면서 그 값이 변하게 된다.

xhr.readyState & xhr.status

xhr.readyState는 0에서 4사이의 값을 가진다.
// 0 : 초기화 오류
// 1,2,3 : 로딩중
// 4 : 콜백메서드 로드 완료
xhr.status 200,404,500의 값을 가진다.
// 200 : 이상 없음
// 404,500 : 이상 있음
즉 위 if문의 조건식은
" 콜백메서드를 호출하는 중에 이상이 없고 서버에 이상이 없다면 if문을 실행하여라" 이다.

xhr.response 은 우리가 처음 호출했던 서버에서 얻어온 값을 얻어온다.
disp라는 id를 가진 태그에 xhr를 통해 얻어온 데이터를 담는 것이다.

[출력]
단 :  
9 * 0 = 0  
9 * 1 = 9  
9 * 2 = 18  
9 * 3 = 27  
9 * 4 = 36  
9 * 5 = 45  
9 * 6 = 54  
9 * 7 = 63  
9 * 8 = 72  
9 * 9 = 81