다음을 통해 공유


ASP.NET AJAX의 웹 서비스 사용

업데이트: 2007년 11월

이 항목에서는 AJAX 사용 ASP.NET 웹 페이지의 클라이언트 스크립트에서 웹 서비스에 액세스하는 방법을 설명합니다. 서비스는 사용자가 만든 사용자 지정 서비스나 기본 제공 응용 프로그램 서비스일 수 있습니다. 응용 프로그램 서비스는 ASP.NET AJAX의 일부로 제공되며 인증, 역할 및 프로필 서비스를 포함합니다.

사용자 지정 웹 서비스는 ASP.NET 웹 서비스 형식(.asmx 서비스)이나 WCF(Windows Communication Foundation) 서비스 형식(.svc 서비스)일 수 있습니다.

이 항목에서는 다음 내용에 대해 설명합니다.

  • 시나리오

  • 배경

  • 예제

  • 추가 리소스

  • 클래스 참조

  • 새로운 기능

시나리오

다음 경우에 WCF 및 ASP.NET을 사용합니다.

  • WCF 서비스를 이미 만든 경우 AJAX 사용 웹 페이지의 스크립트에서 이 서비스에 액세스하는 데 사용할 수 있는 끝점을 추가할 수 있습니다. 자세한 내용은 WCF 서비스를 클라이언트 스크립트로 노출를 참조하십시오.

  • ASP.NET 웹 서비스(.asmx)를 이미 만든 경우 AJAX 사용 웹 페이지의 스크립트에서 동일한 서비스에 액세스하는 데 사용할 수 있도록 서비스를 수정할 수 있습니다. 자세한 내용은 웹 서비스를 클라이언트 스크립트로 노출을 참조하십시오.

  • ASP.NET AJAX 웹 페이지에서 액세스할 사용자 지정 웹 서비스를 만들려면 서비스를 WCF 서비스나 ASP.NET 웹 서비스(.asmx 파일)로 구현할 수 있습니다.

  • AJAX 사용 웹 페이지에서 실행하는 클라이언트 스크립트를 통해 사용자의 인증, 역할 및 프로필 정보에 액세스하기 위해 기본 제공 ASP.NET 응용 프로그램 서비스를 사용할 수 있습니다. 자세한 내용은 ASP.NET AJAX에서 폼 인증 사용을 참조하십시오.

배경

ASP.NET을 사용하면 웹 페이지의 클라이언트 스크립트에서 액세스할 수 있는 웹 서비스를 만들 수 있습니다. 이 페이지에서는 AJAX 기술을 사용하여 웹 서비스를 호출하는 웹 서비스 통신 계층을 통해 서버와 통신합니다. 데이터는 일반적으로 JSON 형식으로 클라이언트와 서버 간에 비동기적으로 교환됩니다.

AJAX 클라이언트의 클라이언트-서버 통신

AJAX 사용 웹 페이지에서 브라우저는 초기에 서버에 페이지를 요청한 다음 이후에 웹 서비스에 데이터를 비동기적으로 요청합니다. 클라이언트 통신 요소는 서버와 핵심 클라이언트 스크립트 라이브러리에서 다운로드한 프록시 클래스의 형식입니다. 서버 통신 요소는 처리기와 사용자 지정 서비스입니다. 다음 그림에서는 클라이언트와 서버 간 통신과 관련된 요소를 보여 줍니다.

클라이언트 서버 통신

AJAX 클라이언트 아키텍처

브라우저에서는 프록시 클래스를 사용하여 웹 서비스 메서드를 호출합니다. 프록시 클래스는 서버에서 자동으로 생성되어 페이지 로드 시간에 브라우저로 다운로드되는 스크립트입니다. 프록시 클래스는 웹 서비스의 노출된 메서드를 나타내는 클라이언트 개체를 제공합니다.

