<!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: <span style="font-size:8pt">(SQL created in JavaScript)</span></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/2searchDB.php" //server process to call
//========================================================================================
// doRequest: process the request each time there is a change in the entry field
//========================================================================================
function doRequest(method)
{
searchStr = document.getElementById("search").value; //get value entered in form
param = "user=demo2&pswd=demo2&db=demo2"; //fabricate the query string
param += "&sql=select name from country "
+ "where name like '" + searchStr + "~' " //I am using ~ instead of %
+ "order by name"; //% is used for url encoding
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
}
//====================================================================================================
// doResponse: parse returned data and display on html page
// The returned string is either
// - XML
// - JSON string in format: [ {'name':'value', 'name':'value', ...}, {'name':'value', ...} ]
//====================================================================================================
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=2; i<responseLines.length; i++)
lines += "<nobr><a href=searchResult.html?" + searchStr + ">"
+ responseLines[i]
+ "</a></nobr>";
}
if (document.getElementById("JSON").checked) //if JSON is requested
{
var ArrOfObj = respJSON //the reponse in JSON format
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>