Ajax(Asynchronous JavaScript and XML) 웹 개발 기법, RSS(Rich Site Summary), DOM(Document Object Model), SQL, XQUERY

▣ Ajax(Asynchronous JavaScript and XML) 웹 개발 기법, RSS(Rich Site Summary), DOM(Document Object Model), SQL, XQUERY

비동기적인 웹 애플리케이션의 구현을 위한 자바스크립트 요청/응답 처리 기법
기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답하는 방식으로 되돌려 줌

이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많음. 결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비하게 된다. 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.

반면에 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 SOAP이나 XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 쓴다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

 

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식

이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있음

 

① : 사용자에 의한 요청 이벤트가 발생

② : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출

③ : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청

    이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있음

④ : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리함

⑤와 ⑥ : 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달

    이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달

⑦ : 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출

⑧ : 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시

 

장점

• 페이지 이동없이 고속으로 화면을 전환할 수 있음
• 서버 처리를 기다리지 않고, 비동기 요청이 가능함
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있음
• 플러그인 없이도 인터렉티브한 웹페이지 구현할 수 있음

단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있음
• HTTP 클라이언트의 기능이 한정되어 있음
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있음
• 스크립트로 작성되므로 디버깅이 용이하지 않음
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음
• 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능함

Ajax 구성요소
- 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
- 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
- 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, 

(혹은 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC 등)

 

DOM(Document Object Model)은 유효한 HTML문서 혹은 XML문서를 위한 프로그래밍 인터페이스

DOM이란 마크업 언어를 구조화해 웹페이지를 프로그래밍 언어를 통해 변경할 수 있게 하는 API

XML 구문분석을 위한 파싱기능, XML을 일괄 메모리에 올려놓고 전체 관점에서 트리구조 분석

 

Ajax하면 Jquery에 대한 설명을 빼놓을 수 없음. 일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데 jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 됨. jquery ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청할 수 있음.  Jquery는 Ajax처럼 JavaScript의 라이브러리 중 하나인데 자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것임.

---

정답 : 4번

RSS : rich site summary(풍부한 사이트 요약), really simple syndication(초간편 배급)

웹 사이트 간에 자료를 교환하거나 배급하기 위한 XML 기반의 포맷

 

---

2013년 72번

정답 : 3번

 

---

2014년 62번

정답 : 3번

Xquery : W3C에서 정의한 XML 데이터 조회/조작 질의언어

FLWOR(플라워 : FOR, LET, WHERE, ORDER BY, RETURN) 명령어로 구성되어 XML 질의 수행