[Ajax] Ajax

zyan·2021년 9월 15일

Web

목록 보기

2/7

🍋 Ajax

Ajax란 Asynchronous JavaScript and XML의 약자이다. XML이 풀네임(?)에 포함되어있으나, 실제로는 거의 이용하지 않는다고 한다. 나 또한 실습 때 JSON을 이용했다.

이러한 Ajax는 웹 페이지 전체를 다시 로딩하지 않고도 일부분만 갱신하는 것을 가능하게 한다. 즉, 백그라운드 영역에서 서버와 통신하여 그 결과를 웹페이지의 일부분에만 표시할 수 있는 것이다. 서버와는 아래의 다양한 형태의 데이터를 주고받을 수 있다.

JSON
XML
HTML
TXT

웹 페이지 전체를 리로딩하지 않고, 일부분만 갱신한다는 것에 대해 조금 더 자세히 생각해보자. 기본적으로 HTTP프로토콜은 클라이언트가 request를 하고, 서버에서 response하게 되는데, 이 때 이어져있던 연결이 끊긴다. 따라서 새롭게 화면을 갱신하기 위해서는 request와 response를 반복해야 한다. 이는 엄청난 자원낭비와 시간낭비를 초래한다.

그에 반해 Ajax는 서버에서 데이터를 받아올 때 XMLHttpRequest 객체를 통해 request를 수행하여 필요한 데이터만 받아 페이지의 일부를 갱신한다.

🟡 XMLHttpRequest를 이용한 Ajax구현

1. XMLHttpRequest 객체 생성

const xhttp = new XMLHttpRequest();

IE를 제외한 브라우저는 기본적으로 XMLHttpRequest 객체를 지원한다.

2. 웹 서버에 요청 전송하기

//get방식으로 ajaxRes.jsp에게 요청을 "설정"
xhttp.open("GET", "ajaxRes.jsp");

//get방식으로 ajaxRes.jsp에게 요청을 "수행"
xhttp.send();

open() - 요청 초기화

1) 첫 번째 인자 : GET, POST, HEAD중 하나의 방식을 넣는다.

2) 두 번째 인자 : 접속할 URL입력. 보안상(동일출처원칙)에 의해 현재 페이지와 같은 도메인에 있어야 한다.

3) 세 번째 인자 : 동기/비동기 방식 설정(true일 경우 비동기)
send() - 요청 실행

1) GET방식으로 요구한 경우 파라미터가 없어도 된다.

2) POST방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다. 다만 데이터는 서버에서 쉽게 parse할 수 있는 형식(format)이어야 하거나 JSON, SOAP 등과 같은 다른 형식으로도 가능하다.

3. 서버 응답 처리하기

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let data = this.responseText;
    document.getElementById("div1").innerHTML = data;
  }
};

서버로부터 응답을 받았으면, 알맞게 처리한다.
onreadystatechange

서버로부터 응답이 도착하면 호출될 함수를 지정

4. XMLHttpRequest 객체의 상태

readyState

readyState Holds the status of the XMLHttpRequest.

0 : request not initialized / 객체만 생성되고 아직 초기화되지 않은 상태, open() 메서드가 호출되지 않았음

1 : server connection established / open() 메서드가 호출되고 아직 send() 메서드가 호출되지 않은 상태

2 : request received / send() 메서드가 호출되었지만 STATUS와 헤더는 도착하지 않은 상태

3 : processing request / 데이터의 일부를 받은 상태

4 : request finished and response is ready / 데이터를 전부 받은 상태

보통은 readyState값이 4인 경우만 원하는 기능을 수행하지만, 가끔 시간이 오래 걸리는 작업일 경우 아래의 예제 코드와 같이 나머지 값을 유용하게 사용할 수 있다.

function callbackFunction(){
  if(httpRequest.readyState == 1  ||  httpRequest.readyState == 2
           || httpRequest.readyState ==3 ){
                           //화면에 작업 중 메시지 출력
          }else if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                       //서버 응답 결과에 따라 알맞은 작업 처리
               }else{
                   alert("문제 발생:" + httpRequest.status);
               }
          }
    }

5. 서버로부터의 응답 상태

status

200 : OK / 요청 성공

403 : Forbidden / 접근 거부

404 : Not Found / 페이지 없음

500 : Internal Server Error / 서버 오류

6. 응답 데이터 사용하기

responseText

서버 응답에 따른 확인 사항 처리 후, (readyState == 4 && status == 200) 이상이 없다면 서버가 전송한 데이터를 사용해야 한다.

위의 코드3을 참고하자.

7. XMLHttpRequest 객체를 사용하는 Ajax의 전체적인 통신 과정

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      let data = this.responseText;
      alert(data);
      document.getElementById("div1").innerHTML = data;
    }
  };

  //get방식으로 ajaxRes.jsp에게 요청을 "설정"
  xhttp.open("GET", "ajaxRes.jsp");

  //get방식으로 ajaxRes.jsp에게 요청을 "수행"
  xhttp.send();
}