AjaxExample.zip이번 강좌는 가볍게 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 |
