Samstag, Juli 16, 2005

The AJAX prime factors sample

The first sample that shows how to use the AJAX engine is in the files CalcFactorsAJAX.htm (Client) and CalcService.asmx (Server). With this sample the principle steps can be analyzed easily.

The connection to the already known WebService is done by using the proxy generator:

<script type="text/javascript" src="GetJavaScriptProxy.aspx?service=CalcService.asmx"></script>

The HTML code contains 2 input elements that are used for the communication with the user.

The import element with the id inputField is editable and used to enter a number that should be split into the prime factors. The event onkeyup was chosen for triggering the AJAX action.

This event is not only triggered by entering characters but by the special keys like backspace, delete or Ctrl+C for pasting a new value.

With IE, there is also the event onpropertychange available that suits better our needs here but the FireFox browser doesn’t implement this and there is no standard event defined for being triggered immediately on any value changes.

The field with id outputField is deactivated and is used to show the calculated prime factors.

...
  <td><input id="inputField" onkeyup="ajax.Start(action1)"></td>
...
  <td><input id="outputField" size="60" disabled="disabled"></td>
...

The AJAX action is declared inside the JavaScript block and there is no other programming necessary except this.

You can see within the methods prepare and finish how to exchange the values with HTML Elements.

The call method is setup by linking to the local method of the generated proxy and exceptions are displayed by using a simple alert box.

The delay parameter is set to 200 msec. This time was chosen after some empirical timing measurements (using myself) and was found being appropriate. When one of the testing people entered a number this time wasn’t exceeded between entering the digits and the action was indeed executed at the end of entering the whole number.

If the action was stared already by entering a digit and when another digit was entered before the delay time was over then the first action was removed from the queue, the second identical action was entered into the queue and the timer was started again.

// declare an AJAX action
var action1 = {
  delay: 200,
  prepare: function() { return (document.getElementById("inputField").value); },
  call: proxies.CalcService.CalcPrimeFactors,
  finish: function (p) { document.getElementById("outputField").value = p; },
  onException: proxies.alertException
} // action1

Looking at this script you can imagine the actual flow of the action. This is a big advantage for everyone that needs to analyze, extend or fix a broken implementation, because all the functionality is not spread over the source code into several methods, callback functions and timer events but kept together in this JavaScript object.

You can find all the samples on http://www.mathertel.de/AJAXEngine/.

1 Kommentar:

Manoloweb hat gesagt…

Hello MatHertel,

What you have here is pure gold. I have been testing (trying to understand? hehe) your examples, and you sure have opened a new door for ASP.NET Web Applications based on SOAP.

I hope I can come out with something that might contribute to improve your experiments. I have been playing with ajax for a little bit more than it's name has been coined by Jesse James Garret, and this is the .NET equivalent (but improved) of JPSpan.

I'm planning to develop an intranet application based completely on ajax and .NET, and I will make good use of your scripts. Be sure that whenever I find something that you might like to know, I'll come here and let you know.