如何使用Html / Javascript消費OData服務？

Question

我們的項目目前使用Silverlight來使用Odata服務。 這使得生活變得非常簡單，因為我們可以引用OData服務，從而為我們提供生成的服務引用/實體。

但是，我們是否應該轉向Html（html5）進行討論。 如果我們做出這個改變，我想知道會發生什么。 我們當然會利用像jQuery這樣的框架。

• 我主要關心的是如何通過JavaScript / jQuery使用相同的OData服務。
• 我們如何反序列化/序列化從這個OData服務返回的實體？
• 我們的數據合同是否應該是硬編碼的（如果是這樣，這對我們來說真的是不可接受的）？

謝謝！

Answer 1

OData源可以將數據作為JSON返回，因此您的網頁可以對您的數據進行XHR並將其作為JSON接收，然后將其反序列化為Javascript對象，以便您進行分離，操作或顯示。

以下是一些可以幫助您入門的其他鏈接：

• 新的Javascript OData庫[MSDN]
• OData協議示例[MSDN]
• 使用JQuery格式的JSON格式的OData端點
• 使用JayData消耗OData服務
• 使用BreezeJS消耗OData服務

HTH。

Answer 2

我們還制作了一個非常酷的小庫，名為Data.js（http://datajs.codeplex.com/） ，它可以顯着加快來自JavaScript的OData消耗。 這是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))

它生成的JavaScript：

 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);
    });
  })();

到目前為止，我已經成功地將它與CoffeeScript，jQuery和Knockout.js一起使用。

Answer 3

作為替代方案，您可以根據supercool datajs庫為具有oData支持的JayData提供一個鏡頭。 它在幾個存儲提供商或協議上提供了一個抽象的數據訪問層，其中一個重要的是OData。

上面提到的查詢看起來像這樣

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

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

正如您可能不希望這被轉換為... /標題？$ filter = 5，因此即使簡單的語法可能建議，也不會在客戶端上進行操作。

JayData將為您提供JavaScript語言查詢（JSLQ），允許您使用ES5標准過濾器函數查詢數據：所有使用JavaScript，不需要OData查詢語法的知識。

Answer 4

如果要在表中顯示數據並使用排序，分頁，搜索，可以使用jQuery dataTables插件https://www.datatables.net/與OData連接器http://vpllan.github.io/jQuery.dataTables。 ODATA /

您不需要任何其他編程，因為dataTables將為您執行操作。