* Ajax 란?
- 비동기 JavaScript 와 XML 을 말한다. 간단히 말하면, 서버측 Scripts 와 통신하기 위한 XMLHttpRequest 객체를 사용하는 것을 말한다
서버측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식들)의 정보를 주고 받을 수 있다.
비동기성을 통해 페이지 전체를 리프레쉬 하지 않고 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있다.
서버로부터 받은 데이터로 작업을 한다
* Asynchronous JavaScript And Xml
1) 기존 방식의 사이트
- 웹 어플리케이션의 기존 구현 방식의 특징
- 웹브라우저가 웹 서버에 요청을 전송한다
- 웹서버는 JSP/PHP/ASP 등의 서버측 어플리케이션을 사용해서 사용자의 요청을 처리한 뒤, 처리 결과를 HTML로 생성해서 웹 브라우저에 전송한다.
- 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그려준다.
- 웹 브라우저가 웹 서버와 통신을 하고, 요청 결과는 HTML로 생성되고, 사용자의 입장에서는 페이지 이동이 발생하게 된다.
2) Ajax 방식의 사이트
- 제시어 기능이 있다. 이는 '사용자에게 즉각적인 반응과 풍부한 UI 경험을 제공'한다는 것이다.
- Ajax 는 ActiveX 와 같이 특정한 웹 브라우저에서만 제공하는 기능에 의존하지 않는다. 어떤 브라우저를 사용하든지 상관없이 웹 어플리케이션을 사용할 수 있게 된다.
3) Ajax 의 주요 구성요소
- XMLHttpRequest : 웹 서버와 통신을 담당한다. 사용자의 요청을 웹 서버에 전송하고, 웹 서버로부터 받은 결과를 웹 브라우저에 전달한다.
- DOM : 문서의 구조를 나타낸다. 폼 등의 정보나 화면 구성을 조작할 때 사용한다.
- CSS : 글자색, 배경색, 위치, 투명도 등 UI 와 관련된 부분을 담당한다.
- JavaScript : 사용자가 마우스를 드래그하거나 버튼을 클릭하면, XMLHttpReqeust 객체를 사용해서 웹 서버에 요청을 전송한다.
또한, XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS 등을 사용해서 화면을 조작한다.
4) 이벤트 발생 과정
- 사용자가 이벤트를 발생시키면 JavaScript는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달한다.
- 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리한 뒤, 그 결과를 XML 이나 단순 텍스트로 생성해서 XMLHttpRequest 에 전송한다.
- 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 JavaScript에 도착 사실을 알리게 되고, JavaScript는 응답 데이터와 DOM을 조작해서 사용자 화면에 반영한다
5) Ajax 가 기존과 다른 차이점
- 웹 브라우저가 아닌 XMLHttpRequest 객체가 웹 서버와 통신한다.
- 웹 서버의 응답 결과가 HTML이 아닌 XML 또는 단순 text이다
- 페이지 이동 없이 결과가 화면에 반영된다.
* 서버로의 비동기 통신 기술과 동적 클라이언트 스크립팅 기법을 하나로 묶은 것.
* 웹 브라우저가 직접 웹 서버와 통신하며 데이터를 주고 받는 것과 다르게 자바스크립트가 DOM을 이용해서 XMLHttpRequest 객체를 통해서 웹 서버에게 요청을 전달한다. 웹 서버는 요청을 처리하고 그 결과를 XML 이나 text로 생성해서 다시 XMLHttpRequest에게 넘긴다.그리고 그 결과는 다시 자바스크립트가 받아서 DOM을 이용해 조작해서 화면에 반응한다.
출처: http://smiler.tistory.com/entry/Ajax란?category=615519 [아직은 내가 쓴 글보다 퍼온 글이 훨씬 많음]
'Web Programming > front-end' 카테고리의 다른 글
jQuery input 배열 값 가져오기 (0) | 2018.08.30 |
---|---|
오른쪽 마우스 금지 소스 / 드래그 금지 소스 (1) | 2014.04.09 |
<thead><tbody> (0) | 2013.09.30 |
<colgroup> (0) | 2013.09.25 |
<div>코딩 (0) | 2013.09.25 |