Step by Step JSONP – Ajax Cross-Domain-Requests Solution

Datetime:2016-08-22 23:51:24          Topic: JSONP  Ajax  .Net           Share

Recently, we are developping a html5/css3/javascript game . This is a card strategy game. In this project, we need to deploy the server and client in the different domains, so we have to solve a classic problem “ Cross-Domain-Requests “. Fortunately, we found that the JSONP (JSON Padding)  is a good solution for us, it can help us to solve the problem perfectly. Because the project is not completed now, and the principle of confidentiality of the project, we can’t provide the source of the project, however, we juset write a demo, that’s enough to description how JSONP works. At the end of the article, there will be an attachment ( Asp.net jQuery Cross-Domain-Request ).
What’s JSONP?
“JSONP or “JSON with padding” is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same origin policy.
Why JSOP?
Under the same origin policy (SOP), JavaScript code loaded from one domain is not allowed to fetch data from another domain. However, this restriction does not apply to the <script> tag, which can specify a URL of JavaScript code to load from a remote server in a src attribute. This was used to work around the SOP limitations by pointing the src to a web service returning dynamically generated JavaScript code (JSONP), instead of JSON data. Because the code is loaded by the <script> tag, it can be normally executed and return the desired data block, thus bypassing SOP.
How JSONP?
Still feel complex and don’t know how to start? No worries, let me tell you how step by step.
Step 1 , Create a simple website (siteone), include a sample.html and a test.js like below:
sample.html code snippet:
sample
test.js code snippet:

alert("success");

Open the sample.html in broswer, you will get the alert message “success”. Good, but this does mean anything, now let me simulate “ non-same-origin “.
Step 2 , Let’s create another asp.net website (sitetwo). Remember the siteone? Now let’s copy the test.js from siteone to sitetwo, run the two websites. Suppose the siteone’s url is localhost:801, the sitetwo’s url is localhost:802, although the two sites with the same domain (localhost), however, there are using the different ports, so we have simulated a “non-same-origin” environment. Just change part of the siteone sample.html’s code below:

sampletwo And absolutely, you will got the same JavaScript Alert like before:

alert

That means you have got the “non-same-origin” data successfully. Now have you got the secret of the “Cross-Domain-Requests”?

Step 3 , JSONP – CallBack . Step 2 tells you the fundamental of “Cross-Domain-Requests”. A very important method to implement JSONP is “CallBack”. Now let’s change the script in siteone sample.html like this:

samplethree

And the test.js like this:
test

Reload the siteone page sample.html, and we will get the alert below:

alert2

Congratulations, you now almost know how JSONP works. Actually, this is the JSONP: create a function callback, and call the function in the remote server with the parameter “JSON data” .
Set JSON data as parameter of the callback function, this is what the “ JSON Padding ” meaning.

Step 4 , Normally, we hope that we can call the script dynamicly. So how to achieve dynamic call? We can use javascript itself to create the script tag dinamicly, then we can made the “Cross-Domain-Requests” become flexible.
Code snippet of the siteone sample.html:

sample4

Reload the sample.html, we will get the same alert:

alert2

Step 5 , Until now, we have explain how JSONP. Now let’s create a simple remote server to show how the JSONP works in asp.net. Please add a generic handler “MyService.ashx” to your sitetwo, the code snippet:

myservice

Code snippet in siteone sample.html:

sample5

Reload the sample.html in siteone, we will got the alert below:

alert3

A full demo is completed now, it’s very simple, isn’t it?

Step 6 , jQuery for JSONP, of course, jQuery also support the JSONP. We can use $.getJSON(url,[data],[callback]), $.ajax etc. Here we take $.ajax(see: http://api.jquery.com/jQuery.ajax/) for example:

sample6

When we reload the sample.html, we will get the same alert below:

alert3

Conclusion

OK now, it’s time for you to try to use the JSONP in your projects following the steps. If anyone have any problems, please don’t hesitate to let me know. Send me email: ocxers#gmail.com.

Attachment : jsonp step by step

References :
1. http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
2. http://en.wikipedia.org/wiki/JSONP





About List