Làm thế nào để sử dụng dịch vụ OData với Html/Javascript?

Question

Dự án của chúng tôi hiện đang sử dụng Silverlight để tiêu thụ dịch vụ Odata. Điều này đã làm cho cuộc sống khá đơn giản vì chúng ta chỉ có thể tham khảo dịch vụ OData do đó cho chúng ta tham chiếu dịch vụ/thực thể được tạo ra.

Tuy nhiên, có một số cuộc thảo luận về việc chúng tôi có nên chuyển sang Html (html5) hay không. Tôi muốn biết điều gì sẽ xảy ra nếu chúng ta thực hiện thay đổi này. Chúng tôi muốn tận dụng một khung như jQuery tất nhiên.

• Mối quan tâm chính của tôi là cách sử dụng cùng một dịch vụ OData qua JavaScript/jQuery.
• Chúng ta giả sử như thế nào để deserialize/serialize các thực thể được trả về từ dịch vụ OData này?
• Hợp đồng dữ liệu của chúng tôi có phải được mã hóa cứng không (nếu có, điều này thực sự không thể chấp nhận đối với chúng tôi)?

Cảm ơn!

Answer 1

OData sources can return data as JSON để các trang web của bạn có thể XHR dữ liệu của bạn và nhận dữ liệu đó dưới dạng JSON bị hủy đăng ký lại thành đối tượng Javascript để bạn tách rời và thực hiện hoặc hiển thị.

Dưới đây là một số liên kết bổ sung để giúp bạn bắt đầu:

• 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

Chúng tôi cũng đã sản xuất một thư viện nhỏ khá thú vị được gọi là Data.js (http://datajs.codeplex.com/) sẽ tăng tốc đáng kể mức tiêu thụ OData từ JavaScript. Dưới đây là một ví dụ trong 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)) 

Và JavaScript nó tạo ra:

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

Cho đến nay tôi đã thành công sử dụng nó với CoffeeScript, jQuery và Knockout.js.

Answer 3

Thay vào đó, bạn có thể chụp ảnh JayData, có hỗ trợ oData - dựa trên thư viện dữ liệu supercool. Nó cung cấp một lớp truy cập dữ liệu trừu tượng trên một số nhà cung cấp lưu trữ hoặc các giao thức, một trong những quan trọng của chúng là OData.

Truy vấn đề cập ở trên sẽ giống như thế này

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

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

Như bạn có thể sẽ không mong đợi này được dịch sang .../Titles? $ Filter = 5, do hoạt động không được thực hiện trên máy khách , ngay cả khi cú pháp đơn giản có thể gợi ý.

JayData sẽ cung cấp cho bạn JavaScript Language Query (JSLQ) cho phép bạn truy vấn dữ liệu bằng chức năng bộ lọc tiêu chuẩn ES5: tất cả đều có JavaScript, không cần kiến ​​thức về cú pháp truy vấn OData.

Answer 4

Nếu bạn muốn hiển thị dữ liệu trong bảng và sử dụng phân loại, phân trang, tìm kiếm, bạn có thể sử dụng DataTables jQuery Plugin https://www.datatables.net/ với đầu nối OData http://vpllan.github.io/jQuery.dataTables.oData/

Bạn không cần bất kỳ chương trình thêm từ DataTables sẽ thực hiện có hoạt động cho bạn.