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.

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 AJAX Samples.

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 correspondant à cet exemple figurent en fin de rubrique.

Pour permettre l'utilisation de clients AJAX non-ASP.NET, utilisez WebServiceHostFactory (pas WebScriptServiceHostFactory) dans le fichier .svc. WebServiceHostFactory ajoute un point de terminaison standard WebHttpEndpoint au service. Ce point de terminaison est configuré avec une adresse vide renvoyant au fichier .svc ; cela signifie que l'adresse du service est https://localhost/ServiceModelSamples/service.svc, sans autre suffixe que celui correspondant au nom de l'opération.

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

La section suivante dans Web.config peut être utilisée pour apporter des modifications de configuration supplémentaires au point de terminaison. Elle peut être supprimée si aucune modification supplémentaire n'est requise.

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

Le format de données par défaut pour WebHttpEndpoint est XML, alors que le format de données par défaut pour for T:System.ServiceModel.Description.WebScriptEndpoint est JSON. Pour plus d'informations, consultez Création de services AJAX WCF sans 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.

La 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 les boutons 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;
     }
}

Remarque :

Les exemples peuvent déjà être installés sur votre ordinateur. Recherchez le répertoire (par défaut) suivant avant de continuer. <LecteurInstall>:\WF_WCF_Samples Si ce répertoire n'existe pas, rendez-vous sur la page (éventuellement en anglais) des exemples Windows Communication Foundation (WCF) et Windows Workflow Foundation (WF) pour .NET Framework 4 pour télécharger tous les exemples Windows Communication Foundation (WCF) et WF. Cet exemple se trouve dans le répertoire suivant. <LecteurInstall>:\WF_WCF_Samples\WCF\Basic\AJAX\XmlAjaxService

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

1. Assurez-vous d'avoir effectué la 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