DataBase Connectivity In JavaScript

Introduction

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

Note. This program will work only in Internet Explorer.

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

Query Code

Now insert some data into the emp table.

Complete Program

JavaScriptConnectivity.html

<!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

So, this is the output.