<!DOCTYPE html>
<html>
<head>
<title>AJAX call</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>
<script src=util/ajax.js></script>
</head>
<body>
<h1>Search for country/state/city:</h1>
<table>
<tbody>
<tr>
<td>Search For:</td>
<td><input type="text" id="search" size=46 onKeyUp="doRequest();"/>
<td><input type="checkbox" id="showData"/> Show returned Data
<td><input type="radio" id="XML" name="type" checked="on" /> XML
<td><input type="radio" id="JSON" name="type" /> JSON
</tr>
<tr>
<td></td>
<td><div id="output"></div>
</tr>
</tbody>
</table>
<script>
var url = "https://workshop.sps.nyu.edu/~sultans/php/demo/ws/1searchDB.php" //server process to call
//========================================================================================
// doRequest: process the request each time there is a change in the entry field
//========================================================================================
function doRequest()
{
searchStr = document.getElementById("search").value; //get value entered in form
param = "name=" + searchStr; //create the parameters to be sent
if (document.getElementById("XML").checked) //if XML is requested
param += "&format=XML";
if (document.getElementById("JSON").checked) //if JSON is requested
param += "&format=JSON";
ajaxRequest(url, "GET", param, doResponse); //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("showData").checked) //if show returned data is requested
alert(respText); //display raw response data
lines = "";
if (document.getElementById("XML").checked) //if XML is requested
{
responseLines = respText.split(/\n/); //split the returned lines on \n
//and create an array
for (i=1; i<responseLines.length; i++)
if (responseLines[i].indexOf('<name>') >= 0) //if this is the <name> element
{
lines += "<nobr><a href=searchResult.html?" + searchStr + ">";
lines += responseLines[i] + '-';
lines += '<i>' + responseLines[i+1] + '</i>';
lines += "</a></nobr>";
}
}
if (document.getElementById("JSON").checked) //if JSON is requested
{
var ArrOfObj = respJSON;
for (i=0; i < ArrOfObj.length; i++) //loop through all lines as an array
{
object = ArrOfObj[i]; //each line is an object
lines += "<nobr><a href=searchResult.html?" + object[name] + ">"
lines += object['name'] + ' - '; //the name property
lines += '<i>' + object['type'] + '</i>'; //the type property
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>