Tuesday, May 12, 2015

A simple dojo JSONP example

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

This e-mail and any files transmitted with it are for the sole use of the intended recipient(s) and may contain confidential and privileged information. If you are not the intended recipient(s), please reply to the sender and destroy all copies of the original message. Any unauthorized review, use, disclosure, dissemination, forwarding, printing or copying of this email, and/or any action taken in reliance on the contents of this e-mail is strictly prohibited and may be unlawful. Where permitted by applicable law, this e-mail and other e-mail communications sent to and from Cognizant e-mail addresses may be monitored.

No comments:

Post a Comment