<!DOCTYPE html>
<!--=====================================================================================================
<< Call a REST Web Service to obtain data from a database
<< Data is retrieved on load, and when new SQL is entered
<< Must provide the database connection info in fields user, pswd, db
<< Must provide SQL statements in a field called sql
<< Must provide web service name either as a PHP or Java Web service
<< Must provide database type as either dbtype=Oracle or dbtype=MySql
<< Must provide output format as either format=XML or format=JSON
<< Must provide a div tag called "divTable" where the table will be displayed
<< You can fine tune the displayed table using the CSS below
======================================================================================================-->
<html>
<head>
<title>Call a REST Web Service using AJAX</title>
<script src=ajax.js> </script>
<script src=objConvert.js></script>
<script src=table.js> </script>
<script src=dump.js> </script>
<style>
@import url("table.css");
#divTable {position:absolute; top:250px; left:170px; height:262px; width:700px; background-color:white;
border-style:solid; border-width:2px; border-color:#cccccc; overflow:auto;}
#divURL {position:absolute; top:520px; left:170px; width:700px; color:#999999}
</style>
</head>
<body bgcolor=lightyellow>
<h1>Call a REST Web Service using AJAX</h1>
<table>
<tbody>
<tr>
<td>User / Pswd / Database...
<td><input type="text" id="_user" value="demo" style='width:162px'> /
<input type="password" id="_pswd" value="" style='width:162px'> /
<input type="text" id="_db" value="" style='width:162px'>
<tr>
<td>Enter SQL Statement...</td>
<td><textarea id="_sql" rows="5" style='width:530px'>select * from student</textarea>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Execute SQL" onCLick="doRequest()">
<select id="_lang">
<option value='php' selected> PHP </option>
<option value='python' > Python </option>
</select>
<select id="_dbtype">
<option value='mysql' selected > MySql </option>
<option value='sqlite' > Sqlite </option>
</select>
<select id="_format">
<option value='json' selected> JSON </option>
<option value='xml' > XML </option>
</select>
Show returned json/xml <input type="checkbox" id="showRaw">
</tr>
</tbody>
</table>
<br><br>
<div id="divTable"></div>
<div id="divURL"> </div>
<script type="text/javascript">
url_php = "https://storm.cis.fordham.edu/~sultan/web/demo/php/rest.php"; //the PHP REST Web Service
url_python= "https://storm.cis.fordham.edu/~sultan/cgi-bin/rest.cgi"; //the Python REST Web Service
//==================================================================================================
// doRequest: process the request onLoad and when execute button is clicked
//==================================================================================================
function doRequest(method) {
var user = document.getElementById("_user").value; //get data from screen
var pswd = document.getElementById("_pswd").value;
var db = document.getElementById("_db").value;
var sql = document.getElementById("_sql").value;
var lang = document.getElementById("_lang").value;
var dbtype = document.getElementById("_dbtype").value;
var format = document.getElementById("_format").value;
if (!db && dbtype=='mysql') db = 'demo';
if (!db && dbtype=='oracle') db = 'ORCL';
if (!db && dbtype=='sqlite') db = 'demo';
if (!user || !pswd || !db || !sql)
{
var div = document.getElementById('divTable');
div.innerHTML = 'Please enter User, Password, Database name and SQL Statement';
div.style.color = 'red';
return;
}
if (lang=='perl' && dbtype=='oracle')
{
var div = document.getElementById('divTable');
div.innerHTML = 'If using Perl, use MySql database only';
div.style.color = 'red';
return;
}
if (lang == 'php') url = url_php; //set up the REST service URL
if (lang == 'python') url = url_python;
sql = escape(sql); //URL encode the sql
var param ='user='+user+'&pswd='+pswd+'&db='+db //create the query string params
+'&dbtype='+dbtype+'&sql='+sql+'&format='+format;
document.getElementById('divURL').innerHTML = url +'?'+ param;
var callback = doResponse; //setup a callback function
ajaxRequest(url, "GET", param, callback); //call ajax request
} //pass it the callback fucntion
//========================================================================================
// doResponse: receives the ajax response in all the following formats:
// respText - the response as a text format. Also used for HTML
// respXML - the response as an XML DOM object
// respJSON - the response as a JSON object
// respHeaders - All response headers as a single string
//========================================================================================
function doResponse(respText, respXML, respJSON, respHeaders)
{
if (document.getElementById("showRaw").checked) //if show XML is requested
alert(respText); //display raw response in XML format
if (document.getElementById("_format").value == 'json')
var arrObj = respJSON;
else
var arrObj = dom2arrObj(respXML); //convert DOM to an array of objects
var array2 = arrObj2arr(arrObj); //convert array of objects to 2 dim array
var headers = array2.shift(); //pop off the 1st array as headers
var data = array2; //the rest is all the raw data
Table(headers, data, -1, 'asc') //call table.js
}
//==============================================================================================
</script>
</body>
</html>