웹 서비스 메서드를 호출하기 위해 클라이언트 스크립트에서는 프록시 클래스의 해당 메서드를 호출합니다. 이 호출은 XMLHTTP 개체를 통해 비동기적으로 이루어집니다.

웹 서비스 통신 계층에는 프록시 클래스에서 서비스를 호출하는 데 사용할 수 있는 라이브러리 스크립트 형식이 포함되어 있습니다. 자세한 내용은 Sys.Net 네임스페이스에 포함된 클래스를 참조하십시오.

프록시 클래스와 핵심 웹 서비스 통신 계층의 코드에서는 XMLHTTP를 덜 복잡하게 표시하고 브라우저 사이의 차이점을 숨깁니다. 따라서 웹 서비스를 호출하는 데 필요한 클라이언트 스크립트가 단순해집니다.

다음 두 방법을 사용하여 웹 서비스를 요청합니다.

  • HTTP POST 동사를 사용하여 웹 서비스를 호출합니다. POST 요청에는 브라우저가 서버에 보내는 데이터를 포함하는 본문이 있습니다. 이 본문에는 크기 제한이 없습니다. 따라서 데이터 크기가 GET 요청의 기본 크기 제한을 초과하는 경우 POST 요청을 사용할 수 있습니다. 클라이언트에서는 요청을 JSON 형식으로 serialize하여 서버에 POST 데이터로 보냅니다. 서버에서는 JSON 데이터를 .NET Framework 형식으로 deserialize하고 웹 서비스를 실제로 호출합니다. 응답 동안 서버는 반환 값을 serialize하여 클라이언트에 다시 전달하고 클라이언트는 이 값을 처리하기 위해 JavaScript 개체로 deserialize합니다.

  • HTTP GET 동사를 사용하여 웹 서비스를 호출합니다. 이 방법은 POST 요청의 기능과 비슷하지만 다음과 같은 차이점이 있습니다.

    • 클라이언트에서 쿼리 문자열을 사용하여 서버에 매개 변수를 보냅니다.

    • GET 요청에서는 ScriptMethodAttribute 특성을 사용하여 구성한 웹 서비스 방법만 호출할 수 있습니다.

    • 데이터 크기는 브라우저에서 허용하는 URL 길이로 제한됩니다.

      참고:

      서버의 데이터를 수정하거나 중요한 정보를 노출하는 메서드 호출에서는 GET 요청을 사용하지 말아야 합니다. GET 요청에서 메시지는 브라우저에 의해 URL로 인코딩되므로 훼손되기가 쉽습니다 GET 및 POST 요청 모두에 대해 보안 지침을 따라야 중요한 데이터를 보호할 수 있습니다.

다음 그림에서는 ASP.NET AJAX 클라이언트 아키텍처를 보여 줍니다.

AJAX 클라이언트 아키텍처

