The difference in using script, active x or applet is that it will download all the records regardles of what the user fills in for search criterea. Then the user can do what he/she wants without ever bothering the Internet server or the database again.
Here is a simple example that normally generates a static html document whenever an admin updates a telephone link. The link to the page will be updated so when there are nu updates the user gets this page from history so there is no traffic at all if the data is not changed.
<HTML>
<body id='thebody'>
<font id='myfont' errortext='nee'></font>
<input type=text id='txtsrc' onKeyUp='add.showaddress(document.getElementById("txtsrc"
,document.getElementById("divContent"
)'>
<input type=button onclick="swithbody();" style="visibility: hidden">
<input type=button onclick="window.location='mailto:to mail1;to mail2?cc=cc mail1;cc mail2'" style="visibility: hidden">
<div id='divContent'><h1><center>Loading...</center></h1></div><br>
<script>
function hidethings(){
document.getElementById('txtsrc').style.visibility="hidden";
}
function showthings(){
document.getElementById('txtsrc').style.visibility="visible";
}
window.onbeforeprint=hidethings;
window.onafterprint=showthings;
function addressbook(){
this.arrAddresses = new Array();
this.objDelay = new Object();
}
addressbook.prototype.addAddress =function(strName,strTelephone){
var arrTmp = new Array();
arrTmp[0] = strName;
arrTmp[1] = strTelephone;
this.arrAddresses[this.arrAddresses.length]=arrTmp
}
addressbook.prototype.getAddress =function(strName){
var i = 0;
var arrTmp = new Array();
strName = strName.toLowerCase();
for(i=0;i<this.arrAddresses.length;i++){
if(this.arrAddresses[ i ][0].toLowerCase().indexOf(strName)!=-1){
arrTmp[arrTmp.length] = this.arrAddresses[ i ];
}
}
return arrTmp;
}
addressbook.prototype.showaddress = function (objSearch,objDisplay,blnDelay) {
if(blnDelay==null){
clearTimeout(this.objDelay);
this.objDelay = setTimeout('add.showaddress(document.getElementById("' + objSearch.id + '"
,document.getElementById("' + objDisplay.id + '"
,false);',500);
}else{
var arrTmp = add.getAddress(objSearch.value);
var i = 0;
var arrContent = new Array();
if(arrTmp.length<400&&arrTmp.length!=0){
arrContent[arrContent.length] = "<table>";
for(i=0;i<arrTmp.length;i++){
arrContent[arrContent.length] = "<tr><td style=\"border-bottom:'1px solid'\">";
arrContent[arrContent.length] = arrTmp[ i ][0];
arrContent[arrContent.length] = "</td>";
arrContent[arrContent.length] = "<td style=\"border-bottom:'1px solid'\">";
arrContent[arrContent.length] = arrTmp[ i ][1];
arrContent[arrContent.length] = "</td>";
arrContent[arrContent.length] = "</tr>";
}
arrContent[arrContent.length] = "</table>";
objDisplay.innerHTML = arrContent.join(""
;
}else if(arrTmp.length!=0){
objDisplay.innerHTML = "<center>More than 400 addresses</center>";
}else {
objDisplay.innerHTML = "<center>No addresses.</center>";
}
}
}
addressbook.prototype.sortAddress = function (arrVal1,arrVal2) {
var intReturn = 0;
var j = 0;
while(intReturn==0&&j<arrVal1.length){
if(arrVal1[j]<arrVal2[j]){intReturn=-1;}
if(arrVal1[j]>arrVal2[j]){intReturn=1;}
j++;
}
return intReturn;
}
var add = new addressbook();
//************************************************************************************************************************************
//************************************************************************************************************************************
//************************************************************************************************************************************
//************************************************************************************************************************************
<%
' fill a recordset
while not rs.eof
response.write("add.addAddress(""" & rs("name"
& """,""" & rs("telephone"
& """
;" & vbcrlf
rs.movenext
loop
%>
//************************************************************************************************************************************
//************************************************************************************************************************************
//************************************************************************************************************************************
//************************************************************************************************************************************
add.arrAddresses = add.arrAddresses.sort(add.sortAddress);
setTimeout("document.getElementById('txtsrc').onkeyup()",5);
setTimeout("document.getElementById('txtsrc').focus()",5);
function swithbody(){
var objMain = new Object();
objMain = window
var arrText = new Array();
var objSubobjec = new Object();
for( objSubobjec in objMain){
arrText[arrText.length] = objSubobjec
}
document.getElementById('myfont').innerHTML= arrText.join("<br>"
}
</script>
</body>
</html>
The point of checking at the server is sound and should allways happen but checking at the client increases preceived performance (the user does not have to wait for a submit to find out something simple is wrong).
A monster webserver does not compensate for low bandwith between the monser and the user's PC.
Finally I am not saying .net is bad (anymore) but I am saying that .net puts most of the work on the server. Users can not work disconnectid with the data (meaning off line). In many Internet apps it would be possible to work offline.
Like when I want to look at available rental houses of the last 2 weeks, this information fits in a paper of 30 pages. The complete data with all details will fit on about 400K of my pc's memory so why not load the lot in my memory when I requst the page and let me search through the records using client side techniques?
I use this site because it had bandwith and server problems. And instead of making the app more quick by using these client side techniques they invested more money in bandwith and hardware but the site is still slow. I am looking for 5 to 10 seconds at a blank page on every click I make.
Greetings, Harm Meijer
