Kris "Justise" Gray

The Ajax Experience

I’m going to represent the eProject gang and you can join me!

Go, sign up and embrace all that is improperly labeled!

I’m deep in development, but this was a pain in the ass to figure out so I thought I would throw this out there for those of you who for some reason need to call a Microsoft Atlas enabled web service.

I added the attribute [System.Web.Script.Services.ScriptService] to the web service, which I’m using to easily convert the return values of the web service to JSON.

Normally I’d call the WebMethod’s in my service using something along the following lines…

Justise.Project.WebSericeClassName.MethodName()

Using prototype, I need to use the Ajax class with the Request method to call the same service. Getting JSON back was the pain in the butt. Since using GET and POST require entirely different call configurations, I’m going to use different sections to detail each.

POST

Some of the important things in the following source code.

• Content-Type is set to “application/json”
• using postBody instead of parameters, and then you need postbody to be a string of the JSON format. Thus the purpose of fnJSONSerialize
• xContextCache is a class I wrote using a static property on eProjectServiceObj (The object containing this Login call) I’ll include it at the end of this post.

var sID = eProjectServiceObj.xContextCache.mAdd(successCallback, callContext);

var xRequest = new Ajax.Request(this.Url + "/Login",
{
"contentType" : "application/json",
"method"    : "POST",
"onSuccess" : eProjectServiceObj.xContextCache.mGetEventHandler(sID),
"onFailure" : callFailure,
"postBody"  : fnJSONSerialize({"username": userName, "password" : password})
});

function fnJSONSerialize(whxObj) {
var xPairs = new Array();
for(var sProp in whxObj) {
xPairs.push(["'", sProp, "':'", whxObj[sProp], "'"].join(""));
}
return "{" + xPairs.join(",") + "}";
}

GET

• Here you want to use parameters, but you want to quote your values, so I’m using ‘ ” ‘ added to each value.
• The ContentType property in the options was ignored, so I had to use the “requestHeaders” collection.
• You must add a [ScriptMethod(UseHttpGet = true)] to the method you intent to call, otherwise GET is disabled.

var sID = eProjectServiceObj.xContextCache.mAdd(successCallback, callContext);

var xRequest = new Ajax.Request(this.Url + "/Login",
{
"method"    : "GET",
"onSuccess" : eProjectServiceObj.xContextCache.mGetEventHandler(sID),
"onFailure" : callFailure,
"parameters"  : {"username": '"' + userName + '"', "password" : '"' + password + '"'},
"requestHeaders" : {"Content-type" : "application/json" }
});

Context Cache

I used this class to keep the ability to pass a context to the callback function.

function ContextCache() {
//--- Methods
this.mAdd   = fnAdd;
this.mExec  = fnExec;
this.mGetEventHandler = fnGetEventHandler;
this.mGetUnique = fnGetUnique;

//--- Properties
this.xContexts = new Hash();

function fnAdd(callbackFunction, callContext) {
var sID = this.mGetUnique();
this.xContexts[sID] = [callbackFunction, callContext];
return sID;
}

function fnGetEventHandler(handlerID) {
var sFunc = "eProjectServiceObj.xContextCache.mExec(arguments[0], '" + handlerID + "')";
return new Function(sFunc);
}

function fnExec(resultXmlHttp, handlerID) {
if(!this.xContexts[handlerID])return;
eval("var xResult = " + resultXmlHttp.responseText);

this.xContexts[handlerID][0](xResult, this.xContexts[handlerID][1]);
}

function fnGetUnique() {
var sUnique = new Date().getTime().toString();
if(this.xContexts[sUnique] == null)
return sUnique;

while(this.xContexts[sUnique]!=null) {
sUnique = sUnique + "_";
}
return sUnique;
}
}

So I wrote that Singleton post a few weeks ago, and what it really turned into is how to initialize Static Properties. Though calling it a Singleton post really makes you look kind of silly, since its a piss poor example of that.

Here is the Class Diagram from Wikipedia for the Singleton Pattern

To break that down, we have a Public Instance Function that retrieves the singleton instance, and a private constructor so the object can only create itself.

In the example I gave earlier, you can’t have a private constructor, and you can still call the public constructor again after the singleton has been defined. I was really excited to see that the new Prototype 1.5 library that was released (maybe the old one too, I’m just starting to get into it) contains some classes such as the Position class that have no public constructor, and are available without having to construct them initally.

How did they do this I wondered. A quick dig into the library shows that Prototype just uses the inline object syntax, which makes the Position class just an object instance, which of course has no constructor.

var Position = { "Methods" : function() { /* */ } }

I really like this a lot better, and I’ll probably be utilizing it a bit more in the library for our companies product. I’d love to see more libraries out there that you can include and you would get these specialized functional classes. Prototype’s Position is really helpful, what else could we want?

Its my New Years weekend vacation and I’m reading reading these juicy programming articles. Beware, full of naughty goodness.

AJAX Patterns – All about AJAX, quite helpfull.

43 Folders Wiki – Productivity wiki for the software development field.

Reflector Addins – Code Generation, Code Coverage, Code Graphs, man look at them all.

The Peoples Toolbox – Usefull tools for developers

0Rand 1, 0Rand 2 – Two great articles by this guy, Article 1, debuging with Reflector and Visual Studio, debug lower level components you don’t have source code for. Article two, debunking my statements that us developers need offices to be more productive.

WPF versus WPF/E – Interesting comparison with some sample code.

The Dojo Toolkit in Practice – Intro to Dojo

Superfoods everyone needs – Eat healthy!