클라이언트 아키텍처의 요소에는 코어 라이브러리의 웹 서비스 통신 계층과 페이지에서 사용되는 서비스의 다운로드한 프록시 클래스가 포함됩니다 그림에 표시된 개별 요소는 다음과 같습니다.

  • 사용자 지정 서비스 프록시 클래스. 서버에서 자동으로 생성되어 브라우저로 다운로드되는 스크립트로 구성됩니다. 프록시 클래스는 페이지에서 사용되는 각 WCF 또는 ASMX 서비스에 대한 개체를 제공합니다. 즉, 페이지에서 ScriptManager 컨트롤의 각 ServiceReferences 요소에 있는 각 항목에 대한 개체를 제공합니다. 클라이언트 스크립트에서 프록시 메서드를 호출하면 서버의 해당 웹 서비스 메서드에 대한 비동기 요청이 생성됩니다.

  • 인증 프록시 클래스. AuthenticationService 프록시 클래스는 서버 인증 응용 프로그램 서비스에서 생성됩니다. 이 클래스를 사용하면 서버에 대한 라운드드립을 수행하지 않고도 브라우저에서 JavaScript를 통해 로그인하거나 로그아웃할 수 있습니다.

  • 역할 프록시 클래스. RoleService 프록시 클래스는 서버 역할 응용 프로그램 서비스에서 생성됩니다. 이 클래스를 사용하면 서버에 대한 라운드트립을 수행하지 않고도 사용자를 그룹화하고 JavaScript를 통해 각 그룹을 하나의 단위로 처리할 수 있습니다. 서버의 리소스에 대한 액세스를 허용하거나 거부할 때 편리하게 이용할 수 있습니다.

  • 프로필 프록시 클래스. ProfileService 프록시 클래스는 서버 프로필 응용 프로그램 서비스에서 생성됩니다. 이 클래스를 사용하면 클라이언트에서 서버에 대한 라운드트립을 수행하지 않고도 JavaScript를 통해 현재 사용자의 프로필 정보를 사용할 수 있습니다.

  • 페이지 메서드 프록시 클래스. 클라이언트 스크립트에서 ASP.NET 페이지의 정적 메서드를 웹 서비스 메서드처럼 호출할 수 있는 스크립팅 인프라를 제공합니다. 자세한 내용은 클라이언트 스크립트에서 웹 서비스 호출을 참조하십시오.

  • 웹 서비스 통신 계층. 클라이언트 스크립트 형식을 포함하는 라이브러리입니다. 이러한 형식을 사용하여 브라우저(클라이언트)가 서버의 서비스와 통신할 수 있습니다. 또한 클라이언트와 서버 간의 비동기 통신을 설정하고 유지 관리하는 것과 관련된 복잡한 내용을 클라이언트 응용 프로그램에서 숨깁니다. 이 클래스는 비동기 기능을 제공하는 브라우저 XMLHTTP 개체를 캡슐화하고 클라이언트 응용 프로그램이 브라우저에 종속되지 않게 할 수 있습니다. 다음은 웹 서비스 통신 계층의 주 요소입니다.

    • 클라이언트 스크립트에서 웹 요청을 수행하기 위한 기능을 제공합니다. WebRequest 클래스를 참조하십시오.

    • 연결된 실행자 개체에 대해 Sys.Net.WebRequest 개체에서 발생되는 웹 요청의 흐름을 관리합니다. 자세한 내용은 WebRequestManager 클래스를 참조하십시오.

    • 브라우저의 XMLHTTP 지원 기능을 사용하여 비동기 네트워크 요청을 실행합니다. 자세한 내용은 XmlHttpExecutor 클래스를 참조하십시오.

    • JSON Serialization. JavaScript 개체를 JSON 형식으로 serialize합니다. Deserialization은 JavaScript eval 함수를 사용하여 실행할 수 있습니다. 자세한 내용은 JavaScriptSerializer 클래스를 참조하십시오.

기본 serialization 형식은 JSON이지만 웹 서비스와 ASP.NET 웹 페이지의 개별 메서드에서는 XML과 같은 대체 형식을 반환할 수 있습니다. 메서드의 serialization 형식은 속성을 사용하여 지정할 수 있습니다. 예를 들어 ASMX 서비스의 경우 다음 예제에 표시된 대로 웹 서비스 메서드에서 XML 데이터를 반환하도록 ScriptMethodAttribute 속성을 설정할 수 있습니다.

[ScriptMethod(ResponseFormat.Xml)] 

<ScriptMethod(ResponseFormat.Xml)> 

AJAX 서버 아키텍처

다음 그림에서는 클라이언트 응용 프로그램과 통신할 수 있게 하는 요소가 포함된 AJAX 서버 아키텍처를 보여 줍니다.

AJAX 서버 아키텍처

