web-dev-qa-db-fra.com

Comment utiliser le service OData avec HTML/Javascript?

Notre projet utilise actuellement Silverlight pour utiliser un service Odata. Cela a rendu la vie assez simple puisque nous pouvons simplement référencer le service OData, nous donnant ainsi la référence/les entités de service générées.

Cependant, il y a des discussions sur l'opportunité de passer à HTML (html5). J'aimerais savoir à quoi s'attendre si nous apportons ce changement. Nous utiliserions un framework comme jQuery bien sûr. 

  • Ma principale préoccupation est de savoir comment utiliser le même service OData via JavaScript/jQuery. 
  • Comment supposons-nous désérialiser/sérialiser les entités renvoyées par ce service OData?
  • Notre contrat de données est-il censé être codé en dur (si c'est le cas, c'est vraiment inacceptable pour nous)?

Merci!

javascriptjqueryodatabreezejaydata
18
AlvinfromDiaspar

Les sources OData peuvent renvoyer des données au format JSON afin que vos pages Web puissent XHR vos données et les recevoir au format JSON, ce qui permet de le désérialiser en un objet Javascript que vous pouvez séparer, agir et afficher.

Voici quelques liens supplémentaires pour vous aider à démarrer:

HTH.

15
Rich Turner

Nous avons également produit une petite bibliothèque plutôt cool appelée Data.js (http://datajs.codeplex.com/) qui accélérera considérablement la consommation d'OData à partir de JavaScript. Voici un exemple dans CoffeeScript:

success = (data) -> $("#searchResultsTemplate").tmpl(data).appendTo("#resultsArea")
error = (err) -> $("#resultsArea").text(JSON.stringify(err.message))

do ->
  $("#search").click(->
    OData.defaultHttpClient.enableJsonpCallback = true
    OData.read("http://odata.netflix.com/v2/Catalog/Titles?$top=5", success, error))

Et le JavaScript qu'il génère:

 success = function(data) {
    return $("#searchResultsTemplate").tmpl(data).appendTo("#resultsArea");
  };

  error = function(err) {
    return $("#resultsArea").text(JSON.stringify(err.message));
  };

  (function() {
    return $("#search").click(function() {
      OData.defaultHttpClient.enableJsonpCallback = true;
      return OData.read("http://odata.netflix.com/v2/Catalog/Titles?$top=5", success, error);
    });
  })();

Jusqu'ici, j'ai réussi à l'utiliser avec CoffeeScript, jQuery et Knockout.js.

10
Mark Stafford - MSFT

Au lieu de cela, vous pouvez essayer JayData , qui prend en charge oData - en fonction de la bibliothèque supercool Datajs. Il fournit une couche d'accès aux données abstraites sur plusieurs fournisseurs de stockage ou protocoles, l'un d'entre eux étant OData.

La requête susmentionnée ressemblerait à quelque chose comme ceci

var  source = new $data.yourOdataContext({serviceUri:"http://odata.netflix.com/v2/Catalog"});

source.Titles
  .take(5)
  .forEach( function(catalog) { render(catalog); });

Comme vous ne pouvez pas vous attendre, cela sera traduit en .../Titles? $ Filter = 5, les opérations ne sont donc pas effectuées sur le client, même si la syntaxe simple le suggère.

JayData vous donnera Requête de langage JavaScript (JSLQ) vous permettant de rechercher des données à l'aide de la fonction de filtrage standard ES5: tout en JavaScript, aucune connaissance de la syntaxe de requête OData n'est requise.

3
Peter Aron Zentai

Si vous souhaitez afficher les données dans la table et utiliser le tri, la pagination, la recherche, vous pouvez utiliser le plugin jQuery dataTables https://www.datatables.net/ avec le connecteur OData http: //vpllan.github. io/jQuery.dataTables.oData/

Vous n'avez besoin d'aucune programmation supplémentaire puisque dataTables effectuera ces opérations pour vous.

0
Jovan MSFT