Servizio AJAX con esempi JSON e XML

  • Articolo

L'esempio XmlAjaxService mostra come usare Windows Communication Foundation (WCF) per creare un servizio Asynchronous JavaScript and XML (AJAX) che restituisce dati JavaScript Object Notation (JSON) o XML. È possibile accedere a un servizio AJAX utilizzando codice JavaScript a partire da un client del browser Web. Questo esempio si basa sull'esempio di Servizio AJAX di base.

A differenza degli altri esempi AJAX, questo esempio non utilizza ASP.NET AJAX e il controllo ScriptManager. Con una configurazione aggiuntiva, è possibile accedere ai servizi WCF AJAX da qualsiasi pagina HTML tramite JavaScript. Questo scenario è illustrato di seguito. Per un esempio di utilizzo di WCF con ASP.NET AJAX, vedere Esempi AJAX.

Questo esempio mostra come cambiare il tipo di risposta di un'operazione da JSON a XML. Questa funzionalità è disponibile indipendentemente dal fatto che il servizio sia configurato per l'accesso da ASP.NET AJAX o da una pagina client HTML/JavaScript semplice.

Nota

La procedura di installazione e le istruzioni di compilazione per questo esempio si trovano alla fine di questo argomento.

Per abilitare l'utilizzo di client AJAX non ASP.NET, utilizzare WebServiceHostFactory (non WebScriptServiceHostFactory) nel file con estensione svc. WebServiceHostFactory aggiunge un endpoint WebHttpEndpoint standard al servizio. L'endpoint è configurato in un indirizzo vuoto rispetto al file con estensione svc; ciò significa che l'indirizzo del servizio è http://localhost/ServiceModelSamples/service.svc, senza suffissi aggiuntivi diversi dal nome dell'operazione.

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

La sezione seguente in Web.config può essere usata per effettuare modifiche di configurazione aggiuntive all'endpoint Può essere rimossa se non sono necessarie modifiche aggiuntive.

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

Il formato di dati predefinito per WebHttpEndpoint è XML, mentre il formato dei dati predefinito per WebScriptEndpoint è JSON. Per altre informazioni, vedere Creazione di servizi AJAX WCF senza ASP.NET.

Il servizio nell'esempio seguente è un servizio WCF standard con due operazioni. Entrambe le operazioni richiedono lo stile del corpo Wrapped sugli attributi WebGetAttribute o WebInvokeAttribute che è specifico del comportamento webHttp e non è rilevante per il cambiamento di formato JSON/XML.

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

Il formato di risposta per l'operazione viene specificato come XML, ovvero l'impostazione predefinita per il comportamento <webHttp>. Tuttavia, si consiglia di specificare esplicitamente il formato della risposta.

L'altra operazione utilizza l'attributo WebInvokeAttribute e specifica in modo esplicito JSON anziché XML per la risposta.

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

Si noti che in entrambi i casi le operazioni restituiscono un tipo complesso MathResult, il quale è un tipo di contratto di dati WCF standard.

La pagina Web client XmlAjaxClientPage.htm contiene codice JavaScript che richiama una delle due precedenti operazioni quando l'utente fa clic sui pulsanti Esegui calcolo (restituire JSON) o Esegui calcolo (restituire XML) nella pagina. Il codice per richiamare il servizio costruisce un corpo JSON e lo invia utilizzando HTTP POST. La richiesta viene creata manualmente in JavaScript, a differenza dell'esempio di Servizio AJAX di base e degli altri esempi che usano 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);

Quando il servizio risponde, la risposta viene visualizzata senza nessuna ulteriore elaborazione in una casella di testo nella pagina. Viene implementata a mero scopo esemplificativo per consentire di osservare direttamente i formati dati XML e JSON utilizzati.

// Create result handler
xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readyState == 4){
          document.getElementById("result").value = xmlHttp.responseText;
     }
}

Per impostare, compilare ed eseguire l'esempio

  1. Assicurarsi di aver eseguito la Procedura di installazione singola per gli esempi di Windows Communication Foundation.

  2. Compilare la soluzione XmlAjaxService.sln come descritto in Generazione degli esempi Windows Communication Foundation.

  3. Passare a http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (non aprire XmlAjaxClientPage.htm nel browser dalla directory del progetto).

Vedi anche