Share via

Пример службы AJAX с JSON и XML

  • Статья

В примере XmlAjaxService показано, как использовать Windows Communication Foundation (WCF) для создания асинхронной службы JavaScript и XML (AJAX), которая возвращает нотацию объектов JavaScript (JSON) или XML-данные. К службе AJAX можно обращаться с помощью кода JavaScript из веб-браузера. Этот пример основан на примере базовой службы AJAX.

В отличие от других примеров AJAX, в данном примере не используется ASP.NET AJAX и управление ScriptManager. При дополнительной настройке службы WCF AJAX можно получить на любой HTML-странице с помощью JavaScript, и этот сценарий показан здесь. Пример использования WCF с ASP.NET AJAX см. в примерах AJAX.

В данном разделе показано переключение типа отклика операции между JSON и XML. Данная функциональность доступна независимо от того, настроена служба для доступа через клиентскую страницу ASP.NET AJAX или через HTML/JavaScript.

Примечание.

Процедура настройки и инструкции по построению для данного образца приведены в конце этого раздела.

Чтобы разрешить использование клиентов, не являющихся клиентами ASP.NET AJAX, используйте WebServiceHostFactory (а не WebScriptServiceHostFactory) в SVC-файле. Объект WebServiceHostFactory добавляет стандартную конечную точку WebHttpEndpoint в службу. Конечная точка настроена по пустому адресу относительно 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. Дополнительные сведения см. в статье "Создание служб WCF AJAX без ASP.NET".

Служба в следующем примере — это стандартная служба WCF с двумя операциями. Обе операции требуют использования основного стиля Wrapped в WebGetAttribute или атрибутов WebInvokeAttribute, которые относятся к поведению webHttp и не влияют на переключение формата данных JSON/XML.

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

Формат отклика для операции указывается как XML, который является параметром по умолчанию для поведения webHttp>.< Тем не менее, рекомендуется явно указывать формат ответа.

Другая операция использует атрибут WebInvokeAttribute и явно указывает JSON вместо XML для ответа.

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

Обратите внимание, что в обоих случаях операции возвращают сложный тип, MathResultкоторый является стандартным типом контракта данных WCF.

Веб-страница клиента XmlAjaxClientPage.htm содержит код JavaScript, который вызывает одну из предыдущих двух операций, когда пользователь щелкает кнопки "Выполнить вычисление( возвращать JSON) или выполнить вычисление (возвращаемый XML) на странице. Код, вызывающий службу, создает тело JSON и отправляет его с помощью HTTP POST. Запрос создается вручную в JavaScript, в отличие от примера службы BASIC AJAX и других примеров с помощью ASP.NET AJAX.

// 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.

  2. Создайте решение XmlAjaxService.sln, как описано в разделе "Создание примеров Windows Communication Foundation".

  3. Перейдите к http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (не открывайте XmlAjaxClientPage.htm в браузере из каталога проекта).

См. также