¿Cómo consumir el servicio OData con Html/Javascript?

Question

Nuestro proyecto actualmente usa Silverlight para consumir un servicio Odata. Esto ha simplificado la vida, ya que solo podemos hacer referencia al servicio OData, lo que nos proporciona referencias/entidades de servicio generadas.

Sin embargo, existe un debate sobre si debemos pasar a Html (html5). Me gustaría saber qué esperar si hacemos este cambio. Estaríamos aprovechando un marco como jQuery, por supuesto.

• Mi principal preocupación es cómo consumir el mismo servicio OData a través de JavaScript/jQuery.
• ¿Cómo se supone deserializar/serializar entidades devueltas de este servicio OData?
• ¿Se supone que nuestro contrato de datos está codificado (si es así, esto es realmente inaceptable para nosotros)?

Gracias!

Answer 1

OData sources can return data as JSON para que sus páginas web puedan XHR sus datos y recibirlos como JSON, que se serializa de nuevo en un objeto Javascript para que usted pueda separar y actuar sobre o mostrar.

Éstos son algunos enlaces adicionales a empezar:

• 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.

Answer 2

También hemos producido una pequeña y genial biblioteca llamada Data.js (http://datajs.codeplex.com/) que acelerará significativamente el consumo de OData desde JavaScript. He aquí una muestra de 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)) 

Y el código JavaScript que genera:

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

Hasta ahora he tenido éxito con el uso de CoffeeScript, jQuery y Knockout.js.

Answer 3

Como alternativa, puede dar una oportunidad al JayData, que tiene compatibilidad con oData, basada en la biblioteca de datos de supercool. Proporciona una capa de acceso a datos abstracta sobre varios proveedores de almacenamiento o protocolos, uno de los cuales es OData.

La consulta se mencionó anteriormente se vería algo como esto

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

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

Como es posible que no se puede esperar esto se traduce a .../Títulos? $ Filter = 5, por lo que las operaciones no se realizan en el cliente , incluso si la sintaxis simple pudiera sugerir

JayData le dará JavaScript Language Query (JSLQ) que le permite consultar los datos utilizando la función de filtro estándar ES5: todo con JavaScript, no se requiere conocimiento de la sintaxis de consulta de OData.

Answer 4

Si desea mostrar los datos de la tabla y el uso de la clasificación, paginación, búsqueda, puede utilizar tablas de datos plugin de jQuery https://www.datatables.net/ con conector OData http://vpllan.github.io/jQuery.dataTables.oData/

que no es necesario ningún tipo de programación adicional, ya que DataTables llevará a cabo allí operaciones para ti.