<!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>    
    <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;} 
    </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()" /> 
                  
                 Show returned json <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(method) {
   
    var student_id  = document.getElementById("stuId").value;        

    var param   = "studentId=" + student_id;                       

    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 

    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
}

//==============================================================================================
</script>
</body>
</html>