Ajax
Asynchronous JavaScript + XML의약어. 비동기식.
서버와 통신하기 위해서 XMLHttpRequest 객체를 사용한다. 일반 텍스트 형식, JSON, XML,HTML 등 다양한 포맷을 주고받을 수 있다.
Ajax는 새로운 언어도 기술도 아니며 현존하는 웹프로그래밍 관련 기술(JavaScript, HTML, CSS, XHTML, XML, DOM, XMLHttpRequest 등 - XML, HTML은 DOM객체)들을 통합하여 대화형 웹애플리케이션을 개발하는 새로운 개발 방법(패러다임)이다. 비동기 웹 기술의 가장 큰 장점은 비동기적으로 작업을 수행함으로써 페이지 일부만을 변경할 수 있다는 것이다. 이러한 비동기성을 통해서 특정 Event 발생시 전체 페이지가 아닌 일부분만을 업데이트하는 것이 가능하다.
Ajax 기술 요약
웹페이지 화면을 구성하고, Ajax 애플리케이션이 완료될 때 까지 사용되는 필드를 식별하는데 HTML(XHTML)을 사용한다.
JavaScript는 Ajax 애플리케이션를 실행하는 핵심코드이며, 웹서버와의 통신을 담당한다.
DHTML은 웹페이지양식을 동적으로 업데이트한다. DIV, SPAN 및기타 동적HTML 요소를 HTML을 마크업한다.
웹서버에서 수신한 HTML 및XML 데이터를 처리하는데 DOM을 사용한다.
RIA(Rich Internet Application)
전통적인 데스크톱 애플리케이션의 특징과 기능을 가지는 웹애플리케이션. 새로고침이 이뤄지지 않고 특정데이터 부분만 변동되도록 지원해준다. 전통적인 웹 어플리케이션의 문제(새로고침 필요,즉각적인 피드백없음, 풍부한 유저인터페이스 제공안함)들 때문에 RIA가 등장했다.
관련기술 : Sun Microsystems의 Applet, JavaFX Adobe의 FLASH, FLEX, AIR (움직이는 엔진은 동일 FLASH는 디자이너 FlEX는 개발자가 사용. 그래픽이 굉장히 깨끗하다는 장점이 있음). Microsoft의 ActiveX, Silverlight. DHTML(JavaScript, CSS, DOM의조합). Ajax( DHTML에 XMLHttpRequest JavaScript 객체를 통한 비동기 통신 기술 추가)
전통적 웹어플리케이션 모델(동기식)& Ajax 웹어플리케이션 모델(비동기식)
Ajax 특징
플러그인을 사용하지 않고 브라우저 밖으로 바로 이용할 수있으며, 새로운 것을 배우지 않고 DHTML, JavaScript, CSS등의 기존 웹기술들을 그대로 이용할 수 있다. 비동기 통신이 가능하다(Request에 대한 Response가 없을 경우 계속 대기하는 것이 동기식. 비동기식은 Request에 대한 응답이 없더라도 자신이 할일을 함)
Ajax 활용분야
1. 기존 웹사이트에서 Ajax를 활용하면 효과가 있는 경우
- 웹페이지를 바꾸지않고 현재 웹페이지에서 다양한 작업을 수행할 경우
- 불필요한 팝업을 사용하여 처리하는 작업들
2. Ajax 애플리케이션으로 개발할 필요가 있는 경우
- 여러번 불필요하게 화면을 다시 출력할 경우
- 회원가입 진행 시 ID 중복확인을 할때 Reload 되는 경우는 기존에 입력한 데이터값이 모두 사라짐. 이걸 지워지지 않게끔 Ajax를 활용.
- 특정한 데이터를 반복해서 사용하면서 다양한 작업을 수행할 경우 등 Ajax 활용 분야
Ajax의 주요 구성요소
① XMLHttpRequest – 웹서버와의 통신을 담당한다.사용자의요청을 웹서버에 전송하고 웹서버로부터 받은 결과를 웹브라우저에 전달한다. ② DOM – 문서의 구조를 나타낸다. 폼등의 정보나 화면구성을 조작할 때 사용된다. ③ CSS – 글자색 ,배경색 위치 ,투명도 등 UI 와 관련된 부분을 담당한다. ④ 자바스크립트 – 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttpRequest를 사용해서 웹서버에 요청을 전송한다.
또한, XMLHttpRequest객체로부터 응답이 오면 DOM,CSS 등을 사용해서 화면을 조작한다
XMLHttpRequest 객체 생성
웹서버와의 비동기통신을 담당하는 자바스크립트 객체.
W3C 표준이 아니기 때문에 모든 웹브라우저가 이 객체를 지원하지는 않지만 대부분의 웹브라우저가 지원 – Internet Explorer, Firefox, Safari, Opera, Konqueror 지원 (버전에 따라 지원여부가 상이할 때도 있음)
각 각의 웹브라우저 마다 자신들에게 맞는 형태로 개발되어 제공 – XMLHttpRequest 객체를 생성하고 사용하는 방법이 다르다.
XMLHttpRequest 객체의 주요 프로퍼티
| 속성 | 설명 |
| readyState | XMLHttpRequest 객체의 상태를 나타내는 코드. 처음 XMLHttpRequest 객체를 생성하면 0이다. 0 (uninitialized) - (request가 초기화되지 않음) 1 (loading) - (서버와의 연결이 성사됨) 2 (loaded) - (서버가 request를 받음) 3 (interactive) - (request(요청)을 처리하는 중) 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨) |
| status | 서버로부터 받은 응답 코드를 나타내는 숫자. 200 (OK) - 정상적으로 응답을 받은 경우 403 (Forbidden) - 접근거부 404 (Not Found) - 페이지를 찾지 못한 경우 500 (Internal Server Error ) - 서버 오류 발생 |
| statusText | 서버로부터 받은 응답 코드를 나타내는 문자열. 정상적으로 응답을 받으면 'OK'가 되고 파일을 찾지 못하면 'Not Found' 가 된다. |
| responseText | 서버 응답 내용을 나타내는 문자열. |
| responseXML | 서버 응답 내용을 나타내는 XML 개체. |
| onreadystatechange | readyState 속성이 바뀌었을 때 실행할 이벤트 핸들러를 지정한다(특정 자바스크립트를 호출) |
XMLHttpRequest 객체의 주요 메소드
| 메소드 | 설명 |
| open() | open(method, url, boolean); 요청을 초기화하면서 요청 방식, 주소, 동기화 여부를 지정. method - http 요청 방식을 나타내며 "get" 또는 "post" 방식을 사용. url - 요청할 페이지의 주소를 지정. boolean - 비동기 통신 여부를 나타내며 true(비동기화) 또는 false(동기화)로 지정한다.인자를 지정하지 않으면 true를 기본값으로 사용. |
| send() | 요청을 보낸다. 인자에는 요청과 함께 서버로 보낼 내용을 지정한다. |
| abort() | send() 메소드로 보낸 요청을 취소한다. |
| getAllResponseHeaders() | getAllResponseHeaders(); 응답을 받은 경우 응답의 모든 헤더 정보를 문자열로 돌려준다. |
| getResponseHeader() | getResponseHeader(header) 응답을 받은 경우 header 인자로 지정한 이름의 헤더 정보 값을 문자열로 돌려준다. |
| setRequestHeader() | setResonseHeader(header, value) 요청을 보내기 전에 header 헤더 정보의 값을 value로 설정한다. |
'Dev > JS & Jquery' 카테고리의 다른 글
| Ajax - Document Object Model과 XML (0) | 2019.04.03 |
|---|---|
| Ajax - 검색시 제시어 기능 만들기 (0) | 2019.04.02 |
| Ajax - get/post방식,Id유효성검사,서버/클라이언트 시간확인,CSV형식 데이터 읽기 (0) | 2019.04.01 |
| Ajax - 텍스트 데이터 전송받기 (1) | 2019.03.29 |
| JQuery 셋팅 및 예제 (0) | 2019.03.29 |