[개발/asp.net] PostBack없이 서버 갔다오기(ScriptCallBack)

1. Introduction

전에 올린 웹서비스 비해비어 강좌를 올린적이 있었습니다.
웹서비스 비해비어는 클라이언트에서 포스트백없이 스크립트로 웹서비스 요청을 받아오는 강좌였습니다.
이 강좌를 이해하기 위해서는 웹서비스의 기본 내공은 보유하고 있어야 가능하였습니다. 하지만
이번 강좌는 asp.net의 동작만 이해하면 충분히 이해할수있고 활용할 수 있는 강좌입니다.
그리고 웹서비스 비해비어와 같은 목적으로 대체되어 사용될 수 있는 기술입니다.
초보자 분들도 쉽게 접근시키기 위해서 ScriptCallBack이라고 불리는 이 기술 이름을
포스트백없이 서버 요청하기 라고 강좌 이름을 지어 보았습니다.
그럼 이제 이 강좌의 베일을 차근 차근 벗겨보도록 하겠습니다.

2. XMLHttpRequest 객체

이번 강좌의 핵심은 XMLHttpRequest객체 입니다.
XMLHttpRequest객체는 새로운 것은 아니지만 요즘 웹개발에 있어서 비동기
웹개발의 핵심으로 다루어지고 있습니다. 이 객체의 핵심 역활은 스크립트에서
서버의 요청을 하고 직접 처리할 수 있다는 것입니다. 즉 닷넷에서는 포스트백의
역활없이 동적웹페이지를 구현할 수 있다는 것입니다.

그리고 또한 놀라운 기능은 웹페이지를 요청할때의 헤더나 쿠키등을 직접
선언하여 요청할 수 있다는 것입니다. 닷넷 프레임워크에서 지원하는 WebRequest 라는 객체를 다루어
본 분이라면 스크립트의 WebRequest라고 이해 하시면 제대로 보신 것입니다.
이 객체에 대한 자세한 설명은 아래 링크를 확인해 보시기 바랍니다.

XMLHttp참고 : http://www.hoonsbara.com/hoonsboard.aspx?table_name=asptip&board_idx=444421&page=1&keyword=&search=&boardmode=2

역시 예제를 봐야지만 객체에 대한 이해가 바로 와 닿을수 있을것 같습니다.
지금까지 XMLHttpRequest 객체가 이해가 안가신 분들이라고 해서
"이강좌는 나에게 수준이 안맞는 것이가?" 라고 생각 하시기는 이릅니다.
아주 쉬운 예제가 준비되어 있기 때문입니다.

3. PostBack 없이 아이디 중복 확인하기

이제 확인할 예제는 postBack없이 아이디 중복 확인하는 작업입니다.
아이디 중복 확인을 한다는 것은 DB에 연결해서 확인을 했다는 것인데요.
그럼 어떻게 PostBack 없이 확인이 가능하다는 것인지요? 그거 거짓말 아닌가요? 
아닙니다-_-; 아래 실행 화면을 통해서 보도록 합시다. PostBack없이 구현한 화면입니다

<callback.aspx>

이 예제는 화면 한번 깜빡이지 않고 아이디가 존재하는지 확인하였습니다.
정말입니다ㅋ 이 궁금증에 정답은 앞에서 설명한 XMLHttpRequest 객체 입니다.
이 객체는 특정 서버의 파일이나 페이지를 요청할 수 있다고 앞에서 설명했었습니다.
그럼 아이디 요청을 받는 특정 페이지를 구현해야 되지 않나요? 그렇습니다.
ID를 인자로 받아서 그 ID에 대한 여부를 돌려 주는 페이지를 별도로 구현하면 된다는 것입니다.
그럼 이제 어느정도 실마리가 풀린것 같습니다. 아래 그림을 보면서 정리해 보도록 하겟습니다.

①에서는 XMLHttp객체를 이용하여 ID확인을 요청합니다.그리고
②에서는 요청받은 param인자 값을 이용하여 DB에서 값이 존재 하는지 확인하고
③에서 그 결과를 리턴하게 되는 것입니다. 예제는 전혀 어렵지 않습니다.
ASP.NET의 Page.QueryString을 다루어 본 사람이라면 누구나 따라할 수 있는 예제입니다.


4. 주요 코드 #1 (Callback.aspx)

<Callback.aspx>

