Calling Webservices from Javascript

and why would I want to do that?

I have an application that needs to add several database items from the same page. One reason I thought that this was a perfect solutions was this:

I have an unusual Invoice creation form. When that form starts it does some initial default things for inserting a new record, the user fills out some basic stuff, like it adds some dates and a facility for which the Invoice is from. Now that I have entered these, I don't want to loose them, and I don't want to re-order the entry because it has been optimized by watching how our users enter data for several years. Now the user needs to do a lookup for the person/company that is being billed. Sure we could list everyone in a dropdown, but this is a secure internet app and we don't want all that traffic being passed every time the page loads. Besides, it's just a bad way of doing UI to list several thousand entries in a dropdown, so what alternatives do we have? I'll just mention 3 and the reason I chose the last.

1. You can use some codebehind, do a lookup and reload the page based on the results.
2. You could use a popup form or a second page to do the lookup then transfer it back over to the main Invoice page.
3. You can use a webservice called from javascript.

Number 1. will cause a frightening number of problems including wasted traffic reloading list items, hassles with state maintenence, blah, blah... overall just a bad solution for me. It may be the way most people are doing this but think about reloading 6 datagrids(used in place of dropdowns) and the state every time the page refreshes...

Number 2. - this was originally the method I used but it also has lots of problems, like the second page getting hidden behind the main page when a user clicks back on the main page for some reason only known to the user (users are NEVER prdictable in how they traverse documents) and then there is the whole issue of moving all the data from one page to another, sure therre are plenty of methods to do it, but none are really that great.

That leaves Number 3. I need to lookup a Customer based on their Customer ID OR Customer Name OR some other data in their record (3 other fields). This part is fairly simple, we do a sql lookup that can search multiple fields, but what if we get multiple rows as a result, or nothing is found and we want to add the Customer as a new Record?

Handling all this from a single page seems daunting or is it? Actually is really simple and elegant when you can use a webservice to return different types of data depending on what is found during the lookup. So how do we do this?

I am going to give you a whole case scenario in a later article since this was quite profound for me when I got it through testing, and into a production app. For now here are the basics:

Create your Webservice with the methods you want to call and have it return an XML Document. This document is going to be dropped into an empty <div> that we have hidden on the page, can also use IE's popups, but then you are limited to only allowing IE as a browser, same goes for <xml> tags. The xml document should have a basic structure something like this:

<mylookupresult><resulttype></resulttype><result></result></mylookupresult>

Obviously you will be tailoring it to your needs but I wanted to show some ideas of what it is capable of, the next article on this subject will be in MUCH greater detail.

Add an xml tag tou your page body to hold the results.

<xml id="xmlCustomer" />

// Webservice connection
function initWebservices() 
{
     document.all.body.useService("InvoiceService.asmx?WSDL","CallMyWebService");
}
function DoMyLookup(value) {
     document.all.body.CallMyWebService.callService(wsResult, "LookupCustomer",value);
}

function wsResult(result) {
// Insert the result into the div (this method uses IE only for now
if (!result.error) {
     // stuff the result into an XML Document
     document.all.xmlCustomer.loadXML(result.value);
     if (document.all.xmlCustomer.documentElement) {
          var xslData = new ActiveXObject("Microsoft.XMLDOM");
          xslData.async = false;
          xslData.load("Customer.xslt");
          document.all.divCustomer.innerHTML = document.all.xmlCustomer.transformNode(xslData.documentElement);
     }else{
          alert(result.errorDetail.string);
     }
}

In your body's tag call the init script like this:

<body id="body" style="BEHAVIOR: url(../webservice.htc)" onload="initWebservices();">

You can do this for several results by using <div>'s and onresult="behavior..." this will also give you several asyncronous areas to pump data into on a single page.

note: You will need to download the webservice.htc behavior for it to be able to function correctly.

Now you can call the webservice from a button like this:

<input onclick="DoMyLookup(document.all.txtSearch.value);return false;" type="button" />

I use the return false so there is no event bubbling from the click.

As I said before, this is a really basic idea of how to call a webservice from javascript and leaves out alot of details, a full article is being prepared.

Have fun.

posted on Thursday, October 09, 2003 10:09 AM