Condividi tramite

Servizio AJAX con json e esempio XML

L'esempio XmlAjaxService illustra come usare Windows Communication Foundation (WCF) per creare un servizio JavaScript asincrono e XML (AJAX) che restituisce dati JSON (JavaScript Object Notation) o XML. È possibile accedere a un servizio AJAX usando il codice JavaScript da un client web browser. Questo esempio si basa sull'esempio di servizio AJAX Basic .

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

Questo esempio illustra come cambiare il tipo di risposta di un'operazione tra JSON e 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.

Annotazioni

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

Per abilitare l'uso di non-ASP.NET client AJAX, usare WebServiceHostFactory (non WebScriptServiceHostFactory) nel file con estensione svc. WebServiceHostFactory aggiunge un WebHttpEndpoint endpoint 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 apportare modifiche di configurazione aggiuntive all'endpoint. Può essere rimosso 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 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 webHttp comportamento e non ha alcun effetto sul cambio del formato dati 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, è consigliabile specificare in modo esplicito il formato di risposta.

L'altra operazione usa 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, che è un tipo di contratto dati WCF standard.

La pagina Web client XmlAjaxClientPage.htm contiene codice JavaScript che richiama una delle due operazioni precedenti quando l'utente fa clic sui pulsanti Esegui calcolo (restituisce JSON) o Esegui calcolo (restituisce XML) nella pagina. Il codice per richiamare il servizio costruisce un corpo JSON e lo invia usando HTTP POST. La richiesta viene creata manualmente in JavaScript, a differenza dell'esempio di servizio Basic AJAX 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 ulteriori elaborazioni in una casella di testo nella pagina. Questa operazione viene implementata a scopo dimostrativo per consentire di osservare direttamente i formati di dati XML e JSON usati.

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

Per configurare, compilare ed eseguire l'esempio

  1. Assicurati di aver eseguito la procedura di installazione di One-Time per gli esempi di Windows Communication Foundation.

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

  3. Navigare verso http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (non aprire XmlAjaxClientPage.htm nel browser mentre si è nella directory del progetto).

Vedere anche