Ajax 시작하기
웹 브라우저는 정적인 시스템입니다. 내용이 바뀌면 새로고침을 해서 새롭게 변경해야 했습니다. 그러나 구글이 만든 Ajax 개념이 도입되면서 모든 것이 바뀌었습니다. Ajax 라는 용어는 말하는 사람마다 조금씩 다르게 정의되고 있습니다. 어떤 사람은 클라이언트와 서버간의 연동을 다루는 것을 Ajax라고 내리고 어떤 사람은 데이터 통신은 물론 클라이언트의 UI를 동작하는 것을 포함하여 Ajax라고 하고 있습니다.
Ajax(Asynchrononus JavaScript and XML) 이란 ?
서버와 비동기 데이터 통신을 통해 데이터 주고받는 방식을 의미합니다. 이 때 사용하는 API가 XMLHttpRequest입니다.
Ajax의 핵심 API XMLHttpRequest
Ajax의 핵심입니다. 클라이언트와 서버 간의 통신을 담당하는 객체입니다. 또한 클라이언트와 서버 간에 통신할 때 가장 먼저 생성해야 하는 객체입니다.
IE5,6 에서는 XMLHttpRequest 객체 대신 ActiveXObject("Msxml2.XMLHTTP.6.0")을 사용해야 합니다.
기존 방식과 AJAX의 차이
기존방식
- 웹 브라우저가 웹 서버에 전송을 요청
- 웹 서버는 어플리케이션을 사용해 사용자의 요청 처리 후 결과를 HTML로 생성하여 웹 브라우저에 전송
- 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그림
- 결과적으로 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생한다.
Ajax방식
- 사용자가 이벤트를 발생시켜 자바스크립트는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달.
- 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리 후 결과를 XML이나 단순 Text를 생성해서 XMLHttpRequest에 전송
- 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 자바스크립트에 도착 사실을 알고 자바스크립트는 응답데이터와 DOM을 이용해 사용자 화면에 반영
- 결과적으로 사용자 입장에서는 페이지 이동이 발생하지 않고 페이지 내부 변화만 일어난다.
window.onload = function() { var xmlHttp = createXMLHTTPObject(); }; // 1. 브라우저에 따른 XMLHttpRequest 생성 function createXMLHTTPObject() { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); //IE 5,6을 제외한 브라우저는 XMLHttpRequest 객체를 제공합니다. } else {
//IE 5,6 일 경우 XMLHttpRequest 객체를 생성해야 합니다. xhr = new ActiveXObject('Microsoft.XMLHTTP'); } return xhr; }
TRUE
로 설정된 경우에는 자바스크립트 함수의 수행은 서버로부터 응답을 받기 전에도 계속 진행됩니다.- 0 (uninitialized) - 초기화 되지 않음.
- 1 (loading) - 로드되지 않은 상태 즉 send가 호출되지 않은 상태
- 2 (loaded) - 로드된 상태. 헤더와 상태는 받았으나 아직 응답을 받지 못하였음.
- 3 (interactive) - 데이터의 일부분만 받은 상태.
- 4 (complete) - 모든 데이터를 받아 완료
'Ajax&JSON' 카테고리의 다른 글
JAVA에서 JSON 파싱하기 (0) | 2018.06.27 |
---|---|
JAVA에서 JSON 데이터 만들기 (0) | 2018.06.27 |
JSON 사용하기 (0) | 2017.08.28 |
JSON 개념잡기 (0) | 2017.08.28 |
Ajax의 실행순서와 예제 (0) | 2017.08.03 |