topical media & game development
professional-ria-03-JSONQueryParse.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example JSON Query and Response Parse</title>
<style type="text/css">
#mapbox{
height: 450px;
width: 750px;
}
h1, h2 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}
h2{
font-size: 100%;
color: #006666;
}
.inputelement {
background-color: #507565;
border: thin solid #444444;
padding: 5px;
width: 738px;
}
.pictureHeader {
font-size: 18pt; color: #ff0000; font-family: arial;
background-color: #ffffcc;
text-align: center
}
body {
background-color: #7C947A;
}
</style>
<script
src="../../scripts/json.js"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
var xmlhttp = false;
function queryHandler(target) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
} catch (e) {
// alert("Permission UniversalBrowserRead denied.");
}
if(target !== ""){
var url = '../../phpscripts/json.php?' + target;
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = function() {
// alert("queryHandler :onreadystatechange...\n"+xmlhttp.responseText);
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('Result').innerHTML = '';
// alert("queryHandler :xmlhttp.responseText...\n"+xmlhttp.responseText);
parseResult(xmlhttp.responseText);
} else {
document.getElementById('State').innerHTML = "Loading...";
}
};
xmlhttp.send(null);
}
}
function parseResult(result){
// alert(" parseResult ...\n"+result);
resultString = result.slice(0, -1);
var JSON_object = eval("(" + resultString + ")");
// alert("parseResult:"+JSON_object);
// document.getElementById("JSONResult").innerHTML = resultString;
document.getElementById("TotalHits").innerHTML = JSON_object.ResultSet.totalResultsAvailable;
document.getElementById("Title").innerHTML = JSON_object.ResultSet.Result[0].Title;
document.getElementById("Summary").innerHTML = JSON_object.ResultSet.Result[0].Summary;
// document.getElementById("PictureHeader").innerHTML = "<center>an Example Picture</center><BR/>";
document.getElementById("PictureHeader").innerHTML = "<p>an Example Picture</p>";
document.getElementById("PictureURL").innerHTML =
"<img src=\""+JSON_object.ResultSet.Result[0].ClickUrl+ "\" alt=\""+
JSON_object.ResultSet.Result[0].ClickUrl +
"\"/>"
;
document.getElementById("State").innerHTML = "";
}
function onLoad() {
//TODO Lock HTTP requests against each other...
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('text/xml');
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function doQuery() {
var query = document.getElementById("imageQuery").value;
var uri = "http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query="+query+"&results=1&output=json";
// var uri = "http://api.local.yahoo.com/MapsService/V1/geocode?appid=YahooDemo&location=" + query;
// alert("doQuery...\n"+uri);
queryHandler(uri);
}
//]]>
</script>
</head>
<body onload="onLoad()">
<div id="header">
<h1>Simple JSON Query and Parsing Sample </h1>
<h2>
Use a JavaScript call to directly invoke RESTFul Service.
Get the response back as a JSON Object. Use the contents as JavaScript Objects.
</h2>
</div>
<br />
<div class="inputelement"><button onClick="doQuery()">Image Search Term</button>
<input id="imageQuery" value="Rose" size="50"></input>
</div>
<br />
<div id="State"></div>
<div id="Result"></div>
<!-- <p>JSONResult: <span id="JSONResult" style="font-weight:bold"></span> </p> -->
<p>TotalHits: <span id="TotalHits" style="font-weight:bold"></span> </p>
<p>Title: <span id="Title" style="font-weight:bold"></span> </p>
<p>Summary: <span id="Summary" style="font-weight:bold"></span> </p>
<span id="PictureHeader" class="pictureHeader"></span>
<span id="PictureURL"></span>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.