AJAX Service with JSON and XML, exemple

Cet exemple indique comment utiliser Windows Communication Foundation (WCF) pour créer un service AJAX (Asynchronous JavaScript and XML) qui retourne des données JSON (JavaScript Object Notation) ou XML. Vous pouvez accéder à un service AJAX en utilisant le code Javascript à partir d'un client de navigateur Web. Cet exemple repose sur l'exemple Basic AJAX Service.

Remarque :
Cet exemple requiert l'installation de .NET Framework version 3.5 pour être généré et exécuté. Visual Studio 2008 est nécessaire pour l'ouverture des fichiers projet et solution.

Contrairement aux autres exemples AJAX, celui-ci n'utilise pas ASP.NET AJAX et le contrôle ScriptManager. Une fois configurés, les services AJAX WCF sont accessibles à partir de n'importe quelle page HTML via JavaScript, et ce scénario est présenté ici. Pour obtenir un exemple d'utilisation de WCF avec ASP.NET AJAX, consultez Exemples AJAX.

Cet exemple illustre comment commuter le type de réponse d'une opération entre JSON et XML. Cette fonctionnalité est disponible que le service soit configuré pour être accessible par ASP.NET AJAX ou par une page cliente HTML/JavaScript.

Remarque :
La procédure d'installation ainsi que les instructions de génération relatives à cet exemple figurent à la fin de cette rubrique.

Pour activer l'utilisation de clients non-ASP.NET, l'exemple utilise la section de configuration suivante.

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

Notez l'utilisation du comportement <webHttp> au lieu du comportement <enableWebScript>. Le format de données par défaut pour le comportement webHttp est XML, alors que celui pour le comportement enableWebScript est JSON. Pour plus d'informations sur les caractéristiques du comportement webHttp, consultez Creating WCF AJAX Services without ASP.NET.

Le service présenté dans l'exemple suivant est un service WCF standard avec deux opérations. Ces deux opérations requièrent le style de corps Wrapped sur les attributs WebGetAttribute ou WebInvokeAttribute, ce qui est spécifique au comportement webHttp et n'a aucune incidence sur le commutateur de format de données JSON/XML.

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

Le format de réponse de l'opération est spécifié comme étant XML ; il s'agit du paramètre par défaut pour le comportement <webHttp>. Il est toutefois conseillé de spécifier explicitement le format de réponse.

L'autre opération utilise l'attribut WebInvokeAttribute et spécifie explicitement JSON au lieu de XML pour la réponse.

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

Notez que dans les deux cas, les opérations retournent un type complexe, MathResult, lequel constitue un type de contrat de données WCF standard.

Le page Web XmlAjaxClientPage.htm client contient du code Javascript qui appelle l'une des deux opérations précédemment mentionnées lorsque l'utilisateur clique sur le bouton Perform calculation (return JSON) ou Perform calculation (return XML) dans la page. Le code permettant d'appeler le service construit un corps JSON et l'envoie à l'aide de HTTP POST. La requête est créée manuellement dans JavaScript, contrairement à l'exemple Basic AJAX Service et aux autres exemples utilisant 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);

La réponse du service s'affiche sans traitement supplémentaire dans une zone de texte de la page. Cet exemple est implémenté à des fins de démonstration pour vous permettre d'observer directement les formats de données XML et JSON utilisés.

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

Pour configurer, générer et exécuter l'exemple

1. Assurez-vous d'avoir effectué la procédure indiquée dans la section Procédure d'installation unique pour les exemples Windows Communication Foundation.

2. Générez la solution XmlAjaxService.sln comme indiqué dans la rubrique Génération des exemples Windows Communication Foundation.

3. Accédez à https://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (n'ouvrez pas XmlAjaxClientPage.htm dans le navigateur à partir du répertoire du projet).

Voir aussi

Tâches

AJAX Service Using HTTP POST

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