WebMethod
환경: jQuery-1.4.2, ASP.NET 2.0, VISUAL STUDIO 2008
파일 첨부: Calling Web Method and Web Service with jQuery.zip
jQuery가 제공하는 jQuery.ajax() API를 사용하면 ASP.NET Ajax를 사용하여 웹 서비스나 웹 메서드를 호출 하는 코드를 jQuery를 통하여 구현이 가능하다. (ScriptManager 컨트롤을 사용 하지 않아도 된다)
jQuery.ajax() API는 내부적으로 Ajax(Asynchronous HTTP) 요청을 수행하며 매개변수를 통하여 post 및get 방식 호출 모두 가능 하다.
문법은 아래와 같으며 자세한 내용은 jQuery 사이트의 API 부분을 살펴 보자.
$.ajax(options) 요청의 생성 방법과 통보 받을 콜백을 제어하고자 전달된 options을 사용하여 Ajax 요청을 전송 한다.
매개변수 options (Object) 요청에 대한 매개변수를 정의하는 프로퍼티를 소유한 객체 인스턴스
반환값 XHR |
Options 매개변수는 이 함수의 동작을 제어하는 데 다양한 범위의 값을 명시할 수 있다. 모두 살펴 보는 것 보다 자주 쓰이는 항목을 위주로 설명을 하도록 하겠다.
이름 | 타입 | 설명 |
url | String | 요청 URL |
type | String | 사용할 HTTP 메서드. 일반적으로 POST나 GET을 사용한다. |
data | Object | 요청에 전달되는 프로퍼티를 가진 객체. GET 요청이면 데이터는 쿼리 문자열로 제공된다. POST 요청이면 데이터는 요청의 본문으로 제공된다. |
dataType | String | 응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드. 유효한 값은 다음과 같다. xml, html, json, jsonp, script, text |
timeout | Number | Ajax 요청의 제한시간을 밀리초 단위로 설정한다. |
contentType | String | 요청에 명시되는 콘텐츠 타입. |
success | Function | 응답이 성공 상태 코드를 반환하면 호출 되는 함수. |
error | Function | 응답이 에러 상태 코드를 반환하면 호출 되는 함수. |
complete | Function | 요칭이 완료 되면 호출 되는 함수. |
이제부터 실제 코드를 구현 하여 보자.
우선 웹 사이트를 하나 생성 하고 아래와 같은 과정을 따라 하여 보자.
1. jQuery를 사용하여 Page Method 호출하기.
예제 코드: CallingWebMethod.aspx
생성 된 웹 사이트에 Page Method 호출 코드를 구현 할 페이지를 하나 만든다.
나는 CallingWebMethod.aspx 페이지를 생성 하였다.
jQuery 라이브러리를 참조 하여야 한다. <head> 영역에 아래와 같은 코드를 추가한다.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"type="text/javascript"></script>
|
코드 비하인드(CallingWebMethod.aspx.cs)로 넘어가서 ASP.NET Ajax를 이용하여 페이지 메서드를 호출 할 때처럼 static으로 메서드를 하나 선언 하고 [WebMethod] Attribute를 부여 한다. System.Web.Services네임 스페이스도 추가 하여 주어야 한다.
CallingWebMethod.aspx.cs
using System.Web.Services;
public partial class CallingWebMethod : System.Web.UI.Page { [WebMethod] public static string GetDate() { return DateTime.Now.ToString(); } }
|
CallingWebMethod.aspx 페이지로 돌아와 위의 GetDate() 메서드를 호출 하고 결과를 표시할 UI 영역을 작성 하도록 하자.
날짜를 가져와 표시할 <div> HTML 컨트롤을 하나 배치 한다.
CallingWebMethod.aspx
<div id="Result"> Click here for the time. </div>
|
이제는 실제로 jQuery를 사용하여 Page Method를 호출하고 위의 <div> 에 결과 값을 표시 하는 코드를 자바스크립트로 작성 하도록 하겠다.
CallingWebMethod.aspx
<script language="javascript" type="text/javascript"> $(document).ready(function() { // Result div에 onclick 핸들러를 추가하고 핸들러 코드는 페이지 메서드를 호츨 한다. $("#Result").click(function() { $.ajax({ type: "POST", url: "CallingWebMethod.aspx/GetDate", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { // 페이지 메서드 반환 값을 Result div에 삽입한다. $("#Result").text(msg.d); } }); }); }); </script>
|
위의 코드가 복잡해 보일지는 몰라도 사실은 매우 간단하다.
주의해서 보야 할 부분은 $.ajax({ ... }); 이 부분인데 내부 매개 변수는 모두 jQuery.ajax(settings) API의settings 에 해당 하는 부분이다.
url 옵션에 정확한 페이지명 (페이지명/메소드명)만 지정 하여 준다면 정상적으로 동작 할 것이며 success옵션에 호출 성공시에 처리할 코드를 작성 하여 주면 된다.
전체 코드는 첨부 파일의 CallingWebMethod.aspx 페이지를 확인 하여 보자.
2. jQuery를 사용하여 Web Service 호출하기.
예제 코드: CallingWebService.aspx
jQuery를 사용하여 웹 서비스를 호출 하는 것 또한 위에서 살펴본 페이지 메서드와 크게 다르지 않으며 다만url 영역에 웹서비스 주소만 적절하게 넘겨 주면 된다.
생성 된 웹 사이트에 Web Service 호출 코드를 구현 할 페이지를 하나 만든다.
나는 CallingWebService.aspx 페이지를 생성 하였다.
jQuery 라이브러리를 참조 하는 코드나 UI를 담당할 div는 동일 하다.
이제 호출 대상이 될 웹 서비스를 생성 하도록 한다. 웹 사이트에 WebService.asmx를 추가 한다.
WebService.cs를 열고 호출할 메서드 코드를 작성 한다.
메서드 명은 동일 하며 [WebMethod] Attribute 또한 부여한다. 단 이 웹 서비스를 ajax가 호출 할 수 있도록 하기 위해서는 웹 서비스 생성시에 적용 되어 있는 주석 부분을 제거 하여[System.Web.Script.Services.ScriptService] 속성이 활성화 되도록 하여야 한다.
WebService.cs
[WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService () { //디자인된 구성 요소를 사용하는 경우 다음 줄의 주석 처리를 제거합니다. //InitializeComponent(); }
[WebMethod] public string GetDate() { return DateTime.Now.ToString(); } }
|
CallingWebService.aspx 페이지로 돌아와 위 웹 서비스의 GetDate() 메서드를 호출 하는 코드를 작성 하자.
CallingWebService.aspx
<script language="javascript" type="text/javascript"> $(document).ready(function() { // Result div에 onclick 핸들러를 추가하고 핸들러 코드는 웹서비스 메서드를 호츨 한다. $("#Result").click(function() { $.ajax({ type: "POST", url: "WebService.asmx/GetDate", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { // 페이지 메서드 반환 값을 Result div에 삽입한다. $("#Result").text(msg.d); } }); }); }); </script>
|
코드는 url 옵션 영역을 제외 하고 jQuery를 사용하여 Page Method 호출하기에서 살펴 본 것과 거의 동일 하다.
url 옵션에 웹서비스명/메서드명으로 수정 된 것을 주의 깊게 보자.
이렇게 jQuery를 사용하여 직접 웹 서비스나 페이지 메서드를 호출 하면 약 100KB 이상의 자바스크립트 코드와 3개의 추가적인 HTTP 요청을 제거 할 수 있다.
|
출처: http://hsj0511.tistory.com/268 [방랑이 ...]