As we all know, Visual Studio will have jQuery support for now on, which is a great thing. I use jQuery heavily at work when customizing CRM and also to develop other projects. However, I really enjoy Mootools, which is another great JavaScript framework. Long ago I've seen a post somewhere about calling ASP.NET Web Services. Back then, Mootools was on version 1.1 and now it's 1.2. A few things changed here and there since the last update. Now the core is completely separated from the UI/Animation/Extra features. As I really like this framework, I decided to create a sample project showing how it works on the current version. And how simple it is.
Creating the SOAP Envelope
Basically, to call a Web Service in ASP.NET, we have to create a header with a SOAP envelope and other attributes. Usually, .NET handles it for us. But for this post, I’d like to show how to perform the requests without .NET help.
A SOAP Envelope, is an xml with the necessary parameters to a request, as well as the method's name and it's namespace. Let's say we have a Web Service with a method called GetBooks which receives two string parameters. We could create something like this:
GetSOAPEnvelope : function(WebMethod, Namespace, paramHash) {
var envelope = '';
envelope += '<?xml version="1.0" encoding="utf-8"?>\n';
envelope += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">\n';
envelope += ' <soap:Body>\n';
if(paramHash.getKeys().length > 0) {
envelope += ' <' + WebMethod + ' xmlns="' + Namespace + '">\n';
paramHash.each(function(value, key){
envelope += ' <' + key + '>' + value + '</' + key + '>\n';
});
envelope += ' </' + WebMethod + '>\n';
} else {
envelope += ' <' + WebMethod + ' xmlns="' + Namespace + '" />\n';
}
envelope += ' </soap:Body>\n';
envelope += '</soap:Envelope>';
return envelope;
}
The method above returns us a string with our Envelope. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<GetBooks xmlns="http://coolest.namespace.ever/">
<criteria>string</criteria>
<keyword>string</keyword>
</GetBooks>
</soap:Body>
</soap:Envelope>
Note that on the GetSOAPEnvelope signature, we're passing paramHash, which is Mootools' implementation to hash. So before we call the method we should create a hash like this:
var criteria = "genre"; var keyword="fantasy";
var params = new Hash({criteria:criteria, keyword:keyword});
And finally call the GetSOAPEnvelope Method:
var theEnvelope = GetSOAPEnvelope('GetBooks', 'http://coolest.namespace.ever/', params);
Calling the Web Service
On Mootools 1.2, we have a Request object (docs) which allows us to perform asynchronous calls. To perform a call to a Web Service, we need an instance of this object and we need to inform the service url, the method, the header and the soap envelope. Also, we need to inform what to do in case of sucess or failure. Something like this:
var ajax = new Request({
url: webservice_address,
data: theEnvelope,
method: 'post',
headers: {
'Content-Type': 'text/xml; charset="utf-8"',
'SOAPAction': 'http://coolest.namespace.ever/GetBooks'
},
onComplete: function(responseXML) {
// some action
},
onFailure: function(instance) {
// some action
}
});
// then we execute
ajax.send();
There are more things you should take care of to put an application running with Web Serice calls from JavaScript. I'm not going to details on this post, but you should take care of security for sure. Please take a look on the sample which has a simple application for reference (hopefully it will work).
Please visit Mootools WebSite, User Group or the Forum to get more resources. You can do amazing things with this framework.
Here's a Sample Project
(don't forget to change the web service address)