DataBase Connectivity In 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

For more information, download the attached sample application.

Up Next
    Ebook Download
    View all
    Learn
    View all