[FE] AJAX

 

 

1. AJAX란?

비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말함

자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식

• 서버와 통신하기위해 XMLHttpRequest 객체를 사용
• 비동기식 : 여러가지 일이 동시적으로 발생한다는 뜻으로 서버와 통신하는 동안 다른 작업을 할 수 있음

• JSON, XML, HTML, 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고받을 수 있음
• 페이지 전체를 다시 로딩하지 않고서도 수행되는 비동기성
  → 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줌🖊️가능한 작업
  • 페이지 새로고침 없이 서버에 요청
  • 서버로부터 데이터를 받고 작업을 수행

 

2. AJAX의 장점과 한계

장점

1. 웹페이지 전체를 다시 로딩하지않고도 웹페이지의 일부분만을 갱신할 수 있음
2. 웹페이지가 로드 된 후에 서버로 데이터 요청을 보낼 수 있고 서버로부터 데이터를 받을 수 있음
3. 백그라운드 영역에서 서버로 데이터를 보낼 수 있음
4. 웹페이지 속도 향상
5. 서버에서 데이터만 전송하면되므로 전체적인 코드의 양이 줄어듦

한계

1. AJAX는 클라이언트가 서버에 데이터를 요청하는 풀링 방식을 사용하므로 서버 푸시 방식의 실시간 서비스는 만들 수 없음
2. 바이너리 데이터를 보내거나 받을 수 없음
3. AJAX 스크립트가 포함된 서버가 아닌 다른 서버로 AJAX 요청을 보낼 수는 없음
4. 클라이언트의 PC로 AJAX 요청을 보낼 수는 없음
5. 히스토리 관리가 안됨
6. 페이지가 이동하지 않는 통신이므로 보안에 신경을 써야함
7. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음
8. script로 작성되므로 디버깅이 어려움

📌 클라이언트 풀링(client pooling)방식이란?
- 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식

📌 서버 푸시(server pushing) 방식이란?
- 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것

 

3. AJAX의 동작원리

AJAX 구성요소

• 웹페이지의 표현을 위한 HTML, CSS
• 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM모델
• 데이터의 교환을 위한 JSON이나 XML
• 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest객체
• 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는데 사용되는 자바스크립트

AJAX 동작 원리

AJAX를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹서버와 통신을 함

1. 사용자에 의한 요청이벤트 발생
2. 요청이벤트가 발생하면 event handler에 의해 자바스크립트가 호출됨
3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냄
4. (웹 브라우저는 요청을 보내고 나서 서버의 응답을 기다릴 필요없이 다른 작업 처리 가능)
5. 서버는 전달받은 XMLHttpRequest 객체를 가지고 AJAX 요청을 처리

5,6. 서버는 처리한 결과를 HTML, XML 또는 JSON형태의 테이터로 웹브라우저에 전달

• 전달되는 응답은 새로운페이지를 전부 보내는 것이 아니라 필요한 데이터만 전달

1. 서버로부터 전달받은 데이터를 가지고 웹페이지의 일부분만을 갱신하는 자바스크립트 호출
2. 결과적으로 웹페이지의 일부분만이 다시 로딩되어 표시

기존 웹 응용 프로그램 동작 원리

 

4. 서버와의 통신

1) XMLHttpRequest 객체 생성

• XMLHttpRequest 객체
  • 웹브라우저가 서버와 데이터를 교환할때 사용
  • ActiveXObject → XMLHttpRequest

    var 변수이름 = new XMLHttpRequest();

2) 요청 : 브라우저는 서버에 정보를 요청

• 브라우저는 AJAX 요청을 담당하는 XMLHttpRequest 객체를 구현
• 서버의 동작 : 서버는 응답으로 데이터를 전달(XML, JSON)

(1) open() 메서드

• 서버로 보낼 AJAX 요청의 형식을 설정

open(전달방식,url주소,동기여부);

• 전달방식: GET, POST
• URL주소 : 요청을 처리할 서버의 파일 주소
• 동기 여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지를 전달
•  

(2) send() 메서드

• 작성된 AJAX 요청을 서버로 전달

  send()  // GET 방식
  send(문자열)   //POST 방식

  • 전달 방식에 따라 인수 유무가 결정됨

