[Article]Ajax & Ajax.NET

1. AJAX (Asynchronous Javascript And Xmlhttp)

Ajax(Asynchronous JavaScript and XML) 혹은 AJAX는 대화식 웹 어플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다:
표현 정보를 위한 HTML (또는 XHTML) 과 CSS
동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 어플리케이션은 XML/XSLT 대신 미리 정의된 HTML 이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).
DHTML과 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다.
Ajax 어플리케이션은 실행을 위한 플랫폼으로 위에서 열거한 기술들을 지원하는 웹 브라우저를 이용한다. 이것을 지원하는 브라우저로는 모질라 파이어폭스, 인터넷 익스플로러, 오페라, 사파리 등이 있다.

2. Ajax 어플리케이션은 기존의 웹 어플리케이션과 무엇이 다른가

기존의 웹 어플리케이션

폼을 채우고 제출(submit)을 하면, 웹 서버로 요청을 보내도록 한다. 웹 서버는 전송된 내용에 따라서 새로운 웹 페이지를 작성하여 결과물을 되돌려준다.
이때 최초에 폼을 가지고 있던 사이트와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 두 페이지 사이에 중복되는 HTML코드로 인해 많은 대역폭을 낭비하게 된다.
네이티브 어플리케이션과 비교할 때 복잡한 대화형 사용자 인터페이스를 작성하기가 어렵다.

Ajax 어플리케이션

필요한 데이터만을 주도록 웹 서버에 요청할 수 있다.
보통 SOAP나 XML 기반의 웹 서비스 언어를 사용하며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서 자바스크립트를 쓴다.
그 결과로 웹 브라우저와 웹 서버 사이의 교환되는 데이터량이 줄어들기 때문에 어플리케이션의 응답성이 좋아진다. 요청을 주는 수많은 컴퓨터에서 이 같은 일이 일어나기 때문에, 전체적인 웹 서버 처리량도 줄어들게 된다

3. AJAX.NET

http://ajax.schwarz-interactive.de/csharpsample/default.aspx
이 공통 라이브러리는 ASP.NET에서 작성한 메소드를 그 이름 그대로 자바스크립트에서 호출할 수 있게 해준다.(동기/비동기)

* 웹폼 메서드

[Ajax.AjaxMethod]
public string Test(string s)
{
string strReturn = s + " World";
return strReturn;
}

* 자바스크립트에서 바로 웹폼 메서드를 호출

function btn1_onclick()
{
  var response = WebForm1.Test(“Hello ");
  alert(response.value);
}

4. AJAX.NET 아키텍처

기존에는 XmlHttp를 통해서 웹 페이지 혹은 웹 서비스를 호출하는 함수를 만들어야 했는데, AJAX.NET은 이 라이브러리를 참조하고 AjaxMethod 어트리뷰트를 추가하면 그런 함수를 자동으로 렌더링시켜주게 된다.

5. AJAX.NET 사용법

Step1. ajax.dll 참조
Step2. 다음 내용을 Web.Config에 추가

<configuration>
<system.web>
  <httpHandlers>
  <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
  </httpHandlers>      ...
<system.web>
</configuration>

Step3. 페이지 로드에 다음을 추가

private void Page_Load(object sender, EventArgs e){
    Ajax.Utility.RegisterTypeForAjax(typeof(Index));     
    //...
  }

Step4. AjaxMethod를 작성하고, 스크립트에서 호출(위의 예제 참조)