AJAX

◉ AJAX란?

▪︎ AJAX

  - Asynchronous Javascript And XML의 약자, 비동기 방식의 javascript와 XML을 의미 

  - 자바스크립트처럼 특정 프로그래밍 언어를 지칭하는 것이 아니고,

    제이쿼리나 리액트처럼 특정한 프레임 워크를 지칭하는 것도 아닌,

    구현하는 방식을 의미 

  - 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나 

 

  - 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음 

     → 즉, Ajax를 이용하면, 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시 가능 

         이때 서버와는 다양한 형태의 데이터를 주고 받을 수 있음 ( JSON, XML, HTML, 텍스트 파일 등 ) 

 

 

▪︎ AJAX의 장점 

 ① 웹 페이지 전체를 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음 

 ② 웹 페이지가 로드된 후에 서버로 데이터 요청 보낼 수 있음 

 ③ 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음 

 ④ 백그라운드 영역에서 서버로 데이터를 보낼 수 있음 

 

 

▪︎ AJAX의 한계

 ① 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식 사용 

     → 서버 푸시 방식의 실시간 서비스는 만들 수 없음 

 ② 바이너리 데이터를 보내거나 받을 수 없음 

 ③ Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없음 

 ④ 클라이언트의 PC로 Ajax 요청을 보낼 수 없음 

 

 ★ 용어 정리 ★ 

 - 비동기 방식 

 - 동기 방식  

 

 - 클라이언트 풀링 방식 : 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식 

 - 서버 푸시 방식 : 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 방식 

 

 

---

◉ Ajax를 이용한 웹 응용 프로그램의 동작 원리  

▪︎ Ajax의 구성 요소 

 - 웹 페이지의 표현을 위한 HTML과 CSS

 - 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델 

 - 데이터의 교환을 위한 JSON이나 XML 

 - 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체 

 

 - 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는데 사용되는 자바스크립트 

 

 

▪︎ Ajax의 동작 원리 

 - Ajax 구성요소들을 사용해서 동작함 

 - Ajax를 이용한 웹 응용 프로그램

   • 자바스크립트 코드를 통해 웹 서버와 통신함 

      ⇒ 사용자의 동작에는 영향을 주지 않으면서, 백그라운드에서 지속해서 서버와 통신 가능 

 

[ 출처 ] TCPSHCOOL.COM

 

① 사용자에 의한 요청 이벤트 발생 

② 요청 이벤트 발생 시, 이벤트 핸들러에 의해 자바스크립트가 호출됨 

③ 자바스크립트는 XMLHttpRequest 객체를 이용해 서버로 요청 전송 

    : 이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요없이 다른 작업 처리 가능 

④ 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리함 

⑤&⑥ 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 응답 데이터를 생성 → 웹 브라우저에 전달 

    이 때, 전달되는 응답은 새로운 페이지 전부를 보내는 것이 아닌 필요한 데이터만 전달함 

⑦ 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부만을 갱신하는 자바스크립트를 호출 

⑧ 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시됨 

     ※ 화면 새로고침 없음 

 

 

---

◉ XMLHttpRequest 객체 

▪︎ 웹 브라우저가 서버와 데이터를 교환할 때 사용됨 ( 백그라운드에서 계속해서 서버와 통신할 수 있는 이유 ) 

 

 

◎ XMLHttpRequest 요청 보내기 

 

 1. XMLHttpRequest 객체 생성 

var httpRequest = new XMLHttpRequest();

 

 

 2. onreadystatechange 등록 

   - onreadystatechange

     • 서버로부터 응답이 오게 되어 XMLHttpRequest 객체의 값이 변하게 되면, 이를 감지해 자동으로 호출되는 함수를 설정함 

     • 함수를 등록하면, 서버에 요청한 데이터가 존재하고 서버로부터 응답이 도착하는 순간 특정할 수 있게 됨 

httpRequest.onreadystatechange = function(){
}

 

 

 3. 서버로 보낼 Ajax 요청의 형식 설정 

   - httpRequest.open(전달방식, URL 주소, 동기여부 ) 메서드 등록 

     • 전달 방식 : 요청을 전달할 방식으로 프로토콜 종류를 의미 ( GET, POST )

     • 동기 여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지 결정 ( true : 비동기 / false : 동기 )    

httpRequest.open("GET", "서버URL", true);

   

 

 4. 작성된 Ajax 요청을 서버로 전달 

   - httpRequest.send() 메서드를 통해 서버로 객체 전달 

     • send() : GET 방식

     • send(문자열) : POST 방식 

httpRequest.send();

 

   ※ 서버로 데이터 요청하기 전, 응답형식 지정하기 

httpRequest.responseType = "json"

 

 

 

◎ POST 방식 서버 요청 

 

 - 서버로 전송하고자 하는 데이터는 HTTP 헤더에 포함되어 전송됨 

 - setRequestHeader() 메서드를 이용하여 먼저 헤더를 작성한 후, send() 메서드로 데이터를 전송하면 됨 

 

var httpRequest = new XMLHttpRequest();	// 객체 생성
httpRequest.onreadystatechange = function(){
	if(httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ){
    	console.log(httpRequest.responseText);
}

// 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"); 보낼 데이터 지정

 

---

◉ XMLHttpRequest 응답 받기 

◎ readyState 속성 

 - Ajax에서 서버로부터 응답을 확인하는 목적으로 사용 

 - XMLHttpRequest 객체의 현재 상태를 나타냄 

UNSENT ( 숫자 0 )	XMLHttpRequest 객체가 생성됨
OPENED ( 숫자 1 )	open() 메서드가 성공적으로 실행됨
HEADERS_RECEIVED ( 숫자 2 )	모든 요청에 대한 응답이 도착함
LOADING ( 숫자 3 )	요청한 데이터를 처리 중임
DONE ( 숫자 4 )	요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨

 

 

◎ status 속성

  - 서버의 문서 상태를 나타냄  

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

 

 

◎ 응답 데이터 프로퍼티 

  - 서버로부터 응답 받은 데이터는 아래 프로퍼티에 들어 있음 

responseText 프로퍼티	서버에 요청하여 응답으로 받은 데이터를 문자열로 반환
responseXML 프로퍼티	서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 반환