Performing Database Operations from within an HTML Page

Normally, to create applications that interact with a remote database, developers must use programming languages such as Java, Visual Basic, or C#. If a developer wants an HTML-based page to interact with a database, the developer would traditionally have to create one or more active server pages that reside between the HTML page and the database. Within the active server page, developers would use an ADO or ADO.NET object to interact with the database.

In Chapter 3, “Accessing Web Services from within HTML Pages,” you learned that, using the Webservice behavior, an HTML page can use JavaScript-based code to call web service methods. The HTML page in Listing 7.7, DatabaseDemo.html, uses the Webservice behavior to interact with the BookInfo web service. When you load the HTML file, your browser will display a form that you can use to query the database about a specific author. The form will then display the lists of authors, as shown in Figure 7.6. The statements in Listing 7.7 implement the DatabaseDemo.html file.

click to expand
Figure 7.6: Using HTML-based JavaScript to interact with a database

Listing 7.7 DatabaseDemo.html

<html > <head>   <title>Database Demo</title>   <script language="JavaScript">   function InitializeService()   {     service.useService("http://localhost//BookInfo/Service1.asmx?wsdl", Ä   "BookDatabase");   }   function GetAuthors()   {     service.BookDatabase.callService("GetEntries","Authors");   }   function ShowResult()   {      var Authors = new Array()      Authors = event.result.value;      for (i = 0; i < Authors.length; i++)        document.DemoForm.AuthorList.value = Ä       document.DemoForm.AuthorList.value + Authors[i] + "\n";   }   </script> </head> <body onload="InitializeService()"        style="behavior:url(webservice.htc)"       onresult="ShowResult()"> <form name="DemoForm">    <button onclick="GetAuthors()">Display Authors</button><br>    <textarea name="AuthorList" Rows="25" Columns="60"></textarea> </form> </body> </html>

Chapter 3 discusses the steps that JavaScript code within an HTML file must perform to use the Webservice behavior to interact with a remote web service. In this case, the JavaScript code uses the Webservice behavior to interact with the BookInfo web service. Specifically, the behavior calls the BookInfo web service’s GetEntries method to retrieve the names of authors listed in the Authors table. After the service returns its result, the JavaScript code calls the ShowResult method that assigns the author names to a text box.