서버 아키텍처의 요소에는 HTTP 처리기와 serialization 클래스가 있는 웹 서비스 통신 계층, 사용자 지정 서비스, 페이지 메서드 및 응용 프로그램 서비스가 포함됩니다. 그림에 표시된 개별 요소는 다음과 같습니다.

  • 사용자 지정 웹 서비스. 클라이언트에 대해 적절한 응답을 구현하고 반환하는 서비스 기능을 제공합니다. 사용자 지정 웹 서비스는 ASP.NET 또는 WCF 서비스일 수 있습니다. 웹 서비스 통신 계층에서는 클라이언트에서 비동기적으로 호출할 수 있는 클라이언트 스크립트 프록시 클래스를 자동으로 생성합니다.

  • 페이지 메서드. 이 구성 요소를 사용하면 ASP.NET 페이지의 메서드를 웹 서비스 메서드처럼 호출할 수 있습니다. 페이지 메서드는 페이지 메서드 호출을 수행하는 페이지에서 정의해야 합니다.

  • 인증 서비스. 인증 서비스에서는 사용자가 클라이언트 JavaScript를 통해 로그인하거나 로그아웃하는 데 사용할 수 있는 인증 프록시 클래스를 생성합니다. 이 응용 프로그램 서비스는 항상 사용할 수 있으므로 인스턴스화할 필요가 없습니다. 자세한 내용은 ASP.NET AJAX에서 폼 인증 사용을 참조하십시오.

  • 역할 서비스. 역할 서비스에서는 클라이언트 JavaScript를 통해 현재 인증된 사용자의 역할 정보에 액세스하는 데 사용할 수 있는 역할 프록시 클래스를 생성합니다. 이 응용 프로그램 서비스는 항상 사용할 수 있으므로 인스턴스화할 필요가 없습니다. 자세한 내용은 ASP.NET AJAX에서 역할 정보 사용을 참조하십시오.

  • 프로필 서비스. 프로필 서비스에서는 클라이언트 JavaScript를 통해 현재 요청과 연관된 사용자의 프로필 속성을 가져오고 설정하는 데 사용할 수 있는 프로필 프록시 클래스를 생성합니다. 이 응용 프로그램 서비스는 항상 사용할 수 있으므로 인스턴스화할 필요가 없습니다. 자세한 내용은 ASP.NET AJAX에서 프로필 정보 사용을 참조하십시오.

  • JSON Serialization. 서버 JSON serialization 구성 요소를 사용하면 일반 .NET Framework 형식과 JSON 형식 간의 사용자 지정 serialization 및 deserialization을 수행할 수 있습니다. 자세한 내용은 JavaScriptSerializer를 참조하십시오.

  • XML Serialization. 웹 서비스 통신 계층에서는 XML serialization을 지원하므로 웹 서비스에 대한 SOAP 요청을 실행할 수 있고 웹 서비스에 대한 JSON 요청에서 XML 형식을 반환할 수 있습니다.

예제

다음 예제에서는 클라이언트 스크립트에서 ASP.NET 및 WCF 서비스를 호출하는 방법을 보여 줍니다. 클라이언트에서 응용 프로그램 서비스를 호출하는 방법에 대한 예제는 설명서의 다른 단원을 참조하십시오. 이 항목의 뒷부분에 관련 링크가 있습니다.

AJAX에서 웹 서비스 메서드 호출

.NET Framework를 사용하면 브라우저에서 클라이언트 스크립트를 통해 ASP.NET 웹 서비스(.asmx) 메서드를 호출할 수 있습니다. 브라우저와 서버 간에 데이터만 전송되기 때문에 페이지에서 포스트백 및 전체 페이지에 대한 새로 고침 없이 서버 기반 메서드를 호출할 수 있습니다.

다음 예제에서는 ASP.NET 웹 페이지에서 웹 서비스 메서드를 노출하는 방법을 보여 줍니다.

<%@ Page Language="VB" %>

