[JavaScript] Ajax 에 대해 알아보고 활용하기

 

오늘은 자바스크립트의 비동기 통신을 배워보았는데

Ajax라는 것에대해 배웠다.

 

거의 접해보지 않았던 개념이라 이해가 잘 되지않아 포스팅으로 남겨 보기로 했다.

 

 

❓Ajax 란?

웹 전체 페이지를 새로 고치치 않고, 필요한 일부분만을 서버로 통신해서 가지고 와

웹 페이지를 동적으로 변경하는 프로그래밍 기법이다.

 

 

❓ Ajax를 왜 사용할까?

 

기존에 웹 사이트들은 대부분 동기적으로 처리 되었다.

 

작은 동작 하나에도 페이지 전체가 새로 생성되어 바뀌게 되고 불필요한 동작들이 많아지게된다.

 

예를 들어 댓글을 달 경우 

댓글창만 업데이트 되면 되는데 게시글을 포함한 전체 페이지가 달 때 마다 새로 랜더링 된다고 한다면 

너무 비효율적인 낭비가 생길 것 이다.

 

이러한 점을 보완하여 필요한 부분만 서버에서 가지고와 자바스크립트가 해당 위치에 요소만 바꿔줄 수 있는

Ajax를 필수적으로 사용하여야한다.

 

 

🔷 간단한 ajax 활용

 

1️⃣ JS 파일을 만들어 실행 시킬 함수 내부에 XMLHttpRequest 객체를 생성한다.

let xhrObj;

function startMethod() {

  xhrObj = new XMLHttpRequest();
} //startMethod

❗ XMLHttpRequest 전역 변수로 생성해준다.

 

 

2️⃣ 요청 객체(XMLHttpRequest) 의 처리 결과를 반환 해주는 메서드 생성

• XMLHttpRequest.ready == 4  : 데이터를 전부 받은 상태 즉 완료 상태를 의미
• XMLHttpRequest.status == 200 : 서버로부터 응답상태가 요청에 성공 했다는 의미

❓ readyState 의 단계

• 0 (uninitialized) - (request가 초기화되지 않음)
• 1 (loading) - (서버와의 연결이 성사됨)
• 2 (loaded) - (서버가 request를 받음)
• 3 (interactive) - (request(요청)을 처리하는 중)
• 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)

function resultF() {
  if (xhrObj.readyState == 4) {
    if (xhrObj.status == 200) {
      document.getElementById("test").innerHTML = "xhrObj.responseText";
    } else {
      document.getElementById("test").innerHTML ="error";
    }
  }
}

👉 데이터가 정상적으로 응답되었다면 응답데이터를 출력하고

      요청에 실패 하였다면 에러메시지를 출력한다.

 

 

3️⃣  응답처리를 담당할 메서드 지정

• .onreadystatechange : 객체가 서버로부터 응답 상태가 변경될 때마다 지정한 콜백함수가 호출된다.
• 응답상태(readyState)는 총 5번 호출되며 마지막인 4 는 요청이 완료되었다는 의미로 4가 되면 응답 데이터를 반환 받는다.

  xhrObj.onreadystatechange = resultF;

👉 resultF에서 readyState가 4가 되면 객체의 응답받은 데이터를 반환 받는다.

 

 

4️⃣ 요청 설정 후 요청 전송

• open(전송 방식 , 요청 페이지 , 비동기적 통신 여부)  

  //요청 설정
  xhrObj.open("Get", url, "true");
  //요청 전송
  xhrObj.send(null);

👉 open -> get 방식으로 호출하며 비동기로 호출한다.

 

 

✔️ 테스트

👉 화면이 전체적으로 새로 바뀌지 않고 해당 요소부분에만 요청한 페이지의 데이터가 출력된다.