이 내용은 웹월드 컨퍼런스 3일차의 디앤샵의 에반젤리스트이신 이상용님이 발표한 내용을 정리한 것입니다.

AJAX는 이제 웹의 필수적인 부분이 되어버렸다. 이젠 너무나도 익숙해 졌기 때문에 내가 만난 사람들 중에는 웹페이지가 새로 로딩되지 않고 일부만 바뀌는 것이 얼마나 신기한 기술인지 모르는 사람들도 많다. 전에도 아이프레임등으로 할 수도 있었고 순간의 동작이라서 웹에 대해 잘 모르면 새로 로딩된다는 것 조차 모르는 경우도 많기 때문에....

AJAX가 이제 필수 기술이 되었다고 하더라도 무엇이든 그렇듯이 남용되는 것은 좋지 않다고 생각하지만 AJAX는 아직은 나에게 신기한 기술이고 빨리 익혀서 내맘대로 쓰고 싶었다. 현재로써는 AJAX는 제대로 쓰지못하고 prototype.js를 이용해서 AJAXrequest객체를 이용해서 하는 것만 수정해서 사용할 줄만 안다. ㅡ..ㅡ

어쨌든 AJAX가 XML Request를 이용하는 기술이지만 AJAX의 의미만을 생각한다면 비동기통신을 이용해서 페이지로딩을 하지 않고 일부만 바꾸는 기술을 의미하고 있고 이 세션에서는 이렇게 하는 기술을 소개했다.

1. Hidden Frame을 이용하는 방식이다. 이것은 상당히 고전적인 방식인데(나도 몰랐다 ㅡ..ㅡ 입사하고 동기가 물어봐서 그렇게 해결했다는 것을 듣고는 그렇게도 하는구나 알았을 뿐.. )

frameset에서 높이가 0짜리 히든프레임을 하나 만들어서 그 히든 프레임을 통해서 통신을 하는 것이다. 보이지만 않을 뿐 하나의 페이지랑 똑같기 때문에 현재 페이지에서 히든 프레임의 페이지로 값을 전송하고 히든프레임이 값을 처리하고 다시 보내주는 것이다.

구현하기가 상당히 쉽고 실제적으로 페이지간의 전송과 동일하기 때문에 GET, POST, File Upload를 모두 사용할 수 있지만 페이지 클릭소리가 나는 문제점이 있고 보이지가 않아서 예외처리도 힘들다.

2. Dynamic Scripting이라고 이상용님이 소개한 기술로 개인적으로 제일 선호하는 기술이라고 한다.

이건 내가 좀 이해하기가 쉽지 않았다. 좀 해봐야 할듯... 설명을 하자면 그냥 통상적인 웹페이지가 있고 스크림트 부분에서 스크립트 오브젝트를 생성한다.

<script type="text/javascript">
    scriptObj = document.createElement("SCRIPT");
    scriptObj.src = "ajax2.js";

    document.body.appendChild(scriptObj);
</script>

이렇게 해놓고 ajax2.js는 document.getElementById("000").innerHTML = "....."; 의 형태를 가지고 있다. 설명을 하자면 저 js파일이 특정 앨리먼트의 코드를 교체해주는 역할을 하고 있는 것이다.

구현이 쉽고 변수를 공유할수 있지만 일반적인 GET/POST의 전송방식은 사용할 수 없다. 원리자체는 이해가 가는데 정확히 어떤식으로 다양하게 써야 하는지는 감이 잘 오질 않는다.

3. 세번째는 통상적인 XML Request를 이용한 방법인데 이부분은 따로 적지 않겠다.


히든 프레임과 XML Request는 부하가 좀 큰 편이고 Dynamic Scripting을 적절히 이용하는 것이 좋다고 한다. 좀더 지식이 쌓이면 활용하기 위해서 기록해 놓는다.. ㅡ..ㅡ