<!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 id="Head1" >
        <style type="text/css">
            body {  font: 11pt Trebuchet MS;
                    font-color: #000000;
                    padding-top: 72px;
                    text-align: center }

            .text { font: 8pt Trebuchet MS }
        </style>

        <title>Simple Web Service</title>

            <script type="text/javascript">

            // This function calls the Web Service method.  
            function GetServerTime()
            {
                Samples.AspNet.ServerTime.GetServerTime(OnSucceeded);
            }

            // This is the callback function that
            // processes the Web Service return value.
            function OnSucceeded(result)
            {
                var RsltElem = document.getElementById("Results");
                RsltElem.innerHTML = result;
            }

        </script>

    </head>

    <body>
        <form id="Form1" >
         <asp:ScriptManager  ID="scriptManager">
                <Services>
                    <asp:ServiceReference path="ServerTime.asmx" />
                </Services>
            </asp:ScriptManager>
            <div>
                <h2>Server Time</h2>
                    <p>Calling a service that returns the current server time.</p>

                    <input id="EchoButton" type="button" 
                        value="GetTime" onclick="GetServerTime()" />
            </div>
        </form>

        <hr/>

        <div>
            <span id="Results"></span>
        </div>   

    </body>

</html>
<%@ Page Language="C#" %>

<!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 id="Head1" >
        <style type="text/css">
            body {  font: 11pt Trebuchet MS;
                    font-color: #000000;
                    padding-top: 72px;
                    text-align: center }

            .text { font: 8pt Trebuchet MS }
        </style>

        <title>Simple Web Service</title>

            <script type="text/javascript">

            // This function calls the Web Service method.  
            function GetServerTime()
            {
                Samples.AspNet.ServerTime.GetServerTime(OnSucceeded);
            }

            // This is the callback function that
            // processes the Web Service return value.
            function OnSucceeded(result)
            {
                var RsltElem = document.getElementById("Results");
                RsltElem.innerHTML = result;
            }

        </script>

    </head>

    <body>
        <form id="Form1" >
         <asp:ScriptManager  ID="scriptManager">
                <Services>
                    <asp:ServiceReference path="ServerTime.asmx" />
                </Services>
            </asp:ScriptManager>
            <div>
                <h2>Server Time</h2>
                    <p>Calling a service that returns the current server time.</p>

                    <input id="EchoButton" type="button" 
                        value="GetTime" onclick="GetServerTime()" />
            </div>
        </form>

        <hr/>

        <div>
            <span id="Results"></span>
        </div>   

    </body>

</html>

다음 예제에서는 페이지 스크립트를 통해 호출되는 웹 페이지와 관련 웹 서비스를 보여 줍니다.

<%@ WebService Language="VB" Class="Samples.AspNet.ServerTime" %>

Imports System.Web
Imports System.Web.Services
Imports System.Xml
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services

Namespace Samples.AspNet

    <WebService(Namespace:="http://tempuri.org/")> _
    <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
    <ScriptService()> _
    Public Class ServerTime
        Inherits System.Web.Services.WebService

        <WebMethod()> _
        Public Function GetServerTime() As String
            Return String.Format("The current time is {0}.", _
                DateTime.Now)

        End Function
    End Class

End Namespace

<%@ WebService Language="C#" Class="Samples.AspNet.ServerTime" %>

using System;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

namespace Samples.AspNet
{

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    public class ServerTime : System.Web.Services.WebService
    {

        [WebMethod]
        public string GetServerTime()
        {
            return String.Format("The server time is {0}.", 
                DateTime.Now);

        }

    }

}

AJAX 클라이언트에서 HTTP 요청 수행

이전 예제에서는 클라이언트 스크립트에서 웹 서버에 대해 자동으로 생성된 프록시 클래스를 호출하여 웹 서비스를 호출하는 방법을 보여 주었습니다. 또한 클라이언트 스크립트에서 웹 서비스에 대한 하위 수준 호출도 수행할 수 있습니다. 통신 계층을 관리하거나 서버와 주고받는 데이터를 검사해야 하는 경우에 이렇게 할 수 있습니다. 웹 서비스를 이와 같이 호출하려면 WebRequest 클래스를 사용합니다.

