Using WCF/svc’s automatically generated javascript proxies _without_ ASP.NET AJAX

Most of my web based projects consist of WCF driven webservices at the backend and a javascript UI using ExtJS, and for access to the WCF webservice I like to use its automatically generated proxies as this abstracts away the feeling of working with XMLHttpRequests, actually it abstracts it to a level where you can call the server side method ‘directly’, specifying only a callback function that should receive the response. These proxies are dynamically generated and will always reflect the serverside methods signature.

To use the proxies all you need to do is (as long as the correct bindings are in place) access the .svc file with either ‘/js’ or ‘/jsdebug’ appended, and you will get the generated proxies.
By the way, if you use any objects, either as an argument or as a return type, these will also be created as javascript ‘classes’, the same with any enumerations – its all wery nice.

Using both ASP.NET AJAX and ExtJS on the same page does not create any serious problems (I think there might be a couple of collisions on the Date object), but it does mean that you have quite a bit of overhead.

Removing the ASP.NET AJAX framework does not work initially as the generated proxy code needs this to work, so if we remove the ASP.NET AJAX framework, well, then we are going to need to replace it with something that caters to the proxy codes needs without the extra overhead of loading the entire ASP.NET AJAX framework. And here it is – this is the minimum of code needed to bootstrap the automatically generated proxy code, and to tie it into the ExtJs framework. If you want to use it with a different framework then it should not be a difficult task to exchange the Ext dependencies.

// Extend Functions prototype
Function.prototype.initializeBase = function(instance, baseArguments){
};
Function.prototype.registerClass = function(typeName, baseType, interfaceTypes){
    if (baseType) {
        for (var name in baseType.prototype) {
            this.prototype[name] = baseType.prototype[name];
        }
    }
};
Function.prototype.registerEnum = function(name, flags){
};

// Add Type and Type.registerNamespace
var Type = {
    registerNamespace: function(ns){
        var va = window;
        ns = ns.split(".");
        for (var i = 0, len = ns.length; i < len; i++) {
            va = va[ns[i]] = {};
        }
    }
};

// Create the Sys.Net.WebServiceProxy object
Type.registerNamespace("Sys.Net");

Sys.Net.WebServiceProxy = function(){
    //empty constructor
};

Sys.Net.WebServiceProxy._generateTypedConstructor = function(type){
    return function(properties){
        if (properties) {
            for (var name in properties) {
                this[name] = properties[name];
            }
        }
        this.__type = type;
    };
};


Sys.Net.WebServiceProxy.prototype._invoke = function(path, action, useGet, params, onSuccess, onFailure, userContext){
    // Use Ext.Ajax to perform the xhr call
    Ext.Ajax.request({
        url: path + "/" + action,
        method: useGet ? "get" : "post",
        jsonData: params,
        success: function(data){
            onSuccess(Ext.decode(data.responseText).d);
        },
        failure: function(data){
            onFailure(Ext.decode(data.responseText).d);
        },
        scope: userContext
    });
};
Sys.Net.WebServiceProxy.prototype.set_path = function(path){
    this._path = path;
};
Sys.Net.WebServiceProxy.prototype.get_path = function(){
    return this._path;
};

Tags: , , , , , ,

This entry was posted on Wednesday, October 28th, 2009 at 19:11 and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.