이번 강좌는 가볍게 AJAX.NET 을 이용하여 DataSet 을 서버/클라이언트 간에 데이터 교환방법에 대해서 소개해 본다.
 
사실 AJAX.NET 이라고 하면 많은 사람들은 AJAX 툴중 Atlas 의 최신 버전인 AJAX.NET을 떠올리곤 한다. 하지만, 이보다 훨씬 먼저 등장한 것이 Atlas 가 아닌 AJAX.NET 이다.
AJAX.NET 은 AJAX.DLL 파일 달랑 하나만 참조하여 사용하는 방식이다.
 
 
현재 AJAX.NET 은 AjaxPro 라는 이름으로 최신 버전이 나온 상태이다. 하지만 필자가 AjaxPro 를 이용하여 실무에서 구현하면서 크로스 브라우져에 문제가 생겼다.
 
그것은 IE 7 에서 동작하던 몇몇 스크립트가 IE 6 에서는 동작하지 않았다. 물론 FireFox 에서는 잘 동작하는 모습을 보였다. 그래서 인지, 아직까지는 AjaxPro 를 사용하기 꺼려한다.
 
[그림1] 실행화면
 
 
Jobs 데이터베이스를 이용하여 유사한 단어를 검색하는 간단한 프로그램이다.
 
어플케이션 작성하기에 앞서 먼저 web.config 를 수정하여 보자.
<httpHandlers>
           <addverb="POST,GET"path="ajax/*.ashx"  type="Ajax.PageHandlerFactory, Ajax" />
 </httpHandlers>
<system.web> 섹션에 위의 구문을 추가하여야 한다.
 
이제 TextBox 에 단어가 입력될 때 호출될 서버측 메서드를 구현해 보자.
[Ajax.AjaxMethod]
public DataSet GetDataSet( string desc )
{
           DataSet ds = new DataSet();
 
           SqlDataAdapter da = new SqlDataAdapter(string.Format("SELECT * FROM jobs WHERE job_desc LIKE '%{0}%';", desc), ConnectionString);
 
           da.Fill(ds);
 
           return ds;
}
자바스크립트로 호출될 서버측 메서드
 
Jobs 데이터베이스의 job_desc 컬럼을 LIKE 조건으로 유사한 단어를 추출하여, DataSet 에 Fill 하여 return 하는 메서드다.
 
이제 html 페이지를 작성해보자.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>제목 없음</title>
    <script type="text/javascript">
                     function search( obj )
                     {
                                var desc = obj.value;
                               
                                _Default.GetDataSet( desc, search_callback );
                     }
                    
                     function search_callback( response )
                     {
                                var ds = response.value;
                               
                                if( ds == null && typeof(ds) != 'object')
                                {
                                          alert("에러. [3001]" + response.request.responseText);
                                }
                               
                                if( ds.Tables.length == 0 ) return;
                               
                                var s = "<ol>";
                                for( var i=0; i<ds.Tables[0].Rows.length; i++ )
                                {
                                          s += "<li>" + ds.Tables[0].Rows[i].job_desc + "</li>";
                                }
                                s += "</ol>";
                               
                                document.getElementById("result").innerHTML = s;
                     }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
                     <span style="font-size: 24pt">DataSet 제어하기 예제<br />
                                <br />
                                <span style="font-size: 12pt">JOB_DESC
                                          <asp:TextBox ID="TextBox1" runat="server" onkeyup="search( this );"></asp:TextBox><br />
                                          <br />
                                          <div id="result">
                                          </div>
                                </span></span>
           </div>
    </form>
</body>
</html>
 
웹폼의 샘플 프로그램
 
우선 TextBox1 서버컨트롤을 살펴보자. Onkeyup 이벤트에서 키보드 이벤트가 발생하면 자바스크립트의 search 함수를 호출하고 있다.
 
통상적으로 AjaxMethod 를 호출하는 방식은 “클래스.메서드명” 이다.
주의 : AjaxPro 에서는 “네임스페이스.클래스.메서드명” 으로 작성하여야 한다.
 
Callback 받은 DataSet 의 길이를 체크하는 방법은 무척 간단하다.
 
ds.Tables[0].Rows.length
 
뒤에 붙은 length 프로퍼티로(대소문자주의) Rows 의 개수를 구할 수 있다.
 
그외에 통상적으로 Ajax.Net 은 각각의 컬럼에 대해 자동적으로 프로퍼티를 생성하여 준다.
그렇기 때문에,
 
ds.Tables[0].Rows[i].job_desc
 
와 같은 구문은 정상적인 구문인 것이다.
 
그럼 마지막으로 Page_Load 이벤트에서 작성한 Ajax.Net 를 Http Handler 로 등록하여야 하는데 다음과 같이 단 한줄로 사용법이 무척 간단하다.
 
protected string ConnectionString = "server=(local); database=pubs; uid=sa; pwd=xxxx;";
protected void Page_Load(object sender, EventArgs e)
{
           Ajax.Utility.RegisterTypeForAjax(typeof(_Default));
}
Ajax.Net 을 Http Handler 로 등록할 수 있다.
 