다음 예제에서는 WebRequest 개체를 사용하여 지정된 URL(HTTP 끝점)에 연결하는 GET 및 POST 웹 요청을 구현하는 방법을 보여 줍니다.

// ConnectingEndPoints.js

var resultElement;

function pageLoad()
{
    resultElement = $get("ResultId");
}

// This function performs a GET Web request.
function GetWebRequest()
{
    alert("Performing Get Web request.");

    // Instantiate a WebRequest.
    var wRequest = new Sys.Net.WebRequest();

    // Set the request URL.      
    wRequest.set_url("getTarget.htm");
    alert("Target Url: getTarget.htm");

    // Set the request verb.
    wRequest.set_httpVerb("GET");

    // Set the request callback function.
    wRequest.add_completed(OnWebRequestCompleted);

    // Clear the results area.
    resultElement.innerHTML = "";

    // Execute the request.
    wRequest.invoke();  
}

// This function performs a POST Web request.
function PostWebRequest()
{
    alert("Performing Post Web request.");

    // Instantiate a WebRequest.
    var wRequest = new Sys.Net.WebRequest();

    // Set the request URL.      
    wRequest.set_url("postTarget.aspx");
    alert("Target Url: postTarget.aspx");

    // Set the request verb.
    wRequest.set_httpVerb("POST");

    // Set the request handler.
    wRequest.add_completed(OnWebRequestCompleted);

    // Set the body for he POST.
    var requestBody = 
        "Message=Hello! Do you hear me?";
    wRequest.set_body(requestBody);
    wRequest.get_headers()["Content-Length"] = 
        requestBody.length;

    // Clear the results area.
   resultElement.innerHTML = "";

    // Execute the request.
    wRequest.invoke();              
}


// This callback function processes the 
// request return values. It is called asynchronously 
// by the current executor.
function OnWebRequestCompleted(executor, eventArgs) 
{    
    if(executor.get_responseAvailable()) 
    {
        // Clear the previous results. 

       resultElement.innerHTML = "";

        // Display Web request status. 
       resultElement.innerHTML +=
          "Status: [" + executor.get_statusCode() + " " + 
                    executor.get_statusText() + "]" + "<br/>";

        // Display Web request headers.
       resultElement.innerHTML += 
            "Headers: ";

       resultElement.innerHTML += 
            executor.getAllResponseHeaders() + "<br/>";

        // Display Web request body.
       resultElement.innerHTML += 
            "Body:";

      if(document.all)
        resultElement.innerText += 
           executor.get_responseData();
      else
        resultElement.textContent += 
           executor.get_responseData();
    }

}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

AJAX에서 WCF 서비스 작업 호출

WCF(Windows Communication Foundation) 서비스(.svc)를 .asmx 기반 서비스를 호출할 때와 거의 같은 방법으로 클라이언트에서 비동기적으로 호출할 수 있습니다. 다음 예제에서는 ASP.NET 웹 페이지에서 WCF 서비스 작업을 노출하고 호출하는 방법을 보여 줍니다.

<%@ Page Language="VB" AutoEventWireup="true" %>

<!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 >
    <style type="text/css">
        body {  font: 11pt Trebuchet MS;
                font-color: #000000;
                padding-top: 72px;
                text-align: center }

        .text { font: 8pt Trebuchet MS }
    </style>
    <title>Simple WCF Service Page</title>

</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1" >
            <Services>
                <asp:ServiceReference 
                    Path="SimpleService.svc/ws"/>
            </Services>
            <Scripts>
                <asp:ScriptReference Path="service.js" />
            </Scripts>
        </asp:ScriptManager>
        
        <div>
            <h2>Simple WCF Service</h2>
            <input type='button' name="clickme"  value="Greetings" 
                onclick="javascript:OnClick()" /> &nbsp; &nbsp;
            <input type='button' name="clickme2"  value="Greetings2" 
                onclick="javascript:OnClick2()" />
            <hr/>
            <div>
                <span id="Results"></span>
            </div> 
        </div>

    </form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true"%>

