Basic AJAX Service

아티클
05/09/2023

SimpleAjaxService 샘플에서는 WCF(Windows Communication Foundation)를 사용하여 ASP.NET AJAX(Asynchronous JavaScript and XML) 서비스(웹 브라우저 클라이언트에서 JavaScript 코드를 사용하여 액세스할 수 있는 서비스)를 만드는 방법을 보여 줍니다. 이 서비스에서는 HTTP GET 요청에 응답하고 JSON(JavaScript Object Notation) 데이터 형식을 응답에 사용하도록 WebGetAttribute 특성이 사용됩니다.

WCF의 AJAX 지원은 ScriptManager 컨트롤을 통해 ASP.NET AJAX와 함께 사용되도록 최적화되었습니다. ASP.NET AJAX와 함께 WCF를 사용하는 예는 AJAX 샘플을 참조하세요.

참고 항목

이 샘플의 설치 절차 및 빌드 지침은 이 항목의 끝부분에 나와 있습니다.

다음 코드에서는 서비스가 HTTP GET 요청에 응답하도록 WebGetAttribute 특성이 Add 작업에 적용됩니다. 이 코드에서는 간편하게 GET을 사용합니다. HTTP GET 요청은 모든 웹 브라우저에서 생성할 수 있습니다. 또한 GET을 사용하여 캐싱을 사용하도록 설정할 수 있습니다. WebGetAttribute 특성이 없을 경우 HTTP POST가 기본값입니다.

[ServiceContract(Namespace = "SimpleAjaxService")]
public interface ICalculator
{
    [WebGet]
    double Add(double n1, double n2);
    //Other operations omitted…
}

샘플 .svc 파일은 WebScriptServiceHostFactory 표준 엔드포인트를 서비스에 추가하는 WebScriptEndpoint를 사용합니다. 엔드포인트는 .svc 파일을 기준으로 빈 주소에서 구성됩니다. 이는 작업 이름이 아닌 추가 접미사를 포함하지 않는 http://localhost/ServiceModelSamples/service.svc가 서비스의 주소라는 것을 의미합니다.

<%@ServiceHost language="C#" Debug="true" Service="Microsoft.Samples.SimpleAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" %>

WebScriptEndpoint는 ASP.NET AJAX 클라이언트 페이지에서 서비스에 액세스할 수 있도록 하기 위해 미리 구성됩니다. Web.config의 다음 섹션은 엔드포인트에 대한 추가 구성 변경 작업을 수행하는 데 사용할 수 있으며 추가 변경이 필요하지 않은 경우 제거할 수 있습니다.

<system.serviceModel>
  <standardEndpoints>
    <webScriptEndpoint>
      <!-- Use this element to configure the endpoint -->
      <standardEndpoint name=""  />
    </webScriptEndpoint>
  </standardEndpoints>
</system.serviceModel>

WebScriptEndpoint는 서비스의 기본 데이터 형식을 XML 대신 JSON으로 설정합니다. 서비스를 호출하려면 이 항목의 뒷부분에 표시된 설정 및 빌드 단계를 완료한 후 http://localhost/ServiceModelSamples/service.svc/Add?n1=100&n2=200으로 이동합니다. 이 테스트 기능은 HTTP GET 요청을 사용해 설정됩니다.

클라이언트 웹 페이지 SimpleAjaxClientPage.aspx에는 사용자가 페이지에 있는 작업 단추 중 하나를 클릭할 때마다 서비스를 호출하는 ASP.NET 코드가 포함되어 있습니다. ScriptManager 컨트롤은 서비스에 대한 프록시를 JavaScript를 통해 액세스할 수 있게 만드는 데 사용됩니다.

<asp:ScriptManager ID="ScriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="service.svc" />
    </Services>
</asp:ScriptManager>

다음 JavaScript 코드를 사용하여 로컬 프록시가 인스턴스화되고 작업이 호출됩니다.

// Code for extracting arguments n1 and n2 omitted…
// Instantiate a service proxy
var proxy = new SimpleAjaxService.ICalculator();
// Code for selecting operation omitted…
proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

서비스 호출에 성공할 경우 onSuccess 처리기가 호출되고 작업 결과가 텍스트 상자에 표시됩니다.

function onSuccess(mathResult){
     document.getElementById("result").value = mathResult;
}

다음을 통해 공유

Basic AJAX Service

추가 리소스