<!DOCTYPE html>
<html>
<head>
<title>AJAX call</title>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<style>
table {border:solid black 1px; background-color:#dddddd}
th {background-color:#aaaaaa}
th, td {border-right:solid black 1px; border-bottom:solid black 1px}
</style>
</head>
<body bgcolor=lightyellow>
<h1>REST/AJAX - Server Call</h1>
<label for=sql>Enter SQL Statement</label><br>
<!--<input type=text id=sql size=50 value='show tables'> -->
<textarea id=sql cols=80 rows=6>show tables</textarea>
<br><br>
<input type=button value=' Execute ' onClick=doRequest()>
See..
<input type=checkbox id=req> <label for=req> request </label>
<input type=checkbox id=resp><label for=resp>response</label>
<hr>
<div id=output></div>
<script>
var reqObj; //global var to hold request object
var url = "https://storm.cis.fordham.edu/~sultan/web/demo/php/xAjaxRest.php" //server process to call
//========================================================================================
// doRequest: process the request
//========================================================================================
function doRequest(method)
{
reqObj = new XMLHttpRequest();
stmt = document.getElementById("sql").value; //get value entered in form
param = "user=demo&pswd=demo&db=demo"; //fabricate the query string param
param += "&sql=" + stmt
param += "&format=json"
if (!method) method = "GET" //if none was set, default to GET
if (method == "GET") {
url2 = url + "?" + param; //param are appended to end of the url
requestBody = null; //request body = null
}
if (method == "POST") {
url2 = url; //nothing added to url
requestBody = param; //param are sent in HTTP request body
}
if (document.getElementById('req').checked) //if see request is checked
alert(url +'?'+ param);
reqObj.onreadystatechange = handleResponse; //setup an event handler function
//which will be called upon each change
//in XMLHttpRequest obj readyState
reqObj.open(method, url2, true); //setup the HTTP request using async
reqObj.send(requestBody); //send the HTTP request
}
//=================================================================================================
// handleResponse: function automatically called for each change in state of HTTP communication
//=================================================================================================
function handleResponse()
{
if (reqObj.readyState == 4) //if ready state = load complete
if (reqObj.status == 0 || reqObj.status == 200) //if response status = OK
doResponse(); //call doResponse()
}
//====================================================================================================
// doResponse: parse returned data and display on html page
// The returned string is JSON
//====================================================================================================
function doResponse()
{
var respText = reqObj.responseText; //the response data in JSON format
var ArrOfObj = JSON.parse(respText); //parse JSON string into an array of objects
if (document.getElementById('resp').checked) //if see response is checked
alert("RESPONSE:\n" + respText);
var output_str = "<table>";
var i;
for (i=0; i<ArrOfObj.length; i++) //loop thru the outer array
{
object = ArrOfObj[i];
output_str += "<tr>";
if (i==0) //for first object, print the headers
{
output_str += "<tr>";
for (key in object) //loop thru first inner object
output_str += "<th>" + key + "</th>"; //display the column headers
output_str += "</tr>";
}
for (key in object) //loop thru each inner objects
output_str += "<td>" + object[key] + "</td>"; //display the column values
output_str += "</tr>";
}
output_str += "<tr><th colspan=5>Number of rows - " + i + " </th></tr>";
output_str += "</table>";
document.getElementById('output').innerHTML = output_str;
}
</script>
</body>
</html>