Code

Objectives: How to use JSON data containing website addresses

Code :

JSON: result.json

{
"website1": "http://frontiersoft.net",
"website2" : "http://frontinterface.com",
"website3": "coming soon"
}

HTML :

<html>
<head>
<title>Test Site for JSON </title>
<style>
#results { width: 400px; height : 150px; background-color: #F0F0F0;}
</style>
<script src="http://frontiersoft.net/jquery-latest.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$.ajaxSetup({ cache:false});
$("#RR").click(function (){ location.reload(); }); // reload the page
$("#driver").click(function(event){
$.getJSON('ajax/result.json', function(data) {
$('#results').html('<sapn> website 1: <a href=' + data.website1 + '>' + data.website1 +' </a></sapn> <br/>');
$('#results').append('<sapn>web site 2 : <a href=' + data.website2 + '>' + data.website2 +' </a></sapn> <br/>');
$('#results').append('<sapn> web site 3: ' + data.website3+ '</sapn>');
});
});
});
</script>
</head>
<body>
<sapn>Click here load result.html file:</sapn><br/>
<input type="button" id="RR" value="re-load()"</>
<input type="button" id="driver" value="Load Data" />
<div id="results" >
Loading doc.....
</div>

</body>
</html>

Runtime Displays: Production / www website.

Testing over FastCGI IIS 8.0 Server intranet