How to consume OData service with Html/Javascript?

问题

Our project currently uses Silverlight to consume an Odata service. This has made life pretty simple since we can just reference the OData service thus giving us generated service reference/entities.

However there is some discussion on whether we should move to Html (html5). I'd like to know what to expect if we make this change. We'd be leveraging a framework like jQuery of course.

My main concern is how to consume the same OData service via JavaScript/jQuery.
How are we suppose to deserialize/serialize entities returned from this OData service?
Is our data contract supposed to be hard-coded (if so, this is really unacceptable for us)?

Thanks!

回答1:

OData sources can return data as JSON so your web pages can XHR your data and receive it as JSON which gets de-serialized back into a Javascript object for you to pick apart and act-upon or display.

Here are some additional links to get you started:

New Javascript OData Library [MSDN]
OData protocol by example [MSDN]
Leveraging OData end-points in JSON format with JQuery
Consume an OData service with JayData
Consume an OData service with BreezeJS

HTH.

回答2:

We have also produced a pretty cool little library called Data.js (http://datajs.codeplex.com/) that will significantly speed up OData consumption from JavaScript. Here's a sample in 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))

And the JavaScript it generates:

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

So far I've been successful using it with CoffeeScript, jQuery and Knockout.js.

回答3:

As an alternative, you can give a shot to JayData, which has oData support - based on the supercool datajs library. It provides an abstract data access layer over several storage providers or protocols, one important of them is OData.

The above mentioned query would look something like this

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

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

As you might wouldn't expect this gets translated to .../Titles?$filter=5, so operations are not done on the client, even if the simple syntax might suggest.

JayData will give you JavaScript Language Query (JSLQ) letting you query for data using the ES5 standard filter function: all with JavaScript, not knowledge of OData query syntax is required.

回答4:

If you want to display data in the table and use sorting, paging, search, you can use jQuery dataTables plugin https://www.datatables.net/ with OData connector http://vpllan.github.io/jQuery.dataTables.oData/

You don't need any additional programming since dataTables will perform there operations for you.

回答5:

You could this OData client based on axios I wrote.

https://github.com/fabio-nettis/ODCJ

The OData Connector For Javascript or more formerly know as ODCJ, is a promise based client that uses axios to establish connections to OData V3/V4 services. ODCJ provides a lot of useful functions to customize the request url and filtering properties.

来源：https://stackoverflow.com/questions/10112376/how-to-consume-odata-service-with-html-javascript

标签

javascript

jquery

odata

breeze

jaydata