AJAX Service with JSON and XML 샘플

아티클
09/12/2008

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

참고

이 샘플을 빌드하고 실행하려면 .NET Framework 버전 3.5가 설치되어 있어야 하며 프로젝트 및 솔루션 파일을 열려면 Visual Studio 2008이 필요합니다.

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

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

참고

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

ASP.NET 이외의 클라이언트를 사용할 수 있도록 이 샘플에서는 다음과 같은 구성 섹션을 사용합니다.

<system.serviceModel>
     <behaviors>
          <endpointBehaviors>
               <behavior name="Microsoft.Ajax.Samples.CalculatorServiceAjaxBehavior">
                    <webHttp/>
               </behavior>
          </endpointBehaviors>
     </behaviors>
     <services>
          <service name="Microsoft.Ajax.Samples.CalculatorService">
               <endpoint address="ajaxEndpoint" behaviorConfiguration="Microsoft.Ajax.Samples.CalculatorServiceAjaxBehavior" binding="webHttpBinding" contract="Microsoft.Ajax.Samples.ICalculator" />
          </service>
     </services>
</system.serviceModel>

여기에서는 <enableWebScript> 동작 대신 <webHttp> 동작을 사용합니다. enableWebScript 동작의 기본 데이터 형식은 JSON인 반면 webHttp 동작의 기본 데이터 형식은 XML입니다. webHttp 동작에 대한 자세한 내용은 Creating WCF AJAX Services without ASP.NET를 참조하십시오.

다음 샘플의 서비스는 두 개의 작업을 포함하는 표준 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;
     }
}

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

Windows Communication Foundation 샘플의 일회 설치 절차를 수행했는지 확인합니다.
Windows Communication Foundation 샘플 빌드에 설명된 대로 XmlAjaxService.sln 솔루션을 빌드합니다.
https://localhost/ServiceModelSamples/XmlAjaxClientPage.htm으로 이동합니다. 브라우저의 프로젝트 디렉터리에서 XmlAjaxClientPage.htm을 열지 마십시오.

참고 항목

작업

AJAX Service Using HTTP POST

다음을 통해 공유

AJAX Service with JSON and XML 샘플

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

참고 항목

작업

추가 리소스