Figure 2    Web-related Microsoft Technologies

Technology Applies to Description
Dynamic HTML Client An object model that Internet Explorer builds on top of the HTML page currently being viewed. It allows you to code pages, whose contents vary, on the fly without server interaction.
ASP Server Scriptable pages that run on the server and produce HTML pages to be sent across the Web. You can run code on the server through an ASP page.
Remote Scripting Client and server Bridge across the Net that allows you to invoke remote objects without leaving the current page. It produces the same result as if you were working with traditional client-side apps.
XML Mostly client side Extended markup language used to format data far beyond the possibility of HTML.
DHTML Scriptlets Client side Reusable script components, much like ActiveX controls, that can be embedded in client-side HTML pages to provide both UI and calculation features.
Server Scriptlets Mostly server side Reusable COM components, driven by script code with no UI, that are mostly used to implement business rules. If needed, they can run on the client side.
Data Binding Client and server Bridge across the Net that allows you to define data-aware HTML tags. It establishes a connection between a given HTML tag and a data source and fills the tag asynchronously.
Active Data Objects Mostly server Well-known object model built on top of OLE DB. Its role is becoming more and more central with the Universal Data Access specification.
Remote Data Services Mostly server Part of the ADO model, used to provide the plumbing that causes data binding to work. Uses ADO internally to access the actual data.


Figure 5   default.htm


 <div id="pageBody" class="pageBody">
     <div id="clickhere">
     <p align="left">
         <img class="moreinfo" src="newa.gif" id="newauthor" 
              width="312" height="193" alt="Click here to get more info..." 
              align="left">
         <big>We're</big>
         <strong><em>pleased to </em>announce<em> a </em>
         <u><big>new great</big></u><em> author...</em></strong>
     </p>
     </div>
 
     <div id="moreinfo" style="display:none">
         <p align="right">
             <font face="Verdana" color="#004080">
             <small>New <em>authors</em> 
             <u>wanted</u>!</small>
             </font>
         </p>
         <hr>
         <p>
             <img src="Newauth.gif" width="189" height="232" 
                 alt="Francesco, a budding author... " align="left">
             <img class="moreinfo" id="newauthor" src="back.gif" 
                 width="181" height="64" alt="Go back to the previous page">
         </p>
         <p>Our <big>youngest</big> author...</p>
     </div>
 </div>

Figure 9   Author Information Script


 <script language="JavaScript" 
         src="http://expoware/rsmind/rs.htm">
 </script>
 <script language="JavaScript">
         RSEnableRemoteScripting( "http://expoware/rsmind" );
 </script>
 
 <script language="JavaScript">
   var serverURL = "http://expoware/rsmind/authinfo.asp";
   var localXML  = "c:\\temp.xml";
 
   //---------------------------------------------
   function DoGetAuthorInfo( sAuthorName ) {
   //---------------------------------------------
      var co = RSExecute( serverURL, "GetAuthorData", sAuthorName );
      if( co.status != 0 )
         alert( "An error occurred. Check the input data submitted." );
      else  {
         if( co.return_value == "No info" ) {
             authinfoview.DefaultText = sAuthorName + 
                 "<br><br><i>Author not found.</i>"
             return;     
         }
         
        // create a local copy of the XML string
        file = new ActiveXObject( "Scripting.FileSystemObject" );
        h = file.CreateTextFile( localXML,  -1 );
        h.WriteLine( co.return_value );
        h.Close();
 
        // call a scriptlet to render the data 
        authinfoview.XML = localXML;
    }
 }
 </script>
 
 <script language="JavaScript" for="window" event="onload">
   go.Image = "go.gif";
   go.HotImage = "go1.gif";
   go.BackgroundColor = "#CCCCCC";
   go.Description = "Get author's info through Remote Scripting"
   authinfoview.DefaultText = "Here you'll see author's information...";
 </script>
 
 <script language="JavaScript" for="go" event="onclick">
   DoGetAuthorInfo( AuthorName.value );
 </script>

Figure 10   GetAuthorData


 <% RSDispatch %>
 
 <SCRIPT RUNAT=SERVER Language="JavaScript">
 <!--#INCLUDE FILE="../rs.asp"-->
 
     function Description()     { 
        this.GetAuthorData = DoGetAuthorData;
     }
 
     public_description = new Description();
 
     function DoGetAuthorData( sAuthorName )
     {
              o = new ActiveXObject( "AuthInfo.Biblio" );
              aRet = o.GetAuthorInfo( sAuthorName );
              if( aRet.length < 4 )
                 return aRet[0];
 
              // format an XML string
              s = "<authorinfo>\n";  
              s += "<authorID>"      + aRet[0] + "</authorID>\n";
              s += "<authorName>"    + aRet[1] + "</authorName>\n";
              s += "<authorAge>"     + aRet[2] + "</authorAge>\n";
              s += "<Books Total=\"" + aRet[3] + "\">\n";          
              for( i=4; i<aRet.length; i+=4 )  {
                 s += "<Book>\n";
                 s += "<ISBN>"      + aRet[i]   + "</ISBN>\n";
                 s += "<Title>"     + aRet[i+1] + "</Title>\n";
                 s += "<Year>"      + aRet[i+2] + "</Year>\n";
                 s += "<Publisher>" + aRet[i+3] + "</Publisher>\n";
                 s += "</Book>\n";
              } 
              s += "</Books>\n</authorinfo>";  
              
              return s; 
     }
 </SCRIPT>

