You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
453 lines
19 KiB
453 lines
19 KiB
|
|
<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>
|
|
|