I'm working on a ScriptBasic address book like example that will show using a hidden IFrame and AJAX (using Prototype) to submit requests to the server to allow browsing records without refreshing the page. The following article is from the Apple site back in 2002. (before everyone started touting AJAX as the answer to client/server web scripting)
as a preface to how the upcoming address book example in ScriptBasic will work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>Remote Scripting with an IFrame - complexer client page</title>
<meta http-equiv="pragma" content="no-cache">
<script type="text/javascript">
var IFrameObj; // our IFrame object
function callToServer(theFormName) {
if (!document.createElement) {return true};
var IFrameDoc;
// We'll build our URL by checking which state
// has been selected in the drop down menu
var stateEl = document.forms[theFormName].state
var theState = stateEl.options[stateEl.selectedIndex].value
if (theState=='') {return false}; // no state has been selected
var URL = "http://developer.apple.com/internet/webcontent/states/"+theState+".html"
//provide a "loading" message
var responseMessage = document.getElementById('responseMessage');
responseMessage.style.display = 'inline';
responseMessage.innerHTML = 'loading data...';
if (!IFrameObj && document.createElement) {
// create the IFrame and assign a reference to the
// object to our global variable IFrameObj.
// this will only happen the first time
// callToServer() is called
try {
var tempIFrame=document.createElement('iframe');
tempIFrame.setAttribute('id','RSIFrame');
tempIFrame.style.border='0px';
tempIFrame.style.width='0px';
tempIFrame.style.height='0px';
IFrameObj = document.body.appendChild(tempIFrame);
if (document.frames) {
// this is for IE5 Mac, because it will only
// allow access to the document object
// of the IFrame if we access it through
// the document.frames array
IFrameObj = document.frames['RSIFrame'];
}
} catch(exception) {
// This is for IE5 PC, which does not allow dynamic creation
// and manipulation of an iframe object. Instead, we'll fake
// it up by creating our own objects.
iframeHTML='<iframe id="RSIFrame" style="';
iframeHTML+='border:0px;';
iframeHTML+='width:0px;';
iframeHTML+='height:0px;';
iframeHTML+='"><\/iframe>';
document.body.innerHTML+=iframeHTML;
IFrameObj = new Object();
IFrameObj.document = new Object();
IFrameObj.document.location = new Object();
IFrameObj.document.location.iframe = document.getElementById('RSIFrame');
IFrameObj.document.location.replace = function(location) {
this.iframe.src = location;
}
}
}
if (navigator.userAgent.indexOf('Gecko') !=-1 && !IFrameObj.contentDocument) {
// we have to give NS6 a fraction of a second
// to recognize the new IFrame
setTimeout('callToServer("'+theFormName+'")',10);
return false;
}
if (IFrameObj.contentDocument) {
// For NS6
IFrameDoc = IFrameObj.contentDocument;
} else if (IFrameObj.contentWindow) {
// For IE5.5 and IE6
IFrameDoc = IFrameObj.contentWindow.document;
} else if (IFrameObj.document) {
// For IE5
IFrameDoc = IFrameObj.document;
} else {
return true;
}
IFrameDoc.location.replace(URL);
return false;
}
// handleResponse is passed two parameters when called from the onload
// event of the pages loaded in the hidden IFRAME:
//
st: a string indicating which state is being loaded
//
doc: the document object of the page loaded in the IFRAME
function handleResponse(st, doc) {
// get a reference to the multiple select list, which we will populate
// with the data from the document loaded in the IFRAME
var namesEl = document.forms.stateForm.zipNames
// clear earlier records from the multiple select list
namesEl.length = 0
// get a reference to the DIV containing the data for this state
var dataEl = doc.getElementById(st)
// get a reference to the collection of the children elements of
// our DIV containing the data (this collection is the DIVs containing
// the actual zip names)
namesColl = dataEl.childNodes
// for easy scripting, assign the number of ZIP names for this state
// to a variable
var numNames = namesColl.length
// iterate through the collection of zip Names and
// create an option element for each one
for (var q=0; q<numNames; q++) {
if (namesColl[q].nodeType!=1) continue; // it's not an element node, let's skedaddle
var str = '' // used to store the text we'll use in the new option
str+= namesColl[q].id + ' ('
// get a reference to the collection of the children elements of
// this DIV (this collection contains the zip codes that fall under this zip name)
var zipsColl = doc.getElementById(namesColl[q].id).childNodes
var numZips = zipsColl.length
// iterate through this collection of zips and each one to the string
for (var r=0; r<numZips; r++) {
if (zipsColl[r].nodeType!=1) continue; // it's not an element node, let's skedaddle
str += zipsColl[r].id + ' '
}
str+= ')'
// create a new option element and add it to the zipNames form element
newOption = new Option(str)
namesEl.options[namesEl.length] = newOption
}
//provide a "success" message
var responseMessage = document.getElementById('responseMessage');
responseMessage.innerHTML = 'loaded records from <a href="'+doc.location+'">this external file<\/a>.';
}
</script>
</head>
<body>
<div id="theFormDiv">
<form name="stateForm" id="stateForm" action="server.html">
Select a state from this menu:
<select name="state" onchange="callToServer(this.form.name)">
<option selected value="">
<option value="AL"> Alabama
<option value="AK"> Alaska
<option value="AZ"> Arizona
<option value="AR"> Arkansas
<option value="CA"> California
<option value="CO"> Colorado
<option value="CT"> Connecticut
<option value="DE"> Delaware
<option value="DC"> District of Columbia
<option value="FL"> Florida
<option value="GA"> Georgia
<option value="HI"> Hawaii
<option value="ID"> Idaho
<option value="IL"> Illinois
<option value="IN"> Indiana
<option value="IA"> Iowa
<option value="KS"> Kansas
<option value="KY"> Kentucky
<option value="LA"> Louisiana
<option value="ME"> Maine
<option value="MD"> Maryland
<option value="MA"> Massachusetts
<option value="MI"> Michigan
<option value="MN"> Minnesota
<option value="MS"> Mississippi
<option value="MO"> Missouri
<option value="MT"> Montana
<option value="NE"> Nebraska
<option value="NV"> Nevada
<option value="NH"> New Hampshire
<option value="NJ"> New Jersey
<option value="NM"> New Mexico
<option value="NY"> New York
<option value="NC"> North Carolina
<option value="ND"> North Dakota
<option value="OH"> Ohio
<option value="OK"> Oklahoma
<option value="OR"> Oregon
<option value="PA"> Pennsylvania
<option value="RI"> Rhode Island
<option value="SC"> South Carolina
<option value="SD"> South Dakota
<option value="TN"> Tennessee
<option value="TX"> Texas
<option value="UT"> Utah
<option value="VT"> Vermont
<option value="VA"> Virginia
<option value="WA"> Washington
<option value="WV"> West Virginia
<option value="WI"> Wisconsin
<option value="WY"> Wyoming
</select><br><br>
Once a state has been selected, the multiple select list below will be populated with a partial list of Zip code names drawn from a database of html files that are loaded via a hidden IFRAME. (Zip code data drawn from sources on <a href="http://www.census.gov/geo/www/gazetteer/places.html">the US Census Bureau site</a>).
<select multiple="multiple" name="zipNames" style="width:100%; height:400px">
</select><br><br>
</form>
</div>
<div id="responseMessage" style="display:none"></div>
</body>
</html>
In another life when I was into panorama photography, I used the NASA equirectanglar
image in a Java Applet viewer I normally used to display 360 'virtual tour' images. The projection is if the surface of the earth was painted on the inside of a sphere and your standing in the middle. Google Maps has been scripted into to the demo as well.
Drag (or use arrow keys) the image to pan around the globe. (+/- for zoom)
If you click on the Google graphic, (lower left corner of map) it will open a new tab in Google Maps with your current view setting.
<html>
<head>
<title>The Blue Marble</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAKVmOoKOF2E2u7QCPFHa89hQHrkFAUW_sbTtysgTBKCd6Skuu4hRoWJVnHTyx78GAQyuNGDLOIxcAPw" type="text/javascript"></script>
<script type="text/javascript">
var map;
function onLoad() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0), 4);
}
function setloc() {
map.setCenter(new GLatLng(parseFloat(document.forms["cn"].lat.value), parseFloat(document.forms["cn"].lon.value)), 8);
}
</script>
<script language="JavaScript1.1">
function getview(p,t,f) {
document.cn.pan.value = p ;
document.cn.tilt.value = t ;
}
</script>
</head>
<body onload="onLoad()">
<applet code=ptviewer.class width=674 height=444 archive="ptviewer.jar">
<param name="file" value="earth_2700x1350.jpg">
<param name="wait" value="globe.gif">
<param name="fov" value="68">
<param name="quality" value="6">
<param name="cursor" value="MOVE">
<param name=shotspot0 value="x330 y203 q i'targetbw.gif'">
<param name=showToolbar value="true">
<param name=imgLoadFeedback value="false">
<param name="fovmin" value="35">
<param name="fovmax" value="90">
<param name="getview" value="getview">
</applet>
<table>
<form name="cn">
<tr>
<td width="145">North° (+)<br><input type="text" size=18 ID="lat" name="tilt" value="" ><br>South° (-)</td>
<td width="145">East° (+)<br><input type="text" size=18 ID="lon" name="pan" value="" ><br>West° (-)</td>
<td width="145" align="middle"><input type="button" name=mapit value=" MAP " onclick="setloc()"></td>
</tr>
</form>
</table>
<br>
<div id="map" style="width: 674px; height: 444px"></div>
</body>
</html>