GET, POST 방식 - AJAX에서는 주로 POST방식 사용

• GET : 주소에 데이터를 추가하여 전달하는 방식

  // GET 방식으로 요청을 보내면서 데이터를 동시에 전달함.
  httpRequest.open("GET", "/examples/media/request_ajax.php?city=Seoul&zipcode=06141", true);
  
  httpRequest.send();

  • 서버로 전송하고자하는 데이터는 URI에 포함되어 전송됨
  • XMLHttpRequest 객체의 객체 상태와 서버 상의 문서 존재 유무 확인

    if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
        ...
    }
    // httpRequest.readyState == XMLHttpRequest.DONE : 서버에 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
    // httpRequest.status == 200 : 요청한 문서가 서버 상에 존재함

• POST : 데이터를 별도로 첨부하여 전달

  // POST 방식의 요청은 데이터를 Http 헤더에 포함시켜 전송함.
  
  httpRequest.open("POST", "/examples/media/request_ajax.php", true);
  
  httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  
  httpRequest.send("city=Seoul&zipcode=06141");

  • 서버로 전송하고자하는 데이터는 HTTP 헤더에 포함되어 전송됨
  1. setRequestHeader() 메소드를 이용해 헤더를 작성
  2. send() 메소드로 데이터 전송

비동기식(asynchronous) 요청

• open() 메소드의 3번째 인수로 true를 전달하면됨 (false : 동기식)
• 서버로 비동기식 요청을 보내면 자바스크립트는 서버로부터의 응답을 기다리면서 동시에 다른일 가능

3) 응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가

XMLHttpRequest 객체의 property

(1) ready state property

XMLHttpRequest 객체의 현재 상태

• 현재상태에 따라 변화하는 주기
  1. UNSENT(숫자0) : XMLHttpRequest 객체가 생성됨
  2. OPENED(숫자1) : open() 메소드가 성공적으로 실행됨
  3. HEADERS_RECEIVED(숫자2) : 모든 요청에 대한 응답이 도착함
  4. LOADING(숫자3) : 요청한 데이터를 처리중
  5. DONE(숫자4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨

(2) status property

서버의 문서상태

• 200 : 서버에 문서가 존재함
• 404 : 서버에 문서가 존재하지 않음

(3) onreadystatechange property

• XMLHttpRequest 객체의 readyState property 값이 변할 때마다 자동으로 호출되는 함수를 설정
• 서버에서 응답이 도착할때까지 readyState property값의 변화에 따라 총 5번 호출됨
• 서버에 요청한 데이터가 존재하고 서버로부터 응답이 도착하는 순간을 특정할 수 있음
  • XMLHttpRequest 객체의 readyState property 값이 변할 때마다 자동으로 호출되는 함수를 설정
  • 서버에서 응답이 도착할때까지 readyState property값의 변화에 따라 총 5번 호출됨
  • 서버에 요청한 데이터가 존재하고 서버로부터 응답이 도착하는 순간을 특정할 수 있음

switch (httpRequest.readyState) {

    case XMLHttpRequest.UNSET:
        currentState += "현재 XMLHttpRequest 객체의 상태는 UNSET 입니다.<br>";
        break;

    case XMLHttpRequest.OPENED:
        currentState += "현재 XMLHttpRequest 객체의 상태는 OPENED 입니다.<br>";
        break;

    case XMLHttpRequest.HEADERS_RECIEVED:
        currentState += "현재 XMLHttpRequest 객체의 상태는 HEADERS_RECEIVED 입니다.<br>";
        break;

    case XMLHttpRequest.LOADING:
        currentState += "현재 XMLHttpRequest 객체의 상태는 LOADING 입니다.<br>";
        break;

    case XMLHttpRequest.DONE:
        currentState += "현재 XMLHttpRequest 객체의 상태는 DONE 입니다.<br>";
        break;

}

document.getElementById("status").innerHTML = currentState;

if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
    document.getElementById("text").innerHTML = httpRequest.responseText;

}

 

---

http://www.tcpschool.com/ajax/intro

코딩교육 티씨피스쿨