Well I almost got sick of find out the missing link. The missing link I am talking about is something like “What the hell am I missing for a dojo JSONP request to work?” as I was trying those examples provided in dojotoolkit.org.
Thanks to the post by Jason Schock titled “So how does JSONP really work?”. With little tinkering I understood how native plain JSONP requests work.
All that was provided in the dojotookit websites says to use jsonp:’callback’ in the script request and that kept failing miserably even though I was able to see responses in the chrome’s developer tool->network tab->response tab of urls that have been hit from the page.
So the trick is to define a variable whose scope is available for both your dojo’s request – script’s jsonp request and callback function definition.
Following is my html file that creates this Jsonp request to a data.jsonp.js file
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dojo Topic</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"
data-dojo-config="async: true"></script>
<style>
.output {
border: 2px solid green;
margin: 10px;
padding: 10px;
color: #eeeeee;
background-color: #000000;
width: 500px;
min-height: 200px;
}
</style>
<script>
var jsonpRespData = null;
require([ "dojo/request/script", "dojo/dom", "dojo/dom-construct",
"dojo/json", "dojo/on", "dojo/domReady!" ], function(script, dom,
domConst, JSON, on) {
on(dom.byId("startButton"), "click", function() {
domConst.place("<p>Requesting...</p>", "output");
script.get("/DojoCracker/data/data.jsonp.js", {
//jsonp : "dojo_request_script_callbacks.dojo_request_script0",
query: {
"callback" : "mycallback"
}
}).then(
function(data) {
domConst.place("<p>response data: <code>"
+ JSON.stringify(jsonpRespData) + "</code></p>",
"output");
},function(error) {
domConst.place("<p>Error: <p>"
+ error.response.text + "</p></p>",
"output");
});
});
});
function mycallback(data){
jsonpRespData = data
}
</script>
</head>
<body>
<h1>Output:</h1>
<div id="output" class='output'></div>
<button type="button" id="startButton">Start</button>
</body></html>
|
The closure in the my data.jsonp.js file as follows
//dojo_request_script_callbacks.dojo_request_script0({ - will come to this later
mycallback({
"identifier" : "abbr",
"label" : "name",
"items" : [ {
"abbr" : "ec",
"name" : "Ecuador",
"capital" : "Quito"
}, {
"abbr" : "eg",
"name" : "Egypt",
"capital" : "Cairo"
}, {
"abbr" : "sv",
"name" : "El Salvador",
"capital" : "San Salvador"
}, {
"abbr" : "gq",
"name" : "Equatorial Guinea",
"capital" : "Malabo"
}, {
"abbr" : "er",
"name" : "Eritrea",
"capital" : "Asmara"
}, {
"abbr" : "ee",
"name" : "Estonia",
"capital" : "Tallinn"
}, {
"abbr" : "et",
"name" : "Ethiopia",
"capital" : "Addis Ababa"
} ]
});
|
So here is the explanation. When you look into the html code you will be able to find the following
<![if !supportLists]>1. <![endif]>First a variable is simply declared and initialized to null – “var jsonpRespData = null;”
<![if !supportLists]>2. <![endif]>Then comes the dojo code with jsonp callback definition -
query: {"callback":"mycallback"}
<![if !supportLists]>3. <![endif]>Then there is this function definition – mycallback(data)
<![if !supportLists]>4. <![endif]>Then back in the jsonp success callback I use - JSON.stringify(jsonpRespData)
And that’s what I see on the screen
So why bother this much when its not documented in the dojotoolkit website. Well when I use the param jsonp:’callback’ as such as described in the dojotoolkit website, I see the following on the screen
And this error on regarding the closure defined in the data.jsonp.js file and I don’t get a hold on the response even though I see it in the response and preview tab
Well something tells me that I still miss a link o.0