<!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 >
    <style type="text/css">
        body {  font: 11pt Trebuchet MS;
                font-color: #000000;
                padding-top: 72px;
                text-align: center }

        .text { font: 8pt Trebuchet MS }
    </style>
    <title>Simple WCF Service Page</title>

</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1" >
            <Services>
                <asp:ServiceReference 
                    Path="SimpleService.svc/ws"/>
            </Services>
            <Scripts>
                <asp:ScriptReference Path="service.js" />
            </Scripts>
        </asp:ScriptManager>
        
        <div>
            <h2>Simple WCF Service</h2>
            <input type='button' name="clickme"  value="Greetings" 
                onclick="javascript:OnClick()" /> &nbsp; &nbsp;
            <input type='button' name="clickme2"  value="Greetings2" 
                onclick="javascript:OnClick2()" />
            <hr/>
            <div>
                <span id="Results"></span>
            </div> 
        </div>

    </form>
</body>
</html>
var ServiceProxy;

function pageLoad()
{
    ServiceProxy = new ISimpleService();
    ServiceProxy.set_defaultSucceededCallback(SucceededCallback);
}

function OnClick()
{
    // var myService = new ISimpleService();
    ServiceProxy.HelloWorld1("George");
}

function OnClick2()
{
    var dc = new DataContractType();
    dc.FirstName = "George";
    dc.LastName = "Washington";
    ServiceProxy.HelloWorld2(dc);      
}

