The AJAX prime factors sample
Here is the prime factors calculation sample, but now using the AJAXEngine.You will see that the amount of scripting on the client is again reduced to
effectively 2 lines of coding for the prepare and finish methods and some lines
of parameters and the include for the WebService proxy.
http://www.mathertel.de/AJAXEngine/S02_AJAXCoreSamples/CalcFactorsAJAX.htm
The first sample that shows how to use the AJAX engine can be found 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.
A auto-completion textbox and lookup for city names
This is another sample using the AJAX Engine to lookup names of cities from
a huge server side list and proposing them for completion. You can see the
AJAX related sources here.
The HTML objects and the JavaScript code we need to display the popping up
field and handling the various keyboard events is lengthier and you can find it
in the sources if you like to analyze it. Later we will build a ASP.NET web
control that makes reuse of this code quite easier.
http://www.mathertel.de/AJAXEngine/S02_AJAXCoreSamples/OrteLookUp.htm
In this implementation you can see how to load and display data fragments
from a huge dataset on the server by using an AJAX action.
On the server, there is a huge list of German towns and cities in the file
orte.txt. If you would include this information into the page as a list of
OPTION elements for a SELECT element you would have to download about
400.000 bytes of additional HTML code – too much. Instead a simple INPUT
field is combined with the possibility to search in this dataset.
The WebService that implements this lookup functionality can be found in
OrteLookUp.asmx and, again, has no AJAX specific implementations. The
method gets one parameter passed that contains the first characters of a
possible name of a city and returns up to 12 found entries of the list back to
the client.
The connection to this WebService is done by using the proxy generator:
<script type="text/javascript" src="GetJavaScriptProxy.aspx?service=OrteLookup.asmx"></script>
This lookup method must be called in several situations: The code on the
client that display the list and the completion of the current entered text is
somewhat complex and most of the JavaScript of this page is about that. The
call ajax.Start(LookupAction) that can be found several times starts the action.
The action itself is implemented very compact in one place and you can see
that a not a lot of coding is necessary because the AJAX engine handles a lot.
var LookupAction = {
delay: 100,
prepare: function() { return (document.getElementById("inputField").value); },
call: proxies.OrteLookup.OrteStartWith,
finish: function (val) {
var fld = document.getElementById("inputField");
var dd = createDropdown(fld);
FillDropdown(dd, val);
if (isIE)
NextDropdownEntry(fld);
},
onException: proxies.alertException
} // LookupAction
Looking at this script you can again see the actual flow of the action and there
is no need to implement several JavaScript methods outside of the definition.
Tags:
JavaScript