[출처] jQuery를 사용하여 ASP.NET AJAX Web Service 호출하기 예제|작성자 파로스
닷넷을 사용하면서 제일 불편하고 짜증나는 것 중에 하나가 쓸데없는 코드가 너무 많다는 것과 애매모호한 PostBack 이다.
jQuery를 사용하면서 그런 느낌은 더욱 심해졌다.
그래서 사용한 방식이 서버단 처리를 모두 제네릭 처리기로 하였는데 뭔가 다른 방법을 써 보고 싶었다.
MVC가 요즘 뜨는거 같아서 그거로 할까 알아봤지만 뷰가 완전히 독립된 것이 아닌 닷넷 코드 혼합이다.
내가 원하는 것은 닷넷 코드가 전혀 들어가지 않은 순수 html + javascript + css로만 구성된 뷰페이지를 구성하는 것이다.
그래서 나온 결론은 웹서비스!
하지만 웹서비스는 기본으로 XML을 지원한다.
JSON을 사용하는 방법을 찾아봤지만 희안하게 한글 자료가 별로 없다. (검색 능력이 떨어지는지 없을리가 없는데~)
암튼 힘들게 찾은 사이트 물론 영어다.
설명은 자세히 되어 있는거 같은데 해석이 안되니~ 다른 한글 자료 찾아보다가 마땅한게 없어서 그냥 영문 사이트 소스보면서 대충 이해했다.
생각했던 것 보다는 훨씬 간단했다.
웹서비스 사이트 하나 만들고 거기에 원하는 데이타 뿌려주면 된다.
초간단으로 만든 예제.
이번에도 걸그룹이다. 레인보우~
웹서비스에 Rainbow 클래스를 하나 만들고 GetMember 메소드를 통해서 그룹명과 멤버리스트를 json 형식으로 가져오는 것이다.
사용법만 알면 어려움이 없기 때문에 흐름만 알면 충분하다.
내용이 별로 없어서 이번에도 녹화.
설명글 10번 읽는것보다 작업 내용 한번 직접 보는게 빠르다.
닷넷 3.5 이상에서는 보안상 결과값이 {"d": "data"} 형태로 리턴된다. 따라서 스크립트로 처리할때 한번 필터링(dtaFilter) 해준다
Rainbow.html
<!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>
<title>Rainbow</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
$.ajax({
type: "post",
url: "Service1.asmx/GetMember",
contentType: "application/json; charset=utf-8",
dataType: "json",
dataFilter: function(data) {
var msg;
if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function') {
msg = JSON.parse(data);
} else {
msg = eval('(' + data + ')');
}
if (msg.hasOwnProperty('d')) {
return msg.d;
} else {
return msg;
}
},
success: function(data) {
alert(data.groupName);
$("#groupName").text(data.groupName);
$("#memberList").text(data.memberList);
}
});
});
});
</script>
<style type="text/css">
#content { paddding:20px; }
#groupName { font-weight:bold; font-size:20px; }
#memberList { color:Blue; }
</style>
</head>
<body>
<div id="content">
<div id="groupName">그룹명</div>
<div id="memberList">멤버리스트</div>
<input type="button" value="클릭!" id="button" />
</div>
</body>
</html>
Service1.asmx.cs
기본 생성 코드에서 [System.Web.Script.Services.ScriptService] 이부분 주석을 풀어주면 json을 사용할 수 있다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace WebService2
{
/// <summary>
/// Service1의 요약 설명입니다.
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다.
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public Rainbow GetMember()
{
Rainbow r = new Rainbow();
r.groupName = "Rainbow";
r.memberList = "김재경,고우리,김지숙,노을,오승아,정윤혜,조현영";
return r;
}
}
public class Rainbow
{
public string groupName;
public string memberList;
}
}
[참고]
http://encosia.com/2009/02/10/a-breaking-change-between-versions-of-aspnet-ajax/
http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/