이제 작성된 프로그램을 실행시켜 보자.
 
또한, 이 외에도 다양한 .NET 데이터 타입을 리턴 받을 수 있다.
다음을 살펴보자.
 
변환되는 데이터형
프로퍼티 엑세스의 예(설명)
System.Array(.NET 의 배열)
Array.length
System.Collection.ArrayList
arrayList[2]
System.Data.DataTable
dataTable.Rows[0]
System.Data.DataRow
dataRow[“name”]
System.DateTime
dateTime.Day
System.TimeSpan
timeSpan.Seconds
Ajax.Net 에서의 데이터형과 프로퍼티 엑세스 예제
 
위 표의 프로퍼티 엑세스 예를 살펴보고, 실제로 테스트 해 보도록 해보자.
이 외에도 정말 막강한 기능을 가지고 있지만, 다음의 기회에 좀 더 자세히 살펴 보도록 하자.
 
ASP.NET 2.0 에 들어와서 비동기 콜백을 지원하긴 하지만, 아직 써보지 않았다.
왜냐하면 콜백을 받기 위한 데이터 타입은 string 으로 한정되어 있기 때문이다.
 
Ajax.Net 을 이용한다면 마치 C# 과 같은 코드로 자바스크립트 코드를 작성 할 수 있기 때문에 필자는 Ajax.Net 을 자주 이용한다.
 
어제는 집앞에 새워놓은 내 애마가 견인되고, 오늘 일요일엔 갑자기 도발한 장염 덕분에 건대 응급실 구경도 해봤다. -_-;
 
몸이 안좋아서 이만 줄여야 겠다 ^^/

'.NET > AJAX' 카테고리의 다른 글

Ajax.Net 으로 DataSet 컬렉션 제어하기  (0) 2007.07.08
AJAX 로 구현한 윈도우  (0) 2007.04.06
Ajax.Net 의 두가지 콜백 방법의 차이  (0) 2007.04.05
채팅방 베타  (0) 2007.04.05
Ajax 를 활용한 간단한 채팅 로직  (0) 2007.04.05


실로 대단하다는 감탄사 밖에 나오지 않네요~

좌측에는 구글맵을 여닫을 수 있습니다.

또한, 마치 윈도우를 사용하듯이 여러개의 창을 띄워 원하는 사이트를 서핑 할 수 도 있지요..

윈도우에 너무 익숙해서인지, 딱히 편리한 기능은 없습니다.

하지만 브라우져에서 저런 기능을 구현했다는게 놀라울 다름이네요

http://www.openspot.com/

'.NET > AJAX' 카테고리의 다른 글

Ajax.Net 으로 DataSet 컬렉션 제어하기  (0) 2007.07.08
AJAX 로 구현한 윈도우  (0) 2007.04.06
Ajax.Net 의 두가지 콜백 방법의 차이  (0) 2007.04.05
채팅방 베타  (0) 2007.04.05
Ajax 를 활용한 간단한 채팅 로직  (0) 2007.04.05
 
이번에는 Ajax.Net ( 이하 Ajax ) 이 제시한 두가지 콜백 방법의 차이에 대해서 알아봅시다.
예제에 필요한 DLL 을 다운 받기 위해서 다음의 사이트에서 다운 받으실수 있습니다.
 
다운받은 DLL 을 프로젝트에 참조시킵니다.
 
다음은 Web.Config 파일에 다음의 구문을 추가 합니다.
<system.web>
<httpHandlers>
<addverb="*"path="*.ashx"type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
</system.web>
 
이제 기본 설정은 모두 마쳤습니다.
 
이번에도 여과없이 예제 샘플부터 보도록 하겠습니다.
publicpartialclassAjaxNet : System.Web.UI.Page
{
        protectedvoid Page_Load(object sender, EventArgs e)
        {
               AjaxPro.Utility.RegisterTypeForAjax( typeof(AjaxNet) );
 
               TextBox1.Attributes["OnKeyPress"]    = txtChange1(this)";
               TextBox2.Attributes["OnKeyPress"]    = txtChange2(this)";
        }
 
        [AjaxPro.AjaxMethod]
        publicstring GetMessage()
        {
               System.Threading.Thread.Sleep(1000);
               return"메서드가 호출되었습니다";
        }
} 
 
AjaxPro.Utility.RegisterTypeForAjax( typeof(AjaxNet) ); 의 구문으로 비동기 호출 대상 클래스를 등록할 수 있습니다. This.GetType() 과 같이 지정하신다면 정상적으로 작동되지 않습니다.
 
TextBox1.Attributes["OnKeyPress"]    = "txtChange1(this)";
TextBox2.Attributes["OnKeyPress"]    = "txtChange2(this)";
 
TextBox 에 밑의 html 소스에 포함되는 자바스크립트를 이벤트에 연결합니다.
 
GetMessage() 메서드는 콜백 받기 위한 메서드로 호출되면 1초의 쓰레드 Sleep을 주고 string을 리턴합니다
 
HTML 소스는 다음의 같습니다.
 
