MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How jQuery and JSONP Data Format can work simultaneously

In this article we will see how jQuery and JSONP (JSON with padding) can work together in providing the way for performing cross-domain calls.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

What is jQuery Mobile?

jQuery Mobile is a type of cross platform mobile framework which is designed in order to enhance and simplify the development of mobile web applications. It is done by incorporating HTML5, CSS3, jQuery and jQuery UI into one framework. This framework is not only considered as robust, but it is also maintainable and organized.

For building this jQuery mobile, we need the existing jQuery core, which implies that for working with jQuery Mobile without any problems, we need to have a better understanding of jQuery syntax in advance. The type of framework is compatible with all the major type of desktop and mobile applications. These applications include all the latest developed tools such as iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, Opera Mobile/Mini, Firefox Mobile and all modern desktop browsers.

The key feature of this type of mobile framework is its lightweight size. The size is compressed to about 20K. Its size and minimal image dependencies make it a speed freak i.e., its speed is up by a large amount. The approach of Progressive enhancement helps this framework to bring functionality and core content to the entire mobile, desktop and tablet platforms. It also provides platform for all the newer mobile applications.

The availability of automatic initialization by means of HTML5 data-role attributes in the HTML markup add as a differentiating feature which acts as the activating tool to automatically initialize all jQuery Mobile widgets. Various accessibility features such as WAI-ARIA are included in order to make sure that this page work for screen readers and also provides different assistive technologies.

The supporting features of jQuery Mobile's API are not only Touch events, but they also support the usual Mouse events that are generally related with jQuery. These supporting features makes it completely platform compatible and cross-browser. The built in controls of jQuery mobile are not only themable by the built in UI, but the special feature of Touch Optimized interface is totally supported by the UI.

By using jQuery JSONP calls, the hurdles that the users get while performing cross-domain service calls from the client browser and the work required to do can be solved. For this, a step-by-step example of implementing JSONP calls to a .NET 4.0 WCF service is provided to detailed information about it.

Constraints of Cross-Domain calls

Before going into the remedy for this, firstly we will understand the limitations of the cross-domain service calls. These limitations are due to the security policy which is named as same origin policy. This policy defines the different type of policies that are applied onto the client-side programming languages like the scripting languages. With the help of this policy, the calls can be restricted in the following cases:

  • Firstly, they restrict the calls that are made from client to a resource via protocol that is different from the protocol through which the actual page was served.
  • Secondly, the calls that is made from client to a resource that lies in a different domain or web server from that of the domain or web server which is serving the page.
  • Port is different.

The main purpose of Same Origin Policy is basically for web security purposes. Script tag is the only exception in the Same Origin Policy. This script tag also allows for a Cross Domain Script call.

JSONP message layout

JSONP message layout is fundamentally a usual JSON format with padding. As it is said in the previous section, in the Same Origin Policy <Script> tag is an exception.

Listing 1: Shows the code of doing a cross domain call.

<script type=”text/javascript” src="http://www.otherdomain.com/orderservice.svc/GetOrders"></script>

Listing 2: Shows the code of result that will be returned in a JSON layout.

[
{"OrderId":1000, "OrderItem":"Cricket Bat", "Quantity": 10, "TotalPrice":20000}
{"OrderId":1001, "OrderItem":"Football", "Quantity": 100, "TotalPrice":50000}
]

Listing 3: Shows the code to change the script URL with an additional query string value.

<script type="text/javascript" src="http://www.otherdomain.com/orderservice.svc/GetOrders?jsonp=processResults"></script>

Listing 4: Shows the returned JSON with padding as a script callback method.

parseResults([
{"OrderId":1000, "OrderItem":"Cricket Bat", "Quantity": 10, "TotalPrice":20000}
{"OrderId":1001, "OrderItem":"Football", "Quantity": 100, "TotalPrice":50000}
])

Listing 5: Shows the code to implement JSONP callback JavaScript function.

function parseResults(results) {
      alert('Cross domain JS call achieved. Have your implementation going in here!');
}

JSONP service calls using jQuery sample

In the following section, the study of calling a WCF service using JSONP and jQuery. jQuery started supporting JSONP from its 1.2 version and WCF also has the inbuilt support for JSONP layout.

Listing 6: Shows the code to create a WCF service.

public class OrderService : IOrderService
{
  public List<Order> GetOrders()
  {
    return FetchOrdersFromDatabase();
  }
 
  private List<Order> FetchOrdersFromDatabase()
  {
    List<Order> orderList = new List<Order>();
    //DB call and population
    return orderList;
  }
}

Listing 7: Shows the code for contract implementation.

[ServiceContract]
public interface IOrderService
{
  [OperationContract]
  [WebGet(ResponseFormat=WebMessageFormat.Json)]
  List<Order> GetOrders();
}

The above code is required because the JSONP calls will be Get and not Post. Now, moving to the configuration file WCF 4.0 introduces a new binding attribute named as “crossDomainScriptAccessEnabled” for WCF webHttpBinding.

Listing 8: Shows the code for configuration change.

<bindings>
<webHttpBinding>                             <binding name="jsonpWebHttpBinding" crossDomainScriptAccessEnabled="true"/>
</webHttpBinding>
</bindings>

Listing 9: Shows the JQuery code to write in client web page.

<script type="text/javascript">
  $(document).ready(function () {
    $.getJSON('http://www.otherdomain.com/orderservice.svc/GetOrders?callback=?', null, function (results) {
        alert('Cross domain JS call achieved. Have your implementation going in here!');
      });
   });
</script>

In this way, we can effectively make cross domain calls and execute the callback JavaScript function where we can process our results from the service.

Conclusion

In this way, we have come to an end to this interesting article where we have learned about the basics of jQuery mobile and how it is used in providing the way for performing cross-domain calls using JSONP in depth.



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login