Ajax+JQuery

Ajax(Asynchronous JavaScript & XML)

 

정의

-비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

탄생 배경

-사용자 인터페이스는 플래시를 사용한 플러그인, 자바 애플릿, 액티브엑스 등 웹 브라우저 자체의 기능이 아닌 추가적인 기능을 사용해서 구현하는 방법밖에 없다고 생각되어져 왔다.

그러나 구글 랩이 공개된 이후 이런 생각들은 바뀌게 되었다. 자바스크립트, DOM, 스타일 시트 등의 웹 브라우저가 기본적으로 가지고 있는 기능들을 사용해도 가능하다는 것을 알게 되었다. 다만 당시에는 이런 기술을 한마디로 정의할 용어가 없어 Ajax로 불리게 되었다.

 

-오래된 새로운 기술(이미 있었던 것을 조합해서 새롭게 발전시킨 기술)로 웹 브라우저가 기본적으로 가지고 있는 기능들을 사용해서 웹 브라우저와 사용자 간에 전적으로 새로운 관계가 구축되었다.

 

구성 요소

 

1)XHTML(현재는 HTML5)과 CSS를 사용한 표준 기술 기반의 웹 페이지

-사용자들의 운영체제와 웹 브라우저 환경은 매우 다양한데, 어느 환경에서나 Ajax가 같은 동작을 수행할 수 있으려면 일정한 기준이 필요하다.

 

- 이에 대해 Ajax에서는 W3C에서 규정한 XHTML(Extensible HyperText Markup Language), CSS(Cascading Style Sheets)와 ECMA에서 규정한 자바스크립트(또는 ECMAScript라고도 부름) 등 표준화 단체가 책정하고 있는 표준 기술을 기반으로 사이트를 작성하게 한다.

 

-이런 표준 기술을 준수한 Ajax로 작성한 사이트는 표준 기술을 지원할 수 있는 웹 브라우저를 사용하면 같은 결과를 얻을 수 있다.

 

2)DOM(Document Object Model, 문서 객체 모델)을 사용한 동적인 화면 표시와 상호 작용

-Ajax에서는 사용자의 동작에 대응해서 동적으로 웹 브라우저에 표시되는 결과를 변경할 수 있다.

 

-웹 브라우저에서 표시되는 내용의 변경은 자바 스크립트를 사용해서 DOM(Document Object Model)의 구조를 변경해 표현한다.

 

-DOM을 자바스크립트를 사용해서 웹 브라우저에 표시되는 내용을 변경한다는 것은 DynamicHTML란 용어로 불린다.

 

-Ajax에서 웹 브라우저에 표시되는 내용을 변경한다는 것은 DynamicHTML을 사용한다는 것을 의미

 

-Ajax에서는 사용자 또는 스크립트로부터의 동작에 의해서 표시되고 있는 웹 브라우저 용에 새로운 데이터를 보내서, 그 데이터를 기준으로 DynamicHTML의 기술을 사용해서 표시.

 

-이때 웹 브라우저측으로 보낼 수 있는 데이터는 표준화 데이터인 XML(Extensible Markup Language) 또는 XML문서를 변경하는 데 사용하는 XSLT(Extensible StyleSheet Language Transformation)를 사용한다.

 

3)XML(eXtensible Markup Language)과 XSLT(eXtensible StyleSheet Language Transformation) 등을 사용한 데이터의 변경과 조작

-XML은 HTML과 같은 마크업 언어(Markup Language)이다.

 

-차이점은 HTML은 미리 정의된 특정 태그를 사용, XML은 사용자가 태그를 정의할 수 있다는 것.

 

-사용자가 태그를 정의하기 때문에 HTML보다 XML의 문법 준수 규칙이 강한 편.

 

-이들은 서로 보완하는 입장으로 사용 목적 자체가 다르다.

 

-XML은 문서의 구조를 표현하는 것이 목적, HTMl은 문서의 내용을 표시하는 것이 목적이므로 상호보완적으로 사용됨.

 

4)XMLHttpRequest를 사용한 비동기적인 데이터전송(XHR 객체)

