Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Making a JSONP Call to a WCF Data Service using datajs

, 25 Apr 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
How to use the datajs library in order to make a JSONP call to a JSONP enabled WCF Data Service.

Introduction

Making a JSONP Call for a WCF Data Service using datajs

During MIX11, I attended a very interesting session about datajs which was presented by Asad Khan and Marcelo Lopez Ruiz. As I promised in my previous post, in this post, I’ll show you how to make a JSONP call to a WCF Data Service using the datajs library.

A little about datajs

datajs is a very promising JavaScript library which is currently being built by Microsoft as an Open Source in CodePlex. The library as described in its CodePlex site as “a new cross-browser JavaScript library that enables data-centric web applications by leveraging modern protocols such as JSON and OData and HTML5-enabled browser features. It's designed to be small, fast, and easy to use”. Some of its current features are the ability to communicate with OData services and APIs to work with local data through browser features such as Web Storage (and in the future, IndexedDB). For further reading about datajs, go to its documentation, or download the library and play with it (there is also a NuGet package for it).

Making a JSONP call using datajs

Here is the implementation of the same JSONP call functionality from the previous post but using datajs:

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>JSONP Call using datajs</title>
    <script src="Scripts/datajs-0.0.3.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <output id="result">
    </output>
    </form>
    <script type="text/javascript">       
        OData.defaultHttpClient.enableJsonpCallback = true;
        OData.read("http://localhost:23330/SchoolDataService.svc/Courses", 
            function (data, request) {
                var output = document.getElementById('result');
                for (var i = 0; i < data.results.length; i++) {
                    var div = document.createElement('div');
                    div.innerHTML = data.results[i].Title;
                    output.appendChild(div);
                }
            });               
        
    </script>
</body>
</html>

A few things to notice in the example:

  • I add the script to datajs which exists in my web application project under the Scripts directory.
  • You need to enable JSONP through OData.defaultHttpClient.enableJsonpCallback, which is disabled by default.
  • Use the OData.Read function to make the call to the service (no need to add the format or callback query parameters like I did in the previous post since they are added automatically).

Pay attention that in a real world application, you would probably like to disable JsonpCallback after you make the call.

Summary

datajs is still in Alpha version, and it is only in its starting point. It tries to provide a common solution around the data problem in client-side development. I expect it to grow and to supply more capabilities in the future. In this post, I showed how to use it in order to make a JSONP call to a JSONP enabled WCF Data Service.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gil Fink
Technical Lead sparXys
Israel Israel
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionHow about a POST/PUT PinmemberChristianSM20-Sep-12 8:33 
Generaladd, update, delete using Odata.request demo required PinmemberMember 7785814-Jun-11 8:45 
GeneralHi Pinmembermurtaza dhari18-May-11 21:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141220.1 | Last Updated 25 Apr 2011
Article Copyright 2011 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid