<html>
<head>
<title>ScriptSrcIO Page</title>
<style>
.sectionTest{
display: none;
}
</style>
<script language="JavaScript" type="text/javascript">
// Dojo configuration
djConfig = {
// preventBackButtonFix: true,
//debugAtAllCosts: true,
isDebug: true
};
</script>
<script language="JavaScript" type="text/javascript" src="../../dojo.js"></script>
<!-- script language="JavaScript" type="text/javascript" src="../../src/io/ScriptSrcIO.js">< / script -->
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.io.*");
dojo.require("dojo.io.ScriptSrcIO");
//dojo.hostenv.writeIncludes();
var simpleTestPage = "scriptsrc/Test.js";
dojo.addOnLoad(function(){
//Notice this is a global variable.
transport = dojo.io.ScriptSrcTransport;
});
window.onload = function(){
transport = dojo.io.ScriptSrcTransport;
}
function getForceSingleRequestValue(){
return gi("forceSingleRequestCheckbox").checked;
}
function getPreventCacheValue(){
return gi("preventCacheCheckbox").checked;
}
function getContentValue(){
if(gi("contentCheckbox").checked){
return { content1: "value1", content2: "value2", content3: "value3" };
}else{
return null;
}
}
function insertLotsOfParams(){
gi("myQuery").value = "paramOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four¶mOne=one¶mTwo=two¶mThree=three¶mFour=four";
}
function createSimpleKwArgs(){
return {
url: simpleTestPage,
mimetype: "text/javascript",
transport: "ScriptSrcTransport",
load: loadFinished,
error: loadError,
timeout: loadTimeout,
timeoutSeconds: 10,
forceSingleRequest: getForceSingleRequestValue(),
preventCache: getPreventCacheValue(),
content: getContentValue()
};
}
function testLoad(){
transport.removeScripts();
var kwArgs = createSimpleKwArgs();
kwArgs.checkString = "myTasks";
dojo.io.bind(kwArgs);
}
function testBadLoad(){
transport.removeScripts();
var kwArgs = createSimpleKwArgs();
kwArgs.checkString = "myTasks2";
dojo.io.bind(kwArgs);
}
function testEndlessLoad(){
transport.removeScripts();
var kwArgs = createSimpleKwArgs();
kwArgs.checkString = "myTasks2";
kwArgs.timeoutSeconds = 0;
kwArgs.timeout = function() {alert("This function should not be called.")};
dojo.io.bind(kwArgs);
}
function testEndlessLoadWithNoCheckStringOrListener(){
transport.removeScripts();
var kwArgs = createSimpleKwArgs();
kwArgs.timeoutSeconds = 0;
kwArgs.load = function() {alert("load: This function should not be called.")};
kwArgs.error = function() {alert("error: This function should not be called.")};
kwArgs.timeout = function() {alert("timeout: This function should not be called.")};
kwArgs.timeoutSeconds = 0;
dojo.io.bind(kwArgs);
}
function testJsonp(){
transport.removeScripts();
var url = gi("myJsonpUrl").value;
if(!url){
alert("Please enter a URL for the test");
return;
}
var query = gi("myJsonpQuery").value;
if(query){
query = "?" + query;
}else{
query = "";
}
var kwArgs = createSimpleKwArgs();
kwArgs.url = url + query;
if(dojo.byId("useJsonCallback").checked){
kwArgs.jsonParamName = "callback";
}else{
kwArgs.jsonParamName = "jsonp";
}
kwArgs.load = handleJsonpAnimalType;
dojo.io.bind(kwArgs);
}
function testJsonpBad(){
transport.removeScripts();
var query = gi("myJsonpQuery").value;
if(query){
query = "?" + query;
}else{
query = "";
}
var kwArgs = createSimpleKwArgs();
kwArgs.url = "Bad.js" + query;
if(dojo.byId("useJsonCallback").checked){
kwArgs.jsonParamName = "callback";
}else{
kwArgs.jsonParamName = "jsonp";
}
kwArgs.load = handleJsonpAnimalType;
dojo.io.bind(kwArgs);
}
function handleJsonpAnimalType(type, data, evt, kwArgs){
output("JSONP callback OK. animalType is: " + data.animalType);
}
function testMultipart(testServerParamChange){
transport.removeScripts();
var url = gi("myUrl").value;
if(!url){
alert("Please enter a URL for the test");
return;
}
var query = gi("myQuery").value;
if(query){
query = "?" + query;
}else{
query = "";
}
var constantParams = gi("myConstParams").value;
if(!constantParams){
constantParams = null;
}
if(testServerParamChange){
if(constantParams){
constantParams += "&TESTSERVERPARAMCHANGE=TRUE";
}else{
constantParams = "TESTSERVERPARAMCHANGE=TRUE";
}
}
var kwArgs = createSimpleKwArgs();
kwArgs.url = url + query;
kwArgs.constantParams = constantParams;
kwArgs.useRequestId = true;
dojo.io.bind(kwArgs);
}
function testBadMultipart(){
transport.removeScripts();
var query = gi("myQuery").value;
if(query){
query = "?" + query;
}else{
query = "";
}
var constantParams = gi("myConstParams").value;
if(!constantParams){
constantParams = null;
}
var kwArgs = createSimpleKwArgs();
kwArgs.url = "Bad.js" + query;
kwArgs.constantParams = constantParams;
kwArgs.useRequestId = true;
dojo.io.bind(kwArgs);
}
function loadTimeout(){
output("Script timeout!");
}
function loadError(type, data, event){
output("Error! Exception: " + event.status + ", " + event.statusText + ", " + event.response);
}
function loadFinished(type, data, event){
if(data == null){
output("Script is loaded. First task is: " + myTasks[0]);
}else{
output("<br />Multipart script finished loading. Data:<br><pre>" + htmlEscape(data) + "</pre>");
}
}
function htmlEscape(message){
return message.replace(/\</g, "<").replace(/\>/g, ">").replace(/\&/g, "&");
}
function output(message){
gi("output").innerHTML += message + "<br />";
}
function gi(id){
return document.getElementById(id);
}
function hideAll(){
gi("howTo").style.display = "none";
gi("simpleTests").style.display = "none";
gi("jsonpTests").style.display = "none";
gi("multipartTests").style.display = "none";
}
function showHowTo(){ hideAll();gi('howTo').style.display = 'block'; }
function showSimple(){ hideAll();gi('simpleTests').style.display = 'block'; }
function showJsonp(){ hideAll();gi('jsonpTests').style.display = 'block'; }
function showDsr(){ hideAll();gi('multipartTests').style.display = 'block'; }
function printScriptUrls(){
var scripts = document.getElementsByTagName('script');
var scriptUrls = new Array();
output("ScriptSrcTransport URLs:");
for(var i = 0; scripts && i < scripts.length; i++){
var scriptTag = scripts[i];
if (scriptTag.className == 'ScriptSrcTransport'){
output("<pre>" + scriptTag.src + "</pre>");
}
}
return scriptUrls;
}
window.onerror = function(message) {alert(message);};
</script>
</head>
<body>
<b>ScriptSrcIO test page:</b>
<a href="javascript:void(0);" onclick="showHowTo()">How To</a> |
<a href="javascript:void(0);" onclick="showSimple()">Simple and Polling Tests</a> |
<a href="javascript:void(0);" onclick="showJsonp()">JSONP And JSON Callback Tests</a> |
<a href="javascript:void(0);" onclick="showDsr()">DSR ID/Multipart Tests</a>
<hr>
<div>
<input type="checkbox" id="preventCacheCheckbox">Prevent Cache
<input type="checkbox" id="forceSingleRequestCheckbox">Force Single Request
<input type="checkbox" id="contentCheckbox">Add Content Parameters
<button onclick="printScriptUrls();">Show ScriptSrcTransport URLs</button>
<button onclick="gi('output').innerHTML = '';">Clear Output</button>
</div>
<hr>
<div id="simpleTests" class="sectionTest">
<h2>Simple and Polling (checkString) Tests</h2>
<ul>
<li><a href="javascript:testEndlessLoadWithNoCheckStringOrListener()">Simple: Test no checkString and no timeout. So basically does nothing except add the script src element.</a></li>
<li><a href="javascript:testLoad()">Polling: Test loading</a> (Should say first task is take out trash)</li>
<li><a href="javascript:testBadLoad()">Polling: Test bad loading (timeout)</a></li>
<li><a href="javascript:testEndlessLoad()">Polling: Test checkString with no timeout (bad checkString, so it will never finish polling, but no messages).</a></li>
</ul>
</div>
<div id="jsonpTests" class="sectionTest">
<p><b>JSONP and JSON Callback Tests</b></p>
<input type="checkbox" id="useJsonCallback"> Use "callback" as JSON callback parameter instead of "jsonp"<br>
URL: <input type="text" size="50" id="myJsonpUrl" value="scriptsrc/TestJsonp.js"><br>
Query Params (should be proper name=urlEncodedValue&name=urlEncodedValue... syntax):
<br><textarea id="myJsonpQuery" cols="50" rows="10"></textarea><br>
<button onclick="testJsonp(false)">Test</button> (Should print out "animalType is mammal")<br>
<button onclick="testJsonpBad()">Test Bad URL (Timeout)</button> (May see error message since it is a bogus URL)<br>
</div>
<div id="multipartTests" class="sectionTest">
<p><b>DSR ID/Multipart Tests</b></p>
URL: <input type="text" size="50" id="myUrl" value="scriptsrc/TestMultipart.js"><br>
Constant Params: <input type="text" size="50" id="myConstParams"><br>
Query Params (should be proper name=urlEncodedValue&name=urlEncodedValue... syntax):
<br><textarea id="myQuery" cols="50" rows="10"></textarea><br>
<button onclick="insertLotsOfParams()">Insert Lots of Query Params</button><br>
<button onclick="testMultipart(false)">Test</button>
<button onclick="testBadMultipart()">Test Bad URL (Timeout)</button> (May see error message since it is a bogus URL)<br>
<button onclick="testMultipart(true)">Test Server param change<br>(adds a TESTSERVERPARAMCHANGE=TRUE URL parameter)</button>
</div>
<div id="howTo">
<p><b>How to Use ScriptSrcIO/ScriptSrcTransport</b></p>
<p>ScriptSrcIO (which provides ScriptSrcTransport) allows for four basic types of requests:</p>
<ul>
<li><a href="#Simple">Simple</a></li>
<li><a href="#Polling">Polling</a></li>
<li><a href="#JSONP">JSONP and JSON Callbacks</a></li>
<li><a href="#DSR">DSR/Multipart</a></li>
</ul>
<p>Each type uses <script src="url"></script> to
accomplish the request. To use ScriptSrcIO, use the following require statements:</p>
<ul>
<li>dojo.require("dojo.io.*");</li>
<li>dojo.require("dojo.io.ScriptSrcIO");</li>
</ul>
<p>and use the normal dojo.io.bind() method. To force a ScriptSrcTransport request, use <b>transport: "ScriptSrcTransport"</b> in
the keyword arguments to dojo.io.bind(). ScriptSrcTransport also implements the transport.canHandle() method, but
since the requirements for ScriptSrcTransport are a subset of XMLHTTPTransport, and XMLHTTPTransport will be registered
as a transport before ScriptSrcTransport (ScriptSrcTransport depends on BrowserIO.js, which will register XMLHTTPTransport),
it is unlikely that ScriptSrcTransport's canHandle() will be called. So, the explicit transport argument is suggested.</p>
<p><a href="#CommonArgs">Here is a list of bind() keyword arguments</a> that are supported for all types of requests. The four types of transport requests are:</p>
<p><a name="Simple"></a><b><a href="javascript:void(0)" onclick="showSimple()">Simple</a></b><br>
Simply adds a script element with a src. Does not do any polling and does not expect a callback. Also does not
support any timeouts. Example:</p>
<p><pre>
dojo.io.bind({
url: "http://the.script.url/goes/here",
transport: "ScriptSrcTransport"
});
</pre></p>
<p><a name="Polling"></a><b><a href="javascript:void(0)" onclick="showSimple()">Polling</a></b><br>
Adds a script element with a src. It will poll to see if a typeof expression does not equal undefined. When the
typeof check succeeds, a load callback is called. Timeout and error callbacks are supported with this type of
request. Example:</p>
<p><pre>
dojo.io.bind({
url: "http://the.script.url/goes/here",
transport: "ScriptSrcTransport",
checkString: "foo", //This means (typeof(foo) != undefined) indicates that the script loaded.
load: function(type, data, event, kwArgs) { /* type will be "load", data and event null, , and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
error: function(type, data, event, kwArgs) { /* type will be "error", data and event will have the error, , and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
timeout: function() { /* Called if there is a timeout */},
timeoutSeconds: 10 //The number of seconds to wait until firing timeout callback in case of timeout.
});
</pre></p>
<p><a name="JSONP"></a><b><a href="javascript:void(0)" onclick="showJsonp()">JSONP and JSON Callbacks</a></b><br>
Adds a script element with a src. This sort of usage allows using services that use the
<a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/" target="_blank">JSONP
convention</a> to specify the callback that the server will use.
Specify the name of the JSONP callback parameter using <i>jsonParamName</i>.
<a href="http://developer.yahoo.net/common/json.html">Yahoo! Web Services</a> use a jsonParamName of "callback".
Some other services use jsonParamName of "jsonp". Timeouts are supported with this type of request.
Example for a data service that uses "callback" as the URL parameter:</p>
<p><pre>
dojo.io.bind({
url: "http://the.script.url/goes/here",
transport: "ScriptSrcTransport",
jsonParamName: "callback",
load: function(type, data, event, kwArgs) { /* type will be "load", data will be response data, event will null, and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
error: function(type, data, event, kwArgs) { /* type will be "error", data will be response data, event will null, and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
timeout: function() { /* Called if there is a timeout */},
timeoutSeconds: 10 //The number of seconds to wait until firing timeout callback in case of timeout.
});
</pre></p>
<p><a name="DSR"></a><b><a href="javascript:void(0)" onclick="showDsr()">DSR/Multipart</a></b><br>
Adds a script element with a src. Uses the <a href="http://tagneto.org/how/reference/js/DynamicScriptRequest.html" target="_blank">Dynamic Script Request convention</a> to specify the callback
that the server will use. Multipart requests (splitting a long request across multiple GET requests)
is supported. Timeout and error callbacks are supported with this type of request. Example:</p>
<p><pre>
dojo.io.bind({
url: "http://the.script.url/goes/here",
transport: "ScriptSrcTransport",
useRequestId: true, //adds the _dsrId to request with a generated ID. If a specific request ID is wanted, use apiId: "myId" instead
//optional: forceSingleRequest: true, //Will not segment the request to multipart requests even if it is a long URL.
constantParams: "name1=value1&name2=value2" //params to be sent with each request that is part of a multipart request. See spec.
load: function(type, data, event, kwArgs) { /* type will be "load", data will be response data, event will be onscriptload event, and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
error: function(type, data, event, kwArgs) { /* type will be "error", data will be response data, event will be onscriptload event, and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
timeout: function() { /* Called if there is a timeout */},
timeoutSeconds: 10 //The number of seconds to wait until firing timeout callback in case of timeout.
});
</pre></p>
<p><a name="CommonArgs"></a><b><a href="javascript:void(0)" onclick="showSimple()">Common bind() arguments</a></b><br>
ScriptSrcTransport supports the following arguments across all types of requests. In general, all of these
arguments have the same meaning and use in XMLHTTPTransport.</p>
<ul>
<li><b>formNode</b>: Uses a form to generate query parameters. </li>
<li><b>backButton</b>, back, forward, forwardButton, changeUrl: used to register a back/forward handler. See dojo.undo.browser for more info.</li>
<li><b>content</b>: a JS object that gets turned into query parameters.</li>
<li><b>postContent</b>: Adds raw name=value parameters to query parameters.</li>
<li><b>sendTransport</b>: Adds <i>dojo.transport=scriptsrc</i> to query parameters.</li>
<li><b>preventCache</b>: Adds <i>dojo.preventCache=[unique ID]</i> to bypass browser cache and force a fresh GET.</li>
<li><b>handle</b>: A function that accepts the following arguments: function(type, data, event) {}. This can be used instead of specifying a separate load, error and timeout handler. The <i>type</i> parameter will be a string that specifies the callback type ("load", "error", "timeout").</li>
</ul>
</div>
<hr>
<span id="output"></span>
</body>
</html>