<headrunat="server">
    <title>제목 없음</title>
    <scripttype="text/javascript">
               function txtChange1( obj )
               {
                       if( obj.value.length == 9 )
                       {
                              alert( AjaxNet.GetMessage().value );
                       }
               }             
               function txtChange2( obj )
               {
                       if( obj.value.length == 9 || obj.value.length == 10)
                       {
                              AjaxNet.GetMessage(txtChange2_Callback);
                       }
               }             
               function txtChange2_Callback( response )
               {
                       var obj = response.value;
                       if( obj != null && typeof(obj) == "string" )
                       {
                              alert( obj );
                       }
               }
    </script>
</head>
<body>
    <formid="form1"runat="server">
    <div>
               <asp:TextBoxID="TextBox1"runat="server"MaxLength="100"></asp:TextBox>
               <p></p>
               <asp:TextBoxID="TextBox2"runat="server"MaxLength="100"></asp:TextBox>
    </div>
    </form>
</body>
 
 
(OnKeyPress 는 키보드가 눌려지는순간 발생하므로 10번째 텍스트부터 콜백이 일어납니다)
소스가 완성되었다면 각각 텍스트 박스에서 아무 알파벳을 꾸욱 누르고 계셔 보세요.
 
1. AjaxNet.GetMessage().value
 이 메서드가 호출되는 순간 스레가 1초 쉬고, 리턴받은string 을 보여줍니다.
 보시는 바와 같이 콜백이 모두 완료될때까지 클라이언트는 아무 것도 못합니다.
 마치, 컴퓨터가 잠깐 먹통이 된 듯 콜백이 완전히 종료되야 다음 텍스트가 눌러지는
 것을 확인할 수 있습니다.
 
2. AjaxNet.GetMessage(txtChange2_Callback);
 두번째 텍스트 박스의 함수는 Callback 과 매핑되어 있습니다.
 이상하게 1번 방법의 호출과는 상당히 다른 결과를 보여줍니다.
 눈치빠른 분이라면 잠깐 멈찟 하는듯 하나 키보드로 누른 텍스트는 이내 쭈욱 써지는
 것을 확인할 수 있습니다.
 
 
 이렇게 상이한 결과에 대해 많이 궁금하여 여러 문서를 검색해 보았으나, 그 이상의 해답을 찾지 못하였습니다.^^;
추측건데, 2번 경우의 호출은 단지 호출만 할뿐 Callback 에 대해선 txtChange2_Callback에게 위임하게 되고, 1번의 경우 호출과의 매핑된 콜백이 없기 때문에, 콜백이 완료되기 전까지 무한 대기 상태에 빠지는 듯 합니다.
 
다음에 또 기회가 된다면 보안적인 요소가 강화된 AjaxPro 에 추가된 AjaxEnum,AjaxProperty, 캐시,및 세션 다루는 방법에 대해 알아보도록 하겠습니다.
(기회가 된다면… ^^;; )
소스코드 첨부 하였습니다~
 
재미없는 글 읽어주셔서 감사합니다^^//

'.NET > AJAX' 카테고리의 다른 글

Ajax.Net 으로 DataSet 컬렉션 제어하기  (0) 2007.07.08
AJAX 로 구현한 윈도우  (0) 2007.04.06
Ajax.Net 의 두가지 콜백 방법의 차이  (0) 2007.04.05
채팅방 베타  (0) 2007.04.05
Ajax 를 활용한 간단한 채팅 로직  (0) 2007.04.05


Ajax 공부하면서 만들어본 채팅방 이네요

Com+ 공부도 할겸, 취업을 위한 포토폴리오로 사이트 만들던중에 찰싹~~ 취업이 되었지만

살인적인 프로젝트 기간때문에 만들다 말고 접었습니다. ^^;

필요하신 분에 한해서 일부 소스 발췌해 드립니다

-------------------------- UPDATE 2008-05-09 ---------------------------

다음의 주소에서 샘플 사이트에 접속할 수 있습니다.

http://blog.powerumc.kr/article/2008/04/10/comtech-and-dogye-network.aspx

'.NET > AJAX' 카테고리의 다른 글

Ajax.Net 으로 DataSet 컬렉션 제어하기  (0) 2007.07.08
AJAX 로 구현한 윈도우  (0) 2007.04.06
Ajax.Net 의 두가지 콜백 방법의 차이  (0) 2007.04.05
채팅방 베타  (0) 2007.04.05
Ajax 를 활용한 간단한 채팅 로직  (0) 2007.04.05



너무 허접하게 만들어서 공개를 할까 말까 많이 망설여 지네여

AJAX이 뭔지 막 접한 분들을 위한 소스이니,

참고만 하세여.. 별 도움 될랑가 몰겟네~~


'.NET > AJAX' 카테고리의 다른 글

Ajax.Net 으로 DataSet 컬렉션 제어하기  (0) 2007.07.08
AJAX 로 구현한 윈도우  (0) 2007.04.06
Ajax.Net 의 두가지 콜백 방법의 차이  (0) 2007.04.05
채팅방 베타  (0) 2007.04.05
Ajax 를 활용한 간단한 채팅 로직  (0) 2007.04.05

+ Recent posts