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 Esempi di 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.

Per attivare l'utilizzo di client non ASP.NET, l'esempio utilizza la sezione di configurazione seguente.

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

Si noti l'utilizzo del comportamento <webHttp> anziché del comportamento <enableWebScript>. Il formato dei dati predefinito per il comportamento webHttp è XML, mentre il formato dei dati predefinito per il comportamento enableWebScript è JSON. Per ulteriori informazioni sulle specifiche del comportamento webHttp, vedere Creating WCF AJAX Services without 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, MathResultche è un tipo di contratto dati WCFstandard.

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;
     }
}

Per impostare, compilare ed eseguire l'esempio DIBLOOK

1. Assicurarsi di aver 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

Send comments about this topic to Microsoft.
© 2007 Microsoft Corporation. All rights reserved.