1. Ajax 란?
왜 Ajax가 나왔는가? / 불편했던점(Ajax나오기전)
왜 필요한가? / 기존 방식을 어떻게 대체 ? / 사용 예
특징 단점
구조(흐름도)
2. Jquery란?
------------------------------------------------------------------------------------------------
1. Ajax : Asynchronous JavaScript and XML
------------------------------------------------------------------------------------------------
@ Ajax란 진정 새로운 것인가??
그렇지 않습니다. Ajax를 포함하는 원격 자바스크립트(Remote Javascript)는 XML 데이터를 이용한 서버와의 커뮤니케이션 기능을 제공합니다. Ajax의 구현이 가능해진 것은, 오늘날 사용되는 주요 브라우저가 독립적인 XML HTTP 요청을 실행하는 오브젝트를 지원하는 덕분입니다. Internet Explorer 5와 이후 버전은 XMLHTTP 오브젝트를, Mozilla 기반 브라우저는 XMLHttpRequest 오브젝트를 제공합니다. 두 가지 오브젝트 모두 서버로부터 XML 데이터를 요청하고, 이와 유사한 방법으로 데이터를 처리하는 기능을 제공합니다. XML이 다이내믹하게 전달될 수 있는 이상, 서버 사이드 Ajax 컴포넌트에 어떤 테크놀로지를 사용해도 관계없습니다. 따라서 PHP에서 servelet에 이르는 다양한 테크놀로지를 Ajax 서버에 사용할 수 있습니다.
Ajax 테크놀로지가 빠르게 확산되고 있는 것은, 오늘날 사용되고 있는 거의 모든 브라우저가 Javascript와 XMLHTTP 오브젝트를 지원하며, 또 모든 웹 서버 테크놀로지가 XML(또는 마크업)의 생성을 지원하는 덕분이라 할 수 있습니다.
@ Ajax란??
-웹 의 플랫폼화를 가능하게 하는 기술적인 토대로서 비동기 통신을 하여, 빠른 서비스의 제공이 가능하도록 한다. 사용자 경험이 기반이(UX) 되는 유연한 사용자 환경을 구현 할 수 있도록 하는 것이다.
- Ajax는 특정한 하나의 기술이 아니다. 몇 가지 각 영역에서 활약하던 기술들로 이루어져있으며, 강력한 새로운 방법들로 뭉쳤다. Ajax는 다음의 것들을 통합한다.
- 동적인 HTML을 지원하는 DHTML, DOM, CSS
다양한 플랫폼에서 Data 교환을 지원하는 XML, JSON
웹브라우저에서 다양한 클라이언트 로직을 구현하기 위한 자바스크립트
서버와 비동기 통신을 지원하는 XMLHTTP
XML 데이터를 브라우저에서 지원하는 HTML로 변환하는 XSL
- AJAX는 독립적이고 구체적인 하나의 특정 기술을 지칭하는 것이 아니다. 웹에 이미 존재하고 있는 DHTML, CSS, XML, XMLHttpRequest등의 기술들을 합친 새로운 기술 또는 그 기술들을 이용하여 보여줄 수 있는 이용형태를 나타낸다.
@ Ajax는 두가지 핵심 테크놀로지가 존재하는 환경에서 구현 가능하다
AJAX의 핵심을 이루는 XMLHttpRequest는 인터넷 익스플로러(이하 IE)5.0에서부터 이미 액티브X오브젝트 형태로 제공되기 시작했고 그 후 모질라(Mozilla) 1.0에서부터 윈도우 오브젝트 형태로 XMLHttpRequest 객체가 지원되기 시작하였다. 그 이외에 넷스케이프 7, 맥의 사파리(Safari) 1.2, 오페라(Opera) 7.6에서부터, 그리고 모든 파이어폭스(firefox) 버전에서 지원하고 있다. XMLHttpRequest가 IE에서 액트브X 오브젝트로 다루고 있기 때문에 IE와 다른 브라우저들 간의 XMLHttpRequest 객체를 가져오는 방법이 다르고 브라우저 간에 인터페이스나 구현의 차이로 인해 미묘한 차이점을 보이는 문제가 아직 존재한다.
@ Ajax를 사용하는 목적
AJAX를 사용하는 가장 큰 이유는 웹에서 액티브X, 플래시 또는 자바 애플릿 등에 의존했던 사용성, 접근성, 응답성의 향상이다. 네트워크 인프라가 발전하여 네트워크 속도가 아무리 발라진다고 하더라도 새로운 컨텐츠를 보여주기 위해서 웹 페이지 전체가 매번 리로딩되는 것은 사용성, 응답성의 한계로 이어질 수밖에는 없다. 웹 페이지의 전체 레이아웃이 바뀐다면 웹페이지 전체가 다시 그려지는 것이 불가피 하겠지만(사실 DOM 인터페이스를 이용하여 HTML문서의 전체 구조를 바꿈으로서 레이아웃을 변경할 수는 있지만 효용성은 없을 것이다), 일부 레이아웃 변경 또는 레이아웃은 유지한 채 내용만 변경되는 것이라면 웹 페이지 전부를 다시 리로딩한다는 것이 불필요하게 느껴질 수 있다. 또 모든 액션이 요청을 보내고 응답이 오기를 기다리고 응답이 온 후에 다른 액션 또는 요청을 보내는 동기적인 사용 행태도 기존 웹 어플리게이션의 한계로 느껴질 수 있다.
@ Ajax는 무엇이 다른가?
AJAX의 초점은 앞에서 안급한 기존 웹 어플리케이션의 비효율성, 동기적인 액선의 단점을 해결할 수 있는 웹 페이지의 부분적인 변화, 적용과 비동기성에 있다. 하지만 굳이 AJAX만이 대안은 아니다. 액티브X, 자바 애플릿, 플래시 등이 그 대안이 될 수 있다. 하지만 그러한 기술들 대신에 AJAX가 가질 수 있는 경쟁력을 얘기하자면 플러그인을 사용하지 않고 브라우저만으로 바로 이용할 수 있다는 것과 새로운 것을 배우지 않고 DHTML, 자바스크립트, CSS등의 기존 웹 기술들을 그대로 이용할 수 있다는 것이다. 이러한 장점들은 지금도 널리 사용되고 있는 액티브X, 자바 애플릿, 플래시 등의 기술에 대한 대안으로 AJAX에 관심을 가져볼만한 충분한 이유를 준다.
@ Ajax어플리케이션 이용형태
기존 웹 애플리케이션 이용 행태에서는 사용자가 서버 측에 요청을 보내면 서버에서 응답이 클라이언트로 모두 전송되고 관련 리소스가 모두 로딩된 이후에 또 다른 행동을 취할 수가 있었다. 하지만 AJAX 어플리케이션에서는 서버 측에 보내는 요청이 비동기적으로 이루어지기 때문에 요청을 보낸 이후에도 응답이 완료되기를 기다리지 않고 또 다른 요청을 보내거나 그 이외에 액션을 취할 수 있다.
@ 왜 Ajax 가 나왔는가?
1. 웹 어플리케이션의 단점을 보완하기 위해서!!
2. 사용자 인터페이스(UI : User Interface) 풍부한 UI 기능을 탑재한 애플리케이션의 필요
- UI(User Interface), 사용자 인터페이스 사람과(사용자)과 사물 또는 시스템, 특히 컴퓨터 프로그램 등 사이에서
의사 소틍을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적 가상 매개체
- 웹 어플리 케이션의 이점을 고려!
- 상호작용은 풍부하지 않다. 클라이언트/서버의 관점보다
언제 어디서나 쉬운 접근성
설치 없이 사용하는 가벼움과 즉시성
누구나 쉽게 사용할 수 있는 직관적 인터페이스
@ 전통적인 방법 (Ajax 전)
전통적인 웹 어플리케이션 모델은 이렇게 작동한다.: 대부분의 사용자의 인터페이스에서의 액션은 웹 서버로의 HTTP Request를 유발한다. 서버는 데이터 검색, 수 처리, 여러 레거시 시스템들과의 소통 같은 몇 가지 프로세스를 하게 되고, 클라이언트에게 HTML페이지를 돌려준다. 이는 하이퍼텍스트를 매개체로 한 웹의 기본적인 사용법을 채용한 모델이다. 그러나 하이퍼텍스트는 소프트웨어 어플리케이션을 충분히 만족시키기엔 부족했다.
이런 접근법은 많은 기술적인 감각을 만들어냈지만 사용자에게 만족할만한 결과를 주지는 못했다. 서버가 할 일을 하는 동안 유저는 무엇을 하는가? 그렇다. 기다려야만 한다. 그리고 작업의 모든 스텝마다 사용자는 기다린다.
당연하게도, 어플리케이션들을 모두 긁어 모으는 식으로 웹을 디자인한다면 유저들을 기다리게 만들지 않을 수 있었을 것이다. 인터페이스가 한번 로드 되고 나면, 왜 사용자는 어플리케이션이 서버에게 무언가를 필요로 하는 모든 시간마다 기다려야 하는가? 진짜, 도대체 사용자들은 왜 어플리케이션이 서버로 가는 것을 보아야 하는가?
(기존의 웹애플리케이션 방식은 화면을 새로운 정보를 나타내기 위해서 서버에 새로운 요청을 보내고 그 요청에 대해 받아온 결과를 브라우져가 다시 구성해서 사용자에게 보여주는 방식이다.
새 데이터의 페이지를 완전하게 보기위해서 모든 관련 이미지가 다운로드되고 브라우져가 열심히 받아온 HTML 코드에 맞게 자료와 화면을 구성할때 까지 기다려야 했다 )
@ Ajax는 기존 방식을 어떻게 대처 했는가?
Ajax 어플리케이션은 사용자와 서버 사이의 중개자- Ajax 엔진 –를 소개함으로써 웹에서의 소통의 본성인 가다 서는 반복행위를 제거한다. 응답을 더 낮춰주는 어플리케이션을 한층 더 두는 것 같으나 그 반대가 맞다.
세션이 시작될 때 웹 페이지를 로딩하는 것 대신, 브라우저는 Ajax엔진(Javascript로 코딩되고 항상 숨겨진 프레임 안에 집어넣어진)을 로드 한다. 이 엔진은 사용자가 접하는 인터페이스를 구성하는것과 유저를 위해 서버와 통신하는 것 모두를 책임진다. Ajax엔진은, 사용자가 서버와의 통신에 의존하지 않는, 비동기식으로 이루어지는 어플리케이션과 의사소통 할 수 있도록 한다. 그래서 사용자는 결코 빈 페이지나 모래시계 아이콘 같은 것들을 볼 수 없게 되고 서버가 무언가를 하는 동안 초조하게 기다리지 않아도 된다.
(Ajax로 우리는 실제 데이터들만을 주고 받고 화면을 새로 구성해야 할 필요 없이 변경되어야 할 부분만 변경함으로써 속도와 사용이 훨씬 편리해졌다. 또한 UI도 훨씬 세련되게 표현가능하다 )
@ 사용 예) 구글 (Suggest, Map, 지메일)
글자를 칠 때, 제안되는 단어들이 변경되는 순간을 유심히 살펴보자. 거의 즉시 이루어진다
Google Maps의 경우에도 줌 인을 하거나 지도를 여기저기로 이동시켜 보아도 거의 즉시 모든 것이 이루어진다. 기다리라는 페이지를 보여주거나 페이지 전체가 리로드되는 일은 없다.
Ajax가 기술적인 장점뿐만 아니라 실 세계의 어플리케이션들에도 유용하다는 것을 보여주고 있다. 이것은 연구실에서만 이루어지는 별개의 기술이 아니다. 그리고 Ajax 어플리케이션들은 정말 단순한 Google uggest에서부터 그 복잡하고 정교한 Google Maps에 이르기 까지 어떤 크기로도 될 수 있다.
@ Ajax 주요 특징
1. A가 의미하듯 Asynchronous 처리 방식이다. 즉 새로운 요청을 위해서 페이지 전체를 전송하고 기다릴 필요가 없다. 새로운 요청이 있는 동안에도 브라우저와 그 내용 및 기능들을 계속적으로 사용할 수 있다.
기존 웹 애플리케이션을 이용할 경우 사요자의 액션 흐름, 서버에 요청을 보내고 새로운 페이지가 완료되기를 기다림
Ajax를 이용한 경우 사용자의 액션은 비동기적으로 서버의 응답이 완료되기를 기다리지 않는다.
2. 전체 페이지를 새로 받아와서 그리는 방식이 아닌 실제 해당 데이터만을 주고 받음으로써 데이터양을 줄이고 DOM을 이용하여 화면을 구성함으로써 빠르게 화면에 반영시켜 준다
3.마우스, 키 등 많은 운영체제가 제공하는 이벤트들을 잡아 적절하게 비동기요청을 만들어 낼 수 있다.
4. 수신하는 데이터의 양을 줄임 (DB의 응답을 가공하지 않고 바로 JavaScript에 넘기는 식으로 전송량을 줄임)
@ Ajax 단점
1. 아직은 쉽지 않은 브라우저 독립적인 웹 페이지
: Ajax를 구성하는 요소들이 모두 인터넷 표준을 따르고 있으므로 (사실 XMLHttpRequest는 표준은 아닙니다만) 가급적 브라우저에 독립적인 웹 페이지를 구현하는 것이 보다 Ajax 스러운 웹 응용 프로그램이라는 것!
2. 늘어나는 코딩량
ex)
만일 여러분이 <TABLE>태그를 페이지에 표시해야 한다고 가정해 보겠습니다. 기존의 방법이라면 그저 서버 측 페이지에서 <TABLE>태그를 작성하기만 해주면 끝이었습니다. 그러나 Ajax를 채택하게 되면 이야기는 달라집니다. 서버에서 전달되는 것은 <TABLE>태그를 작성하는데 필요한 데이터 뿐입니다. 나머지는 자바 스크립트를 통해 제어해야 한다는 것이지요.
<table border="0" cellpadding="0">
<tr>
<td>Hello, World!</td>
</tr>
</table>
이 코드를 만들기 위해 우리가 작성해야 하는 자바 스크립트 코드는 다음과 같습니다
function buildTable() {
var objTable = document.createElement("table");
objTable.border = 0;
objTable.cellpadding = 0;
var objTr = objTable.insertRow(0);
var objTd = objTr.insertCell(0);
objTd.innerText = "Hello, World";
document.body.appendChild(objTable);
4. 새롭게 대두되는 보안 문제
@ Ajax 구현을 위한 JavaScript 라이브러리들..
Prototype.js 널리 알려져 있는 Ajax 프레임워크
http://www.prototypejs.org/
Script.aculo.us Prototype.js를 기반으로 하는 여러 인터페이스의 제공
http://script.aculo.us/
jQuery Prototype.js 만큼 널리 사용되는 Ajax 프레임워크
http://jquery.com/
jQuery UI jQuery를 기반으로 하는 여러 인터페이스의 제공
http://jqueryui.com/
Dojo 다양한 화면효과 및 위젯을 제공
http://dojotoolkit.org/
Google Web Toolkit 구글에서 배포중인 Ajax 프레임워크
http://code.google.com/intl/ko/webtoolkit/
ASP.NET AJAX MS에서 공식 개발된 ASP.NET 지원용 AJAX 프레임워크
http://www.asp.net/ajax/
YUI Yahoo User Interface
http://developer.yahoo.com/yui/
@ Ajax 구현 -
XMLHttpRequest 와 ActiveXObject의 차이점!
XMLHttpRequest(XHR) 은 W3C의 표준이 아니므로, 인터넷 익스폴로어에서는 Active X Component 형식으로 구현되었고, 그 밖에 다른 브라우저들(FireFox, Safari, Opera)은 native javascript객체로 구현되었다.
이런 차이점을 고려해서 XHR 객체를 얻어오는 자바스크립트 코드를 다음과 같이 작성할 수 있다.
* 인터넷 익스플로러
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
* 그 이외의 브라우저
var xmlhttp = new XMLHttpRequest()
좀 더 일반적인 방법으로는 다음과 같이 XMLHttpRequest 객체를 얻어올 수 있다.
var xmlhttp = false
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest()
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
XMLHttpRequest의 이용
AJAX에 있어서 가장 매력적인 부분은 비동기성이다. XMLHttpRequest는 동기적, 비동기적 등 두가지 방법으로 이용할 수 있는데, AJAX에서는 비동기적인 방법을 주로 이용하게 된다. 비동기 모드로 XMLHttpRequest를 사용할 경우 send()가 호출된 후 웹 서버로부터 응답이 오기를 기다리며 브라우저가 멈춰있지 않고 웹 서버로부터 결과를 모두 받아낸 이후 콜백 핸들러에 정의된 코드가 실행되기 때문에 사용자는 계속 브라우저를 이용할 수 있게 된다.
* XMLHttpRequest의 동기적 이용 예제
xmlhttp.open("GET", "test.html", false);
xmlhttp.send(null);
if (xmlhttp.status == 200){
alert(xmlhttp.responseText);
}
* XMLHttpRequest의 비동기적 이용 예제
xmlhttp.open("GET", "test.html", true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
alert(xmlhttp.responseText);
} } }
xmlhttp.send(null);
XMLHttpRequest를 동기적으로 이용할 때에는 XMLHttpRequest의 send()를 호출한 뒤 response의 status code를 체크하고 responseText에서 결과를 꺼내오면 되므로 자바에서 java.net.HttpURLConnection을 사용하는 방식과 비슷하다. 동기적으로 XMLHttpRequest를 이용할 때는 XMLHttpRequest의 open() 메쏘드의 3번째 파라메터 값을 false로 줘야 한다. open()의 3번째 파라메터는 비동기적으로 이용할 것인지를 나타내는 boolean 값이 들어가고 default로 true이며 생략 가능하다.
XMLHttpRequest를 비동기적으로 이용할 때에는 send()를 호출하기 전에 XMLHttpRequest의 onreadystatechange 프로퍼티에 XMLHttpRequest의 상태가 변할 때마다 실행될 핸들러를 function reference 형태로 줘야 한다. XMLHttpRequest의 상태는 <표> 와 같이 5개의 상태를 가지지만 보통 가장 마지막 상태인 완료 상태를 체크해서 처리해주면 된다.
XHR 속성중에서 중요한 몇가지 속성
onreadystatechange
자바스크립트 콜백함수(funtion pointer)를 저장한다.
콜백함수는 readyState 값이 변할때 마다 호출된다.
요청이 서버로 보내지면 readyState 는 5가지 숫자값으로 계속 변화가 일어나게 된다.
readyState
요청의 상태를 의미한다.
0 : UNINITIALIZED : 오브젝트는 작성되어 있으나 아직 초기화되어 있지 않다.(open()이 불리지 않았음)
1 : LOADING : 오브젝트가 작성되었으나 아직 send()가 불리지 않았다.
2 : LOADED : send()가 불렸지만 ststus와 header가 아직 도착하지 않았다.
3 : INTERACTIVE : data일부를 받았다.
4 : COMPLETED : data전부를 받았다. 완전한 데이터가 이용가능
responseText
서버의 응답을 string 형식으로 나타낸다
responseXML
서버의 응답을 XML 로 나타낸다.
이 속성은 DOM 객체로 파싱할 수 있다.
status
서버로부터의 HTTP 상태코드이다.(예 200(OK), 404(NOT Found) 등등
statusText
HTTP 상태코드에 대한 텍스트 값이다.(예 OK, NOT Found 등등)
void open(method, url, [async, [user, [ password ]]])
요청을 초기화한다.
method : GET/POST
url : 요청대상 URL
async : 비동기 true, 동기 false (default : true)
user : 인증페이지에서 사용될 사용자 이름
password : 인증페이지에서 사용될 암호
async 을 false 로 설정하면 요청은 동기로 처리되기 때문에 서버에서 응답을 받을때까지 프로세스는 기다린다.
XHR 을 사용하는 가장 큰 이점중의 하나인 비동기 처리를 위해서는 asynch 항목을 true 로 설정해야 한다.
false 를 설정한다면 XHR 을 사용하는 이점이 그만큼 줄어든다.
void send(content)
실질적으로 요청을 서버로 보낸다.
요청이 비동기이면 이 메소드는 바로 리턴되지만 요청이 동기이면 서버에서 응답을 받을때까지 계속 대기한다.
content 는 선택사항이며, DOM 객체이거나 input stream, string 값으로 설정할 수 있으며 HttpRequest body 의 한 부분으로 서버로 전달된다.
(※content 에 값을 넘기려면 open() 메소드는 반드시 POST 로 설정해야 하며, GET 방식으로 요청하려면 null 을 설정하면 된다.)
open(), send() 메소드가 가장 많이 사용되는 메소드들이다.나머지 메소드에 대해서도 알아보자
void setRequestHeader(string header, string value)
header 에 해당하는 value 값으로 HttpRequest 헤더에 값을 설정하는 메소드이다.
반드시 open() 메소드 다음에 위치해야 한다.
POST 방식은 HTTP Request 객체의 바디에 파라미터가 저장되는 것이므로 헤더에도 Content-Type 을 반드시
정의해 줘야 한다. 정의를 해주지 않으면 서버에서는 클라이언트에서 보낸 파라미터를 얻지 못한다.
void abort()
요청을 중지한다.
string getAllResponseHeaders()
요청에 대응되는 응답의 헤더정보를 리턴한다.
즉, Content-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.
String getResponseHeader(string header)
응답의 헤더정보중에서 header 에 대응되는 값을 string 형식으로 반환한다.
responseXML 속성을 이용한 DOM 시작하기
대단히 복잡한 응답데이터의 경우는 단순한 문자열로 처리할 수 없으며 XML 형식으로 처리하는 것이 훨씬 논리적이고 효율적일 것이다. 그러면 어떻게 브라우저는 서버로부터 받은 XML 형식의 데이터를 처리할 수 있는 것일까? XML 문서는 W3C 의 DOM 을 이용해서 처리된다. DOM 을 지원하는 브라우저들은 당연히 XML 문서를 다루는 많은 API 를 구현하고 있기 때문이다.
DOM 은 HTML 과 XML 을 다루는 API 를 제공하고 있으며, 스크립트를 통해서 다큐먼트에 접근할 수 있도록 정의되어 있다. 자바스크립트는 DOM 에 접근할 수 있고 DOM 을 다룰수 있는 스크립팅 언어이다. 다큐먼트의 모든 요소들은 DOM 의 부분들이기 때문에 요소의 속성과 메소드들은 자바스크립트로 제어가 가능하다.
Dynamic DOM 객체 다루기
지금까지는 DOM 의 기초적인 속성 및 메소드들을 다루어 봤다. 이런 속성으로는 다이나믹한 웹페이지를 구성하는데 한계가 있다. 웹페이지 전체가 리로딩 되지 않고 적절한 시점에 필요한 부분만 서버와 통신하여 데이터가 수정되는 동적인 웹페이지를 만들려면 더 다양한 DOM 의 속성을 익혀야 한다. 자, 그럼 컨텐츠를 동적으로 생성할 수 있게 해주는 W3C DOM 의 속성과 메소드에는 어떤것들이 있는지 알아보자.
document.createElement(tagName) : tagName 으로된 엘리먼트를 생성한다. div 를 메소드 파라미터로 입력하면 div 엘리먼트가 생성된다.
document.createTextNode(text) : 정적 텍스트를 담고 있는 노드를 생성한다.
<element>.appendChild(childNode) : 특정 노드를 현재 엘리먼트의 자식 노드에 추가시킨다. (예를들어 select 엘리먼트에 option 엘리먼트 추가)
<element>.getAttribute(name) : 속성명이 name 인 속성값을 반환한다.
<element>.setAttribute(name, value) : 속성값 value 를 속성명이 name 인 곳에 저장한다.
<element>.insertBefore(newNode, tartgetNode) : newNode 를 tartgetNode 전에 삽입한다.
<element>.removeAttribute(name) : 엘리먼트에서 name 속성을 제거한다.
<element>.removeChild(childNode) : 자식 엘리먼트를 제거한다.
<element>.replaceChild(newNode, oldNode) : oldNode 를 newNode 로 치환한다.
<element>.hasChildNodes() : 자식 노드가 존재하는지 여부를 판단한다. 리턴형식은 Boolean 이다.
여기서 한가지 짚고 넘어갈 부분이있다. 현재 거의 모든 브라우저는 DOM 을 지원하고 있으며 API 또한 비슷하게 동작하도록 구현되어 있다. 정확히 말하자면 DOM API 의 구현이 브라우저마다 다소 차이가 있다는 말이다. 가장 호환이 안되는 브라우저는 다름아닌 인터넷 익스플로어다. AJAX 의 핵심은 XMLHttpRequest 객체이고 가장 먼저 이 객체를 구현하고 제공한 브라우저가 IE5임을 감안할때 상당히 아이러니컬하지 않은가? 2000년 IE 가 전세계 브라우저의 시장점유율 95% 차지할 즈음, IE 에 대적할 만한 브라우저는 존재하지 않았다. 마이크로소프트가 다양한 웹표준 구현을 포기했던 시점이 바로 이때부터다. 이때까지 XHR 의 사용은 당연히 저조할 수밖에 없었다. 하지만 모질라와 사파리가 잇따라 광범위하게 지원을 시작하게 되자 상황은 변하기 시작했고, 사용율이 극히 부진했던 XHR 객체는 W3C 의 표준으로까지 자리매김하게 되었다. 더우기 구글맵, 구글 Suggest, Gmail, Flickr, Netflix 등에서 AJAX 를 사용하자 이제는 명실상부한 웹의 표준으로 거듭나게 되었다. 너무 늦었지만 Microsoft 쪽에서도 많은 분발을 촉구한다. 그러면 IE 에서 문제가 되고 있는 DOM 객체의 특징을 간략히 살펴보자.
첫째, IE 에서는 <table> 에 <tr> 을 추가할때 appendChilde() 메소드를 사용하더라도 <tr> 은 나타나지 않는다. 따라서 <tr> 을 <tbody> 에 추가해 주는 방식을 사용해야 모든 브라우저에서 동작하는 코드를 작성할 수 있다.
둘째, IE 에서는 setAttribute() 메소드에 class 속성을 이용할 수 없다. setAttribute("class", "newClassName") 한 후에 다시 setAttribute("className", "newClassName") 을 해야 모든 브라우저의 호환성을 보장할 수 있다.
셋째, IE 에서는 style 속성에 setAttribute() 메소드를 이용할 수 없다. <element>.setAttribute("style, font-weight:bold;") 라고 하는 대신에 <element>.style.cssText = "font-weight:bold" 라고 해 줘야 모든 브라우저에서 제대로 작동한다.
// making parameter to servlet
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var str = "name="+name+"&phone="+phone;
return str;
}
var url="GetPostServlet?"+makeQuery();
xhr.send(null); //get:null, post:insert parameter
}
var url="GetPostServlet";
xhr.open("post", url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(makeQuery()); //get:null, post:insert parameter
}
DOM은 문서의 내용, 구조, 스타일을 프로그램이나 스크립트를 통해 다아니믹하게 접근, 수정 할수 있게 하는 플렛폼/언어 중립의 인터페이스다. 이미 처리가 완료되서 사용자게에 보여진 문서를 다시 수정해서 그 처리결과를 보여줄 수 있다.
라는 군요.
사용 예는 질문에서 말씀하신데로 인터넷만 들어가면 나오는군요.
추가로 설명드리자면 DOM은 정적인 HTML 태그들을 그냥 태그가 아닌 하나의 개체들로 정의해 두어 접근성과 조작성을 향상시키는 것이 아닐까 생각되고요.
(극단적으로 DOM이 없다면 완성된 페이지를 수정하기 위해서 수정부위를 처음부터 끝까지 찾아서 해당 부분을 수정하는 스크립트를 작성해야 하지 않을까요?)
'HomeWork' 카테고리의 다른 글
| Thread ^^;; (0) | 2009.12.23 |
|---|---|
| JSON#2(JavaScript Object Notation) (0) | 2009.12.22 |
| JSON 데이터 (0) | 2009.12.22 |
| Dom(Document Object Model) 알아보기~!! (0) | 2009.12.21 |
| JQuery- (0) | 2009.12.15 |