<!DOCTYPE html>
<!--=====================================================================================================
<< Call a Web Service to obtain data from an Oracle database
<< Pass it studentId=99
<< 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 Python Web Service</title>
<script>
// if (location.host != 'workshop.sps.nyu.edu') //ajax request must
// location.href = 'http://workshop.sps.nyu.edu/~sultans/python/demo/ws/webServiceUse.html' //be from same host
</script>
<script src=util/ajax.js> </script>
<script src=util/objConvert.js></script>
<script src=util/table.js> </script>
<script src=util/dump.js> </script>
<style>
@import url("util/table.css");
body {color:white; background-color:#333333; font-family:arial}
form {
background:-webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE)); /*Chrome,Safari*/
background:-moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px); /*Firefox*/
background-color:#EEEEEE;
position:relative;
width:690px; height:350px;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px; font-style:italic; font-weight:bold;
line-height:24px;
color:#09C;
text-decoration:none;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:10px;
border:1px solid #999; border:inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
#divTable {position:absolute; top:120px; left:30px; height:280px; width:665px; background-color:white;
border-style:solid; border-width:2px; border-color:#cccccc; overflow:auto; color:black}
</style>
</head>
<body bgcolor=black>
<h2>Call a Python Student Info Web Service</h2>
<form>
<table>
<tbody>
<tr>
<td>Enter Student Id...
<td><input type="text" id="stuId" />
<input type="button" value=Get onClick="doRequest()">
JSON <input type="radio" name=format id="JSON" checked >
XML <input type="radio" name=format id="XML" >
Show returned data <input type="checkbox" id="showRaw">
</tr>
</tbody>
</table>
</form>
<br><br>
<div id="divTable"></div>
<script type="text/javascript">
var url = "http://workshop.sps.nyu.edu/~sultans/python/demo/ws/webService.py" //the Python Web Service
//=================================================================================================
// doRequest: process the request onLoad and when execute button is clicked
//=================================================================================================
function doRequest()
{
var student_id = document.getElementById("stuId").value;
var format = (document.getElementById("JSON").checked) ? 'JSON' : 'XML';
var param = "studentId=" + student_id + "&format=" + format
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("JSON").checked) //requesting JSON format
{
var arrObj = respJSON['data']; //get the data component only (ignore header)
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, 0, 'asc') //call table.js
}
if (document.getElementById("XML").checked) //requesting XML format
{
respText2 = respText.replace(/<row>/g,'<br>')
document.getElementById('divTable').innerHTML = respText2
}
}
//==============================================================================================
</script>
</body>
</html>