Partager via

Service AJAX avec exemple JSON et XML

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 à l’aide du code JavaScript à partir d’un client de navigateur web. Cet exemple s’appuie sur l’exemple de service AJAX de base .

Contrairement aux autres exemples AJAX, cet exemple n’utilise pas ASP.NET AJAX et le ScriptManager contrôle. Avec une configuration supplémentaire, les services WCF AJAX sont accessibles à partir de n’importe quelle page HTML via JavaScript, et ce scénario est illustré ici. Pour obtenir un exemple d’utilisation de WCF avec ASP.NET AJAX, consultez les exemples AJAX.

Cet exemple montre comment basculer 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 et les instructions de génération de cet exemple se trouvent à la fin de cette rubrique.

Pour activer l’utilisation de non-ASP.NET clients AJAX, utilisez WebServiceHostFactory (et non WebScriptServiceHostFactory) dans le fichier .svc. WebServiceHostFactory ajoute un WebHttpEndpoint point de terminaison standard au service. Le point de terminaison est configuré à une adresse vide par rapport au fichier .svc ; cela signifie que l’adresse du service est http://localhost/ServiceModelSamples/service.svc, sans suffixes supplémentaires autres que le nom de l’opération.

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

La section suivante de 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 nécessaire.

<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, tandis que le format de données par défaut est WebScriptEndpoint JSON. Pour plus d’informations, consultez Création de services WCF AJAX sans ASP.NET.

Le service dans l’exemple suivant est un service WCF standard avec deux opérations. Les deux opérations nécessitent le style de corps Wrapped sur les attributs WebGetAttribute ou WebInvokeAttribute, qui est spécifique au comportement webHttp et n’a aucune incidence sur le changement 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é au format XML, qui est le paramètre par défaut pour le <comportement webHttp> . Toutefois, il est recommandé 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, MathResultqui est un type de contrat de données WCF standard.

La page web cliente XmlAjaxClientPage.htm contient du code JavaScript qui appelle l’une des deux opérations précédentes lorsque l’utilisateur clique sur les boutons Effectuer le calcul (renvoyer JSON) ou Effectuer un calcul (xml de retour) sur la page. Le code à appeler le service construit un corps JSON et l’envoie à l’aide de HTTP POST. La requête est créée manuellement en JavaScript, contrairement à l’exemple de 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);

Lorsque le service répond, la réponse s’affiche sans traitement supplémentaire dans une zone de texte de la page. Cela 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 comme décrit dans Génération 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