// This is the callback function that
// processes the Web Service return value.
function SucceededCallback(result, userContext, methodName)
{
    var RsltElem = document.getElementById("Results");
    RsltElem.innerHTML = result + " from " + methodName + ".";
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
Imports System
Imports System.Web
Imports System.Collections
Imports System.Collections.Generic
Imports System.Threading
Imports System.Xml
Imports System.Xml.Serialization
Imports System.Text
Imports System.IO
Imports System.Runtime.Serialization
Imports System.ServiceModel
Imports System.ServiceModel.Description
Imports System.ServiceModel.Dispatcher
Imports System.ServiceModel.Channels
Imports System.ServiceModel.Activation


' This a WCF service which consists of a contract, 
' defined below as ISimpleService, and DataContractType, 
' a class which implements that interface, see SimpleService, 
' and configuration entries that specify behaviors associated with 
' that implementation (see <system.serviceModel> in web.config)
Namespace Aspnet.Samples.SimpleService

    <ServiceContract()> _
    Public Interface ISimpleService
        <OperationContract()> _
        Function HelloWorld1(ByVal value1 As String) As String
        <OperationContract()> _
        Function HelloWorld2(ByVal dataContractValue1 _
        As DataContractType) As String
    End Interface 'ISimpleService

    <ServiceBehavior(IncludeExceptionDetailInFaults:=True), _
    AspNetCompatibilityRequirements(RequirementsMode:= _
    AspNetCompatibilityRequirementsMode.Allowed)> _
    Public Class SimpleService
        Implements ISimpleService

        Public Sub New()

        End Sub 'New

        Public Function HelloWorld1(ByVal value1 As String) As String _
        Implements ISimpleService.HelloWorld1
            Return "Hello " + value1
        End Function 'HelloWorld1

        Public Function HelloWorld2(ByVal dataContractValue1 _
        As DataContractType) As String _
        Implements ISimpleService.HelloWorld2
            Return "Hello " + dataContractValue1.FirstName + " " + _
            dataContractValue1.LastName
        End Function 'HelloWorld2
    End Class 'SimpleService

    <DataContract()> _
    Public Class DataContractType
        Private _firstName As String
        Private _lastName As String


        <DataMember()> _
        Public Property FirstName() As String
            Get
                Return _firstName
            End Get
            Set(ByVal value As String)
                _firstName = value
            End Set
        End Property

        <DataMember()> _
        Public Property LastName() As String
            Get
                Return _lastName
            End Get
            Set(ByVal value As String)
                _lastName = value
            End Set
        End Property
    End Class 'DataContractType 
End Namespace

using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Threading;
using System.Xml;
using System.Xml.Serialization;
using System.Text;
using System.IO;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Description;
using System.ServiceModel.Dispatcher;
using System.ServiceModel.Channels;
using System.ServiceModel.Activation;

// This a WCF service which consists of a contract, 
// defined below as ISimpleService, and DataContractType, 
// a class which implements that interface, see SimpleService, 
// and configuration entries that specify behaviors associated with 
// that implementation (see <system.serviceModel> in web.config)

namespace Aspnet.Samples
{
    [ServiceContract()]
    public interface ISimpleService
    {
        [OperationContract]
        string HelloWorld1(string value1);
        [OperationContract]
        string HelloWorld2(DataContractType dataContractValue1);
    }

    [ServiceBehavior(IncludeExceptionDetailInFaults = true)]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class SimpleService : ISimpleService
    {
        public SimpleService()
        { }

        public string HelloWorld1(string value1)
        {
            return "Hello " + value1;
        }
        public string HelloWorld2(DataContractType dataContractValue1)
        {
            return "Hello " + dataContractValue1.FirstName +
                                " " + dataContractValue1.LastName;
        }
    }

    [DataContract]
    public class DataContractType
    {
        string firstName;
        string lastName;

        [DataMember]
        public string FirstName
        {
            get { return firstName; }
            set { firstName = value; }
        }
        [DataMember]
        public string LastName
        {
            get { return lastName; }
            set { lastName = value; }
        }
    }

}

추가 예제

맨 위로 이동

클래스 참조

다음 표에는 클라이언트 스크립트에서 호출할 수 있는 웹 서비스와 관련된 주요 클래스가 나와 있습니다.

클라이언트 네임스페이스

이름

설명

Sys.Net 네임스페이스

ASP.NET AJAX 클라이언트 응용 프로그램과 서버의 웹 서비스 사이의 통신을 관리하는 클래스를 포함합니다. Sys.Net 네임스페이스는 Microsoft AJAX 라이브러리의 일부입니다.

Sys.Serialization 네임스페이스

ASP.NET AJAX 클라이언트 응용 프로그램의 데이터 serialization과 관련된 클래스를 포함합니다.

Sys.Services 네임스페이스

ASP.NET AJAX 클라이언트 응용 프로그램에서 ASP.NET 인증 서비스, 프로필 서비스 및 다른 응용 프로그램 서비스에 대한 스크립트 액세스를 제공하는 형식을 포함합니다. Sys.Services 네임스페이스는 Microsoft AJAX 라이브러리의 일부입니다.

서버 네임스페이스

이름

설명

System.Web.Script.Serialization

관리되는 형식에 대한 JSON(JavaScript Object Notation) serialization 및 deserialization을 제공하는 클래스를 포함합니다. Serialization 동작을 사용자 지정할 수 있는 확장성 기능도 제공합니다.

맨 위로 이동

추가 리소스

About Native XMLHTTP

http://www.json.org

What is the Windows Communication Foundation?

XML Web Services Infrastructure

WCF Services and ASP.NET

Understanding Service-Oriented Architecture

새로운 기능

다음은 ASP.NET 버전 3.0의 새로운 기능입니다.

  • WCF(Windows Communication Foundation)의 응용 프로그램 서비스

  • .NET Framework 클라이언트에서 호출하는 AJAX의 응용 프로그램 서비스

맨 위로 이동

참고 항목

작업

연습: AJAX 사용 웹 서비스 만들기 및 사용

개념

ASP.NET AJAX에서 폼 인증 사용

ASP.NET 응용 프로그램 서비스 개요