Servizio AJAX con esempi JSON e XML

Questo esempio illustra come utilizzare Windows Communication Foundation (WCF) per creare un JavaScript asincrono e un servizio XML (AJAX) che restituiscono JSON (JavaScript Object Notation) o dati XML. È possibile accedere a un servizio AJAX utilizzando codice JavaScript a partire da un client del browser Web. Questo esempio si basa sull'esempio Servizio AJAX di base.

A differenza degli altri esempi AJAX, questo esempio non utilizza ASP.NET AJAX e il controllo ScriptManager. Con alcune configurazioni aggiuntive, è possibile accedere ai servizi AJAX WCF da qualsiasi pagina HTML tramite JavaScript e questo scenario viene illustrato qui di seguito. Per un esempio di utilizzo di WCF con ASP.NET AJAX, vedere AJAX Samples.

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 dell'argomento.

Per abilitare l'utilizzo di client AJAX non ASP.NET, utilizzare WebServiceHostFactory (non WebScriptServiceHostFactory) nel file con estensione svc. WebServiceHostFactory aggiunge un endpoint standard WebHttpEndpoint al servizio. L'endpoint viene configurato su un indirizzo vuoto relativo al file con estensione svc. Ciò significa che l'indirizzo del servizio è https://localhost/ServiceModelSamples/service.svc, senza suffissi aggiuntivi tranne il 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 utilizzata 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 di dati predefinito for T:System.ServiceModel.Description.WebScriptEndpoint è JSON. Per ulteriori informazioni, vedere Creazione di servizi WCF AJAX 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 della risposta per l'operazione è 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);

Notare che in entrambi i casi che le operazioni restituiscono un tipo complesso, MathResult, che è un tipo di contratto 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 dall'esempio Servizio AJAX di base e degli altri esempi che utilizzano 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;
     }
}

Nota:

È possibile che gli esempi siano già installati nel computer. Verificare la directory seguente (impostazione predefinita) prima di continuare. <UnitàInstallazione>:\WF_WCF_Samples Se questa directory non esiste, andare alla pagina relativa agli esempi di Windows Communication Foundation (WCF) e Windows Workflow Foundation (WF) per .NET Framework 4 per scaricare tutti gli esempi di Windows Communication Foundation (WCF) e WF. Questo esempio si trova nella directory seguente. <UnitàInstallazione>:\WF_WCF_Samples\WCF\Basic\AJAX\XmlAjaxService

Per impostare, compilare ed eseguire l'esempio

1. Verificare di avere eseguito 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. Spostarsi alla pagina https://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (non aprire XmlAjaxClientPage.htm nel browser dalla directory del progetto).

Vedere anche

Attività

Servizio AJAX con il protocollo HTTP POST