Wednesday, April 24, 2013

How to connect DataBase with JavaScript

Note: This program will work only in Internet Explorer.

In this article I will explain how to connect to a SQL database with JavaScript and how to get data from the database.

First I create a database called EmpDetail. Then I created a table in this database. 

Query Code

CREATE TABLE [dbo].[emp](
      [id] [int] NULL,
      [name] [varchar](50) NULL,
      [salary] [int] NULL
) ON [PRIMARY]
Now insert some data into the emp table.
Complete Program
JavaScriptConnectivity.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" >
        function loadDB()
        {
            var connection = new ActiveXObject("ADODB.Connection");
          
            var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=Micr0s0ft;Provider=SQLOLEDB";
            connection.Open(connectionstring);
            var rs = new ActiveXObject("ADODB.Recordset");           
            rs.Open("select * from emp", connection);
            rs.MoveFirst();
            var span = document.createElement("span");
            span.style.color = "Blue";
            span.innerText = "  ID "+"  Name "+"   Salary";
            document.body.appendChild(span);
            while (!rs.eof)
            {
                var span = document.createElement("span");
                span.style.color = "green";
                span.innerText = "\n " + rs.fields(0) +" |  "+ rs.fields(1) +" |  "+ rs.fields(2);
                document.body.appendChild(span);
                rs.MoveNext();
            }

            rs.close();
            connection.close();
        }
    </script>
    <style type="text/css">
        #main {
            height: 264px;
        }
    </style>
</head>
<body onload="loadDB()">
    <div id="show" style="font-size: x-large; font-weight: bold">
        Employee Details</div>
</body>
</html>

Output

 Result.jpg