AJAX

비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식

 

 

역사

1999년 마이크로소프트가 개발한 XMLHttpRequest가 그다지 큰 주목을 받지 못하다가

2005년 구글이 발표한 구글 맵스를 통해 웹 애플리케이션 개발 프로그래밍 언어로서 자바스크립트의 가능성을 확인하는 계기를 마련 

-> 웹브라우저에서 자바스클비트와 Ajax를 기반으로 동작하는 구글맵스가 데스크톱 애플리케이션과 비교해 손색이 없을 정도의 퍼포먼스와 부드러운 화면 전환 효과를 보여줌

 

 

AJAX이전에는 3가지의 단점이 있었다.

1. 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받아야함

2. 변경이 필요없는 부분도 렌더링 발생

3. 서버로부터 응답이 있을 때까지 블로킹

 

AJAX의 등장으로 위 단점이 해결되었다.

1. 변경에 필요한 데이터만 비동기 방식으로 받는다.

2. 변경한 필요가 없는 부분은 렌더링 안함

3. 부드러운 화면전환이 가능해짐 - 블로킹이 발생하지 않음

 

 

JSON

클라언트와 서버간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.

 

직렬화(JSON.stringfy)

클라이언트가 서버로 객체를 전송하려 객체 또는 배열을 문자열화 하는 것

 

역직렬화(JSON.parse)

서버로부터 클라이언트에게 전송된 JSON 데이터를 객체로서 사용하기위해 객체화한 것

 

 

XMLHttpRequest

Wep API이다. -> 브라우저 환경에서만 정상적으로 실행된다.

 

API란?

응용 프로그램에서 사용할수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만드는 인터페이스

 -> 개발자가 복잡한 기능을 쉽게 개발할 수 있도록 프로그래밍 언어로 코드를 제공하는 것

 

Web API란?

 웹 서버 또는 웹 브라우저를 위한 애플리케이션 프로그래밍 인터페이스이다. HTTP 서비스이고 다양한 클라이언트에서 접근이 가능하도록 설계되어있다. Web 환경을 통해 제공되는 데이터 CRUD인터페이스를 제공

 

 

readyState

 0 : UNSENT - open 메서드 호출 이전

 1 : OPENED - open 메서드 호출 이후

 2 : HEADERS_RECEIVED - send 메서드 호출 이후

 3 : LOADING - 서버 응답중

 4 : DONE - 서버 응답 완료

 

status : HTTP요청에 대한 응답상태를 나타내는 정수

statusText : HTTP요청에 대한 응답메시지를 나타내는 문자열

response : HTTP요청에 대한 응답 몸체

 

HTTP 요청 전송

1.  XMLHttpRequest.prototype.open 메서드로 HTTP 요청을 초기화

2.  XMLHttpRequest.prototype.setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값을 설정

3.  XMLHttpRequest.prototype.send 메서드로 HTTP 요청을 전송

 

 

 

중요하다고 생각하거나 궁금한 점

1. AJAX는 XMLHttpRequest객체를 기반으로 동작하는 것이다.

 - Asynchronous JavaScript and XML

 - 비동기적으로 JavaScript와 XML을 이용하는 방식

2. 마이크로소프트가 개발한 XMLHttpRequest와 Ajax를 기반으로 동작하는 XMLHttpRequest의 차이점은?

3. Ajax 동작원리

    1. 클라이언트가 이벤트를 발생시켜 javascript 실행

    2. javascript는 XMLHttpRequest 객체를 사용하여 서버로 요청

    3. 서버는 전달받은 AJAX요청 처리

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

    5. 받은 데이터로 페이지 일부 갱신

4. XMLHttpRequest를 사용하지 않는 이유

  - 브라우저 호환성에 대한 한계가 있고, 유지보수, 디버깅이 어렵다.