<!DOCTYPE html>
<html>
<head>
<title>AJAX Asynchronous call - JSON</title>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<style>
#output {height:200px;width:300px; border:2px solid #cccccc; visibility:hidden; overflow:scroll}
a {color:black; text-decoration:none; display:block;}
a:hover {color:white; background-color:#2554C7;}
</style>
</head>
<body>
<h1>Enter your Search Criteria: <span style="font-size:8pt">(using inline XMLHttpRequest)</span></h1>
<table>
<tbody>
<tr>
<td>Search for user:</td>
<td><input type="text" id="search" size=46 onKeyUp="doRequest();"/>
<td><input type="checkbox" id="showResp"/>
<td>Show returned JSON</td>
</tr>
<tr>
<td></td>
<td><div id="output"></div>
</tr>
</tbody>
</table>
<script>
var reqObj; //global var to hold request object
var url = "https://workshop.sps.nyu.edu/~sultans/python/demo/ws/1searchJSON.py" //server process to call
//var url = "try.json"
//========================================================================================
// doRequest: process the request each time there is a change in the entry field
//========================================================================================
function doRequest(method)
{
reqObj = new XMLHttpRequest(); //create a XMLHttpRequest object
searchStr = document.getElementById("search").value; //get value entered in form
queryString = "q=" + searchStr; //fabricate a "q=value entered"
requestBody = "";
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.setRequestHeader("Cache-Control","no-cache"); //Do not cache the response data
// reqObj.setRequestHeader("Pragma","no-cache"); //the same - for backward compatibility
// reqObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
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()
{
response = reqObj.responseText; //the response data in JSON format
// var ArrOfObj = eval(response); //parse using javaScript eval() function
var ArrOfObj = JSON.parse(response); //parse using JSON.parse() function
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 through all lines as an array
{
lines += "<nobr><a href=searchResult.html?" + searchStr + ">"
object = ArrOfObj[i]; //each line is an object
for (var name in object) //loop through each line as an object
lines += object[name] + ", "; //get the property values
lines += "</a></nobr>";
}
outputDiv = document.getElementById("output"); //get reference to the div tag
outputDiv.innerHTML = lines; //output the response
outputDiv.style.visibility = "visible"; //make the output area visible
}
</script>
</body>
</html>