. 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
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:
test.js code snippet:
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:
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:
And the test.js like this:
Reload the siteone page sample.html, and we will get the alert below:
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.
Code snippet of the siteone sample.html:
Reload the sample.html, we will get the same alert:
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:
Code snippet in siteone sample.html:
Reload the sample.html in siteone, we will got the alert below:
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:
When we reload the sample.html, we will get the same alert below:
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