다음을 통해 공유


JSON 및 XML을 사용한 AJAX 서비스 샘플

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

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

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

비고

이 샘플에 대한 설치 절차 및 빌드 지침은 이 항목의 끝에 있습니다.

non-ASP.NET AJAX 클라이언트를 사용하려면 .svc 파일에서 WebServiceHostFactory이 아니라 WebScriptServiceHostFactory를 사용하십시오. WebServiceHostFactoryWebHttpEndpoint 표준 엔드포인트를 서비스에 추가합니다. 엔드포인트는 .svc 파일을 기준으로 빈 주소로 구성됩니다. 즉, 서비스의 주소가 http://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이고 기본 데이터 형식 WebScriptEndpoint 은 JSON입니다. 자세한 내용은 ASP.NET 없이 WCF AJAX 서비스 만들기를 참조하세요.

다음 샘플의 서비스는 두 가지 작업이 있는 표준 WCF 서비스입니다. 두 작업 모두 Wrapped 본문 스타일이 WebGetAttribute 또는 WebInvokeAttribute 속성에 필요하며, 이는 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 사용자가 페이지에서 계산 수행(JSON 반환) 또는 계산 수행(반환XML) 단추를 클릭할 때 위의 두 작업 중 하나를 호출하는 JavaScript 코드가 포함되어 있습니다. 서비스를 호출하는 코드는 JSON 본문을 생성하고 HTTP POST를 사용하여 보냅니다. 요청은 ASP.NET AJAX를 사용하는 기본 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;
     }
}

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

  1. Windows Communication Foundation 샘플 에 대한One-Time 설정 절차를 수행했는지 확인합니다.

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

  3. http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm으로 이동하되, 프로젝트 디렉터리에서 브라우저로 XmlAjaxClientPage.htm를 열지 마십시오.

참고하십시오