Creating a Webservice Proxy with jQuery

Contents

• Introduction
• Server Side
• Client Side
• Source Code
• Resources

Introduction

In a previous post I’ve shown how to use WCF, jQuery and jTemplates to retrieve information from the server and lay it out on the page using jTemplates’ templating engine.

The code example in that article used the Microsoft Ajax client library and the proxy it creates at run time to ease the javascript code needed to call the methods of the webservice I created.

In this article I would like to show you an easy way of creating a similar proxy to the Microsoft one in pure javascript and the help of jQuery’s AJAX capabilities. This makes a lot of sense if you do not have the option to use the MS library on the client or simply because you don’t want to.
I will be relying mostly on the code examples and concepts I described in the previous article  so I’d recommend reading it first before continuing to read this one.

You can let me know if you find this article useful or not by using the ratings and comments below.

Server Side

The good news: no need to change anything on the server side, the web service can continue to work as it always did. All we’re doing in this exercise is to replace the client side logic and so we will not touch the server code.

Client Side

Using the same website I’ve shown how to create in the previous article we will create the new proxy for our WCF webservice.
In the System folder create a javascript file and call it ServiceProxy.js, To the file add the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

ServiceProxy = function() //constructor for the proxy {   this._baseURL = "Services/TutorialService.svc/"; }; ServiceProxy.prototype = {   _defaultErrorHandler: function(xhr, status, error)   {     alert(xhr.statusText);   },   _doAjax: function(method, data, fnSuccess, fnError)   {     if (!data) data = {};     if (!fnError) fnError = this._defaultErrorHandler;     $.ajax({       type: "GET",       url: this._baseURL + method,       data: data,       contentType: "application/json; charset=utf-8",       dataType: "json",       success: fnSuccess,       error: fnError,       dataFilter: function(data)           {             var response;             if (typeof (JSON) !== "undefined" && typeof (JSON.parse) === "function")               response = JSON.parse(data);             else               response = val("(" + data + ")");             if (response.hasOwnProperty("d"))               return response.d;             else               return response;           }     });   } };

Lets examine the code:

The first section is the constructor of the proxy object, in there we define the base URL of the service we will be calling.

The second method is _defaultErrorHandler, this is a default error handler, its strictly a developer friendly method, allowing the calling method to leave the pointer to an error handling method empty. Of course the implementation of this default error handler should be changed in a real life scenario as its not wise to show any raw error information to a website’s visitor.

The third and most important method is _doAjax, this is where the “magic” happens which takes care of the back and forward communication with the server.

The first two lines take care of the defaults, if there is no data passed to the webservice we assign an empty object and if there is no pointer supplied to an error handler we assign our default method.

Next is the where we use jQuery’s incredibly convenient Ajax method, lets examine this call, jQuery’s ajax method accepts an object that sets all the needed information:

‘type’: The HTTP verb: could be GET, POST, etc. In this example we use GET since we’re only retrieving from the server.
For a more robust scenario we would probably want to turn this into a parameter of the method.

‘url’: The URL of the webservice method, in this case the base URL defined in the constructor and the name of the method.

‘data’: The parameters passed to the service method, constructed as a JSON object.

‘contentType’: the content type of the data being sent to the server. In our case we’re communicating with the webservice using JSON and therefore we use: “application/json; charset=utf-8”

‘success’: A pointer to the method to be called when the asynchronous call has finished successfully.

‘error’: A pointer to the method to be called when the asynchronous call finished with an error.

‘dataFilter’: I’ve taken the code block in this example from Dave Ward’s Encosia blog. I will add the links to a couple of his articles at the end of this post.

The dataFilter is used whenever there is a successful response from the server and allows us to modify the response in any way we like before its passed to the success method.

In this example there are two uses to the filter: The first one is to turn the response into a JSON object from the string result coming from the server. It will first check whether the current browser supports JSON parsing natively (Firefox 3.5, IE8 for example). If it does it will use the native JSON object and if not will use the less optimized and less secure eval() function.

The second part is to check whether the response is enclosed within a ‘d’ property, this ‘d’ property is added automatically by Microsoft’s WCF service and since we want to abstract this fact from the caller we only return the relevant response if this is the case.

Now that we have everything we need for our base proxy functionality all we need to do is add the methods that match the exposed methods on the webservice. To the prototype of the ServiceProxy object add these two methods:

1 2 3 4 5 6 7 8 9 10 11

getArticles: function(success, error) {   this._doAjax("GetArticles", null, success, error); }, getArticle: function(link, success, error) {   var data = {link: link};   this._doAjax("GetArticle", data, success, error) },

These two methods call our _doAjax, passing the necessary information such as the method name and the parameters if needed to the call.

In fact the methods mirror the methods available on the webservice thus completing the proxy.

Now the only thing to do is create a HTML file (or any other file, could even be JSP) that will replace the aspx page we created in the previous article.
You can find all the source code in the example site ive made available for download, in this post I will only show the changes needed.

– First, create a default.html in the root of the site.
– In the head element add these links:

<script src=”System/jquery.js” type=”text/javascript”></script>
<script src=”System/jquery-jtemplates.js” type=”text/javascript”></script>
<script src=”System/ServiceProxy.js” type=”text/javascript”></script>
<link href=”System/Styles.css” rel=”stylesheet” type=”text/css” />

– Copy over the entire javascript element.
– Add the following code as the first line of the script to declare the proxy:

<script type="text/javascript">
    var proxy = new ServiceProxy();

– In the document ready function replace the call to the GetArticles method with this one:

1 2 3 4

$(document).ready(function() //executes this code when page loading is done { proxy.getArticles(articlesRetrieved); });

– In the loadArticle function replace the call to getArticle with this one:

1 2 3 4 5 6 7

function loadArticle(link) { $("#LoadingImg").removeClass("Hidden"); $("#SingleArticle").html(""); proxy.getArticle(link, articleRetrieved, serviceDefaultErrorHandler); }

That’s all! Now you have a working page doing exactly the same as it did before only using our own javascript proxy without any dependencies on the Microsoft proxy or the MS Ajax library.
The end result is as expected identical to the one before:

Source Code

Can be downloaded here.

Resources

• Simplify calling ASP.NET AJAX services from jQuery
• Improving jQuery’s JSON performance and security
• Never worry about ASP.NET AJAX’s .d again
• WCF and JSON Services