Figure 15   DBViewer.htm


 <html>
 
 <head>
 <title>DataBinding Scriptlet</title>
 <style>
   .defScriptlet {
      font-Family: verdana;
      font-Size: 10;
      background-color: "gainsboro";
      margin: 0;
   }
   .defTable {
      width:100%;
      font-Family: verdana;
      font-Size: 10;
      margin: 0;
   }
   .defHead {
      background-color: "#000000";
      color: "white";
      cursor: "";
      font-Family: verdana;
      font-Size: 11;
      font-Weight: bold;
      text-align: center;
      margin: 1;
   }
  .defSelHead {
      background-color: "yellow";
      color: "black";
      cursor: "hand";
      font-Family: verdana;
      font-Size: 11;
      font-Weight: bold;
      text-align: center;
      margin: 1;
   }
  .defItem {
      font-Family: verdana;
      font-Size: 10;
      margin: 1;
 </style>
 </head>
 
 
 <script language="JScript" for="rdsTable" event="onmouseover">
    if( window.event.srcElement.tagName == "TH" )
       DoHighlight( window.event.srcElement, 1 );
 </script>
 
 <script language="JavaScript" for="rdsTable" event="onmouseout">
    if( window.event.srcElement.tagName == "TH" )
       DoHighlight( window.event.srcElement, 0 );
 </script>
 
 <script language="JavaScript" for="rds" event="ondatasetcomplete">
   DoInsertTable();
   if( m_buddyElem != 0 )
      m_buddyElem.innerHTML = "<b>" + rds.recordset.recordcount + "</b> record(s)
         available."
 </script>
 
 
 
 <script language=JavaScript>
 public_description = new CreateDataBinder();
 var inScriptlet = (typeof(window.external.version)=="string");
 var m_connect = "";
 var m_sqlCmd = "";
 var m_buddyElem = 0;
 var m_clsid = "clsid:BD96C556-65A3-11D0-983A-00C04FC29E33";
 
 
 
 /*----------------------------------------------*/
 function CreateDataBinder() {
 /*----------------------------------------------*/
   this.put_Connect = DoPutConnect;  
   this.get_Connect = DoGetConnect;
   this.put_Sql = DoPutSql;  
   this.get_Sql = DoGetSql;
   this.put_BuddyElement = DoPutBuddyElement;  
   this.Execute = DoExecute;
 }
 
 
 /*----------------------------------------------*/
 // PROPERTY Connect
 /*----------------------------------------------*/
 function DoPutConnect( sConnect ) {
    m_connect = sConnect;
 }
 function DoGetConnect() {
    return m_connect;
 }
 
 
 /*----------------------------------------------*/
 // PROPERTY Sql
 /*----------------------------------------------*/
 function DoPutSql( sSql ) {
    m_sqlCmd = sSql;
 }
 function DoGetSql() {
    return m_sqlCmd;
 }
 
 
 /*----------------------------------------------*/
 // PROPERTY BuddyElement
 /*----------------------------------------------*/
 function DoPutBuddyElement( eBuddy ) {
    return m_buddyElem = eBuddy;
 }
 
 
 /*----------------------------------------------*/
 function DoExecute() {
 /*----------------------------------------------*/
    if( inScriptlet ) {
      window.external.scrollbar = 2;
      window.external.selectableContent = 1;
    }
 
    DoInsertRDSControl();
 }
 
 
 /*----------------------------------------------*/
 function DoInsertRDSControl() {
 /*----------------------------------------------*/
   s0 = "<object id=rds height=1 width=1 ";
   s1 = "classid=\"" + m_clsid + "\"" + ">";
   s2 = "<param name=\"Connect\" value=\"" + m_connect + "\">";
   s3 = "<param name=\"SQL\" value=\"" + m_sqlCmd + "\">";
   s4 = "</object>";
   s = s0+s1+s2+s3+s4;
 
   document.all("rdsControl").innerHTML = s;
 }
 
 
 /*----------------------------------------------*/
 function DoInsertTable() {
 /*----------------------------------------------*/
   iNumOfFields = rds.recordset.Fields.count;
 
   s0 = "<table class=defTable border=1 datasrc=\"#rds\">";
 
   s1 = "<thead><tr>"
   s2 = "";
   for( i=0; i<iNumOfFields; i++ )
     s2 += "<th id=tHead class=defHead>" + rds.recordset.Fields(i).Name + "</th>";
   s3 = "</tr></thead>";
   
   s4 = "<tbody class=defItem><tr>"
   s5 = ""
   for( i=0; i<iNumOfFields; i++ )
     s5 += "<td><span datafld=\"" + rds.recordset.Fields(i).Name + "\"></span></td>";
   s6 = "</tr></tbody>";
   
   s = s0+s1+s2+s3+s4+s5+s6;
   
   document.all("rdsTable").style.display = "";
   document.all("rdsTable").innerHTML = s;
   m_records = rds.recordset.recordcount;
 }
 
 
 /*----------------------------------------------*/
 function DoHighlight( sElem, bYes ) {
 /*----------------------------------------------*/
   if( bYes )  
      sElem.style.color = "red"; 
   else
     sElem.style.color = "white"; 
 }
 
 </script>
 
 
 <body class=defScriptlet>
   <div id=rdsControl></div>
   <div id=rdsTable></div>
   <table datasrc="#rds"></table>
 </body>
 </html>