... ...   <script>     function IDConfirm()     {         //요청 URL + 입력텍스트 값         var Url = "IDConfirm.aspx?param=" + document.all["txtId"].value;                  //XML Request 객체 선언및 Open         var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");         xmlRequest.open("POST", Url, false);                  //헤더값 설정         xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  //요청         xmlRequest.send(null);                  //요청한값 확인하기         if (xmlRequest.ResponseText=="true")         {             alert("사용할 수 있는 아이디 입니다.");         }         else         {             alert("이미 존재하는 아이디 입니다.");         }     } </script>     ... ...   <input type="button" onclick=IDConfirm() style="COLOR: #ffffff; BACKGROUND-COLOR: #669999" value="중복확인">     ... ...

버튼을 클릭했을때 IDConfirm()이라는 스크립트 함수를 호출하게 됩니다.
IDConfirm()이라는 함수는 XMLHttp객체를 생성한 후 IDConfirm.aspx 라는
페이지를 요청하고 그 요청 결과를 ResponseText로 받고 있습니다.
그럼 이제 IDConfirm.aspx페이지를 구현해 보도록 하겠습니다.

5. 주요 코드 #2 (IDConfirm.aspx.cs)

<IDConfirm.aspx.cs>

private void Page_Load(object sender, System.EventArgs e) {         //잘못된 접근이라면         if(Request.QueryString["param"]==null)                return;         //실제로는 DB를 OPEN하여 확인하여 보자         if(Request.QueryString["param"]=="HOONS")                Response.Write("false");//HOONS는 사용하고 있는 아이디로 가정한다.         else                Response.Write("true");         //HTML 형식의 페이지의 출력을 모두 지운다.         Response.Flush();         Response.End(); }

이 예제에서는 실제로 DB를 연결하지 않았습니다.
만약 HOONS라는 요청이 왔을 경우 이미 사용하고 있는 아이디로 가정하고
false를 페이지에 응답해주고 그렇지 않을경우는 true를 응답해주게 됩니다.
이 소스의 핵심은 Response.End()라는 메서드입니다.
이 메서드로 웹페이지의 출력을 중지시키므로 그위에 응답한 false와 true
문자열만 브라우저에 출력하게 해 주는 것입니다. 한번 IDConfirm 페이지를 띄워서
직접 요청하여 확인해 보겠습니다.
그리고 param인자 값으로 HOONSBARA라는 값을 넘겨 보도록 하겠습니다.

HOONS라는 요청이 아니기 때문에 true라는 값을 응답하였습니다.
그럼 HOONS라는 인자로 페이지를 요청해 보도록 하겠습니다.

예상한대로 값은 false가 나왔습니다.
그럼 이제 페이지에서 소스보기 메뉴를 통해서 출력된 소스를 확인해 보도록 합시다.

HTML의 기본 소스는 출력이 되지 않고 true만 출력이 되었습니다.
이렇게 true값만 출력될수 있는 이유는 Response.End()메서드를 실행하므로서
모든 응답을 끝냈기 때문입니다.


6. 정리

이제 두 페이지의 코드를 모두 작성해 보았습니다. 결과를 확인해 봅시다.
HOONSBARA라는 인자값을 XMLHttp객체를 이용해서 IDConfirm으로 보냈고
그 보낸 결과를 요청 받았기 때문에 아래와 같은 결과가 출력 될 수 있었습니다.

그렇습니다. 서버의 요청은 이루어 집니다. 하지만 다른 페이지에서 요청을 하기
때문에 PostBack은 이루어 지지 않고 스크립트에서 처리하게 된다는 것이죠
페이지를 하나 더 구현해야 된다는 것이 조금 번거로운 일일지
몰라도 동적인 웹페이지는 사용자에게는 상당히 편하고 고품적인 페이지를 제공할 수 있습니다.
또한 사용자에게 친숙하고 편한 환경을 충분히 제공하고 있다면 그 개발자는
자기의 몫을 충분히 해내고 있는 것입니다. 고급기술을 많이 알고 사용하는 개발자 보다는
사용자를 알고 배려 할 수 있는 개발자야 말로 진정한 고급개발자라고 할 수 있을 것입니다.

---

다른 커뮤니티에서 oyukihana(눈꽃천사)라는 분이 반론한 내용입니다.

혹시 이런 의문점이 생겼던 분이 있을것 같아서 정리해 보았습니다.

 

1. Response.End()가 왜 핵심이라고 했는지 모르겠다. 안써도 받아진다.

당연히 안써도 받아집니다. 하지만 <html><BODY>등등의 모든 태그가 다같이 받아 지기 때문에

운반양이 많아 집니다. 최소의 데이터만 리터하기 위해서 핵심이라고 한것이죠

 

2. 대용량 DB를 운반할 경우 반인딩하면 느려진다.

당연합니다. 하지만 이 강좌를 이해하신 분은 R-R방식으로

대용량 데이터를 운반으로 활용할 강좌는 아니라는 것이라고 알고 있을 것입니다.

 

 

3. 속도가 빨라진다고 했는데 속도는 DB를 열기 때문에 똑같다.

속도가 빨라진다고 한것은 페이지를 로드하는 서버로의 포스트백이 이루어지지 않기 때문에

빠르다는 것입니다. 당연히 db를 열고 데이터를 가져오는 시간은 똑같습니다.

하지만 포스트 백이 한번 이루어질때 뷰스테이트 값을 전송하고 다시 복원 하는등의

여러 작업들을 생략할 수 있기때문에 서버의 입장이 아닌 클라이언트의 입장에서는 빠른 것입니다.

작성자 : HOONS(박경훈)   이메일 : tajopkh@hanmail.net   홈페이지 : http://www.hoonsbara.com

출처 : http://cafe.naver.com/it2006.cafe?iframe_url=/ArticleRead.nhn%3Fclubid=11832319%26menuid=14%26articleid=231

쌈꼬쪼려 소백촌닭