다음을 통해 공유

AJAX Service with JSON and XML 샘플

  • 아티클

이 샘플에서는 WCF(Windows Communication Foundation)를 사용하여 JSON(JavaScript Object Notation) 또는 XML 데이터를 반환하는 AJAX(Asynchronous JavaScript And XML) 서비스를 만드는 방법을 보여 줍니다. 웹 브라우저 클라이언트에서 JavaScript 코드를 사용하여 AJAX 서비스에 액세스할 수 있습니다. 이 샘플은 Basic AJAX Service 샘플을 기반으로 합니다.

다른 AJAX 샘플과 달리 이 샘플에서는 ASP.NET AJAX 및 ScriptManager 컨트롤을 사용하지 않습니다. 몇 가지 추가 구성이 있으면 HTML 페이지에서 JavaScript를 통해 WCF AJAX 서비스에 액세스할 수 있으며 여기에서는 이 시나리오를 보여 줍니다. ASP.NET AJAX와 함께 WCF를 사용한 예제를 보려면 AJAX Samples을 참조하십시오.

이 샘플에서는 작업의 응답 형식을 JSON과 XML 간에 전환하는 방법을 보여 줍니다. 이 기능은 서비스가 ASP.NET AJAX에서 액세스하도록 구성되었는지 아니면 HTML/JavaScript 클라이언트 페이지에서 액세스하도록 구성되었는지 여부에 관계없이 사용할 수 있습니다.

Bb472488.note(ko-kr,VS.100).gif참고:
이 샘플의 설치 절차 및 빌드 지침은 이 항목의 끝부분에 나와 있습니다.

ASP.NET 이외의 AJAX 클라이언트를 사용할 수 있도록 설정하려면 .svc 파일에서 WebScriptServiceHostFactory가 아니라 WebServiceHostFactory를 사용하고, WebServiceHostFactory는 서비스에 WebHttpEndpoint 표준 끝점을 추가합니다. 끝점은 .svc 파일을 기준으로 하는 빈 주소에 구성됩니다. 이는 작업 이름이 아닌 추가 접미사를 포함하지 않는 https://localhost/ServiceModelSamples/service.svc가 서비스의 주소라는 것을 의미합니다.

<%@ServiceHost language="c#" Debug="true" Service="Microsoft.Samples.XmlAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

Web.config의 다음 섹션은 끝점에 대한 추가 구성 변경 작업을 수행하는 데 사용할 수 있습니다. 추가 변경이 필요하지 않은 경우 제거할 수 있습니다.

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

WebHttpEndpoint의 기본 데이터 형식은 XML인 반면 for T:System.ServiceModel.Description.WebScriptEndpoint의 기본 데이터 형식은 JSON입니다. 자세한 내용은 ASP.NET을 사용하지 않고 WCF AJAX 서비스 만들기를 참조하십시오.

다음 샘플의 서비스는 두 개의 작업을 포함하는 표준 WCF 서비스입니다. 두 작업 모두 WebGetAttribute 또는 WebInvokeAttribute 특성에서 Wrapped 본문 스타일을 필요로 합니다. 이는 webHttp 동작과 관련이 있으며 JSON/XML 데이터 형식 전환과는 관계가 없습니다.

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathXml(double n1, double n2);

작업의 응답 형식은 <webHttp> 동작에 대한 기본 설정인 XML로 지정됩니다. 그러나 응답 형식을 명시적으로 지정하는 것이 좋습니다.

다른 작업에서는 WebInvokeAttribute 특성을 사용하고 응답에 대해 XML 대신 명시적으로 JSON을 지정합니다.

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathJson(double n1, double n2);

두 경우 모두 작업은 표준 WCF 데이터 계약 형식인 복합 형식 MathResult를 반환합니다.

클라이언트 웹 페이지 XmlAjaxClientPage.htm에는 사용자가 페이지에서 Perform calculation (return JSON) 또는 Perform calculation (return XML) 단추를 클릭할 때 위의 두 작업 중 하나를 호출하는 JavaScript 코드가 포함되어 있습니다. 서비스를 호출하는 코드는 JSON 본문을 만든 다음 HTTP POST를 사용하여 전송합니다. Basic AJAX Service 샘플 및 ASP.NET AJAX를 사용하는 다른 샘플과 달리 이 요청은 JavaScript에서 직접 만듭니다.

// Create HTTP request
var xmlHttp;
// Request instantiation code omitted…
// Result handler code omitted…

// Build the operation URL
var url = "service.svc/ajaxEndpoint/";
url = url + operation;

// Build the body of the JSON message
var body = '{"n1":';
body = body + document.getElementById("num1").value + ',"n2":';
body = body + document.getElementById("num2").value + '}';
  
// Send the HTTP request
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/json");
xmlHttp.send(body);

서비스가 응답하면 페이지의 텍스트 상자에서 더 이상의 처리 작업 없이 응답이 표시됩니다. 이는 사용된 XML 및 JSON 데이터 형식을 직접 확인할 수 있도록 데모용으로 구현됩니다.

// Create result handler 
xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readyState == 4){
          document.getElementById("result").value = xmlHttp.responseText;
     }
}
Bb472488.Important(ko-kr,VS.100).gif 참고:
컴퓨터에 이 샘플이 이미 설치되어 있을 수도 있습니다. 계속하기 전에 다음(기본) 디렉터리를 확인하십시오.

<InstallDrive>:\WF_WCF_Samples

이 디렉터리가 없으면 Windows Communication Foundation (WCF) and Windows Workflow Foundation (WF) Samples for .NET Framework 4로 이동하여 WCF(Windows Communication Foundation) 및 WF 샘플을 모두 다운로드하십시오. 이 샘플은 다음 디렉터리에 있습니다.

<InstallDrive>:\WF_WCF_Samples\WCF\Basic\AJAX\XmlAjaxService

샘플을 설치, 빌드 및 실행하려면

  1. Windows Communication Foundation 샘플의 일회 설치 절차를 수행했는지 확인합니다.

  2. Windows Communication Foundation 샘플 빌드에 설명된 대로 XmlAjaxService.sln 솔루션을 빌드합니다.

  3. https://localhost/ServiceModelSamples/XmlAjaxClientPage.htm으로 이동합니다. 브라우저의 프로젝트 디렉터리에서 XmlAjaxClientPage.htm을 열지 마십시오.

참고 항목

작업

AJAX Service Using HTTP POST