<!DOCTYPE html>
<html>
<head>
<title>AJAX call using inline code</title>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<style>
#output {height:80px;width:400px; border:2px solid #cccccc; overflow:scroll}
</style>
</head>
<body>
<h1>Date/Time AJAX Web Service</h1>
<table>
<tr><td>Enter number of days from now:
<td><input type="text" id="days" onKeyUp="doRequest();">
<input type="checkbox" id="showResp"> Show returned JSON</td>
<tr><td><td><div id="output"></div>
</table>
<!--
<script src=json2.js></script> //no longer needed, included in newest browsers
-->
<script>
var reqObj; //global var to hold request object
var url = "https://workshop.sps.nyu.edu/~sultans/php/demo/ws/0dateTime.php" //server process to call
doRequest()
//========================================================================================
// doRequest: process the request each time there is a change in the entry field
//========================================================================================
function doRequest(method)
{
reqObj = new XMLHttpRequest(); //create a XMLHttpRequest object
days = document.getElementById("days").value; //get value entered in form
queryString = "days=" + days; //fabricate a "days=value entered"
if (!method) method = "GET" //if none was set, default to GET
if (method == "GET") {
url2 = url + "?" + queryString; //param are appended to end of the url
requestBody = null; //request body = null
}
if (method == "POST") {
url2 = url; //nothing added to url
requestBody = queryString; //param are sent in HTTP request body
}
reqObj.onreadystatechange = handleResponse; //setup an event handler function
//which will be called upon each change
//in XMLHttpRequest obj ready state
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
parseReturnedData(); //call parsing of the returned data
}
//==============================================================================================
// parseReturnedData: parse returned data and display on html page
// The returned jsonString:
// [ {"name":"value", "name2":"value2"},
// {"name":"value", "name2":"value2"} ]
//==============================================================================================
function parseReturnedData()
{
var response = reqObj.responseText; //the response data in JSON format
var arrOfObj = JSON.parse(response); //convert it into an array of objects
if (document.getElementById("showResp").checked) //if show JSON is requested
alert(response); //display raw response in JSON format
lines = "";
for (i=0; i<arrOfObj.length; i++) //loop thru the outer array
{
var object = arrOfObj[i]; //get the inner object
for (var name in object) //loop thru each element of the object
{
var value = object[name]; //get the property value
// lines += value + " "; //append to output lines
if (name=='type') lines += value + ": ";
if (name=='date') lines += value + " ";
if (name=='year') lines += value + "/" ;
if (name=='month') lines += value + "/" ;
if (name=='day') lines += value + " ";
if (name=='hour') lines += value + ":" ;
if (name=='minute') lines += value + ":" ;
if (name=='second') lines += value + " ";
if (name=='am_pm') lines += value + " ";
if (name=='tzone') lines += value + " ";
if (name=='time') lines += value + " ";
}
lines += "<br>";
}
document.getElementById("output").innerHTML = lines; //display the lines in the div tag
}
//==============================================================================================
</script>
</body>
</html>