-XMLHttpRequest는 HTTP(Hyper Text Transfer Protocol)를 사용한 서버와의 통신을 수행하기 위한 객체로, Ajax에서 데이터의 전송은 XMLHttpRequest 객체를 사용한다.

 

-HTTP는 인터넷상에서 HTML 등을 송수신하기 위한 통신 프로토콜(절차)이다.

 

-DOM을 사용한 웹 브라우저의 내용은 객체화되어 있는데, 이것을 이용해서 비동기적으로 서버와의 통신을 수행할 수 있다.

 

-또한 XMLHttpRequest 객체의 이름에 있는 XML을 보면 알 수 있듯이 원래 XML 데이터의 전송을 목적으로 사용되는 객체,

HTML이나 Text형식의 데이터도 사용 가능하다

 

5)그리고 이것들을 결합해서 사용하는 자바스크립트

-위의 구성요소들을 결합해서 사용하는 자바스크립트가 필요

 

-이 자바스크립트는 Ajax를 사용한 사이트를 만들 때 기반이 되는 페이지로, 앞에서 소개한 구성 요소들 간의 동작을 제어하고 서버에 비동기적 요청을 하는 가장 중요한 부분.

동작 순서

 

1.웹 브라우저에서 사용자의 동작에 서버측에 요청이 XMLHttpRequest 객체에 의해 송신된다.

2.일단 요청이 송신되면 웹 브라우저가 서버측의 응답을 기다릴 필요 없이 그대로 웹 브라우저 안의 작업을 처리할 수 있다.

3.그 사이 서버측에서는 송신 받은 요청을 처리하며,

4.데이터베이스와 연동하는 작업을 수행한다.

5.이런 작업을 통해서 처리가 끝나면,,

6.웹 브라우저로 응답 시 필요한 데이터만을 보낸다.

 

---

jQuery란

-현재 가장 많이 사용하는 Ajax 라이브러리로, 이것을 사용하면 웹 애플리케이션 작성이 쉬워지며, 자바스크립트나 Ajax 및 DOM 관련 작업을 간단히 처리해준다.

 

 

제공하는 기능

-HTML/DOM작업

-CSS 작업

-HTML 이벤트 처리

-각종 효과 및 애니메이션, Ajax, 각종 유틸리티

 

다운로드

http://jquery.com/download/ 에서 압축된(compressed) 최신의 버전을 다운받으면된다.

---

 

DOM이란?

-문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다.

 

-내가 작성한 코드가 브라우저에 의해 파싱되면 DOM이 됩니다.

 

-View Source는 그 페이지를 이루고 있는 HTML을 보여줄 뿐이며, 내가 작성한 HTML과 같습니다. 하지만 코드 작성 시 백엔드 언어를 사용한 템플릿 파일을 이용한 경우, 정확히는 컴파일 된 결과를 말하는 것입니다. 혹은 작성된 코드에 대해 빌드 과정을 거친 다음에 웹사이트에 배포되는 경우엔 HTML 코드는 압축되거나 변형되었을 수도 있습니다.

 

-브라우저에서 지원하는 개발자 툴에서 보이는 것이 바로 DOM입니다. 이 툴에서 시각적으로 표현한 DOM이 나의 HTML 코드와 동일할 수는 있지만, 대개는 달라지게 되며 DevTool에서는 이러한 변경 사항이 적용되어 표시됩니다.

 

-JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어.

DOM은 바로 이 작업이 이루어지는 장소입니다.

사실 우리가 "JavaScript로 하는 것" 이라고 생각하는 것은 정확히는 "DOM API" 입니다.

엘리먼트에 click 이벤트가 일어나는지 감시하도록 JavaScript를 작성했다고 합시다. 하지만 이 엘리먼트는 DOM 노드입니다. 우리는 DOM에 있는 DOM property를 통해서 listener를 붙여놓은 것 뿐이죠.

정리하자면, DOM은 브라우저에 의해 기록되는 모든 것입니다. JavaScript는 이를 조작할 수 있는 문법이고 언어일 뿐이며, 이는 Node.js 등의 브라우저 밖의 DOM API가 없는 환경에서도 동작할 수 있습니다.

---