Partager via

AJAX Service with JSON and XML, exemple

  • Article

L’exemple XmlAjaxService montre comment utiliser Windows Communication Foundation (WCF) pour créer un service JavaScript et XML asynchrone (AJAX) 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 s’appuie sur l’exemple Service AJAX de base.

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.

Notes

La procédure d'installation ainsi que les instructions de génération relatives à cet exemple figurent à la fin de cette 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 http://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 WebScriptEndpoint est JSON. Pour plus d’informations, consultez Création de services WCF AJAX 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 Service AJAX de base 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 d’installation unique pour les exemples Windows Communication Foundation.

  2. Générez la solution XmlAjaxService.sln telle que décrite dans la section Construction des exemples Windows Communication Foundation.

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

Voir aussi