HowTo: Cross Domain Ajax with JSONP and ASP.NET

Actually it isn´t possible to send Ajax Requests to addresses which are reachable at the same domain like the site where the script is executed.The reason for this is the Same Origin Policy in JavaScript. There it is given, that the port, the protocol and the domain have to be equal to start requests. This is save but unfortunately not practical.

But there is a Trick. Right?

Yes! There are a lot of different possibilities to avoid the problem. Enter “Cross Domain Ajax” into the searching engine and you will have a wide pool of solutions. I almost spend half a day to take a look on all the different websites. For example it is possible to use a Proxy or Flash/Silverlight and so on. For me the best solution was JSONP.

What´s JSOPN?

JSOPN is the short form of  "JSON with padding".

The Idea behind it is as simple as clever. It works by using a security hole of the implementation of the Same Origin Policy of the Browser. It isn´t possible to start requests to other domains but you are allowed to include JavaScript Files from other Domains and while doing this you can easily import your own files. The disadvantage is that it is only possible to send data via GET and not via POST. Who plans to send more data, has to use another trick otherwise you need to compress your data. JQuery makes the implementation at this point easy as usual and help us with the adequate methods:

And this is how it looks like:

At the Client:

$.ajax({
                dataType: 'jsonp',
                jsonp: 'jsonp_callback',
                url: 'http://localhost:56761/TestService.ashx',
                success: function (j) {
                    alert(j.response);
                },
            });

The only difference to the usual jQuery Request is the line: “jsonp: “jsonp_callback”. This line includes the GET name of the parameter where jQuery transmit the name of the Callback function to the server.

jQuery works like this:

1. A <script> tag is created which points to the chosen address. In the process a random number is transmitted as a parameter (that´s the name of the calback function).
2. The server produces a JavaScript file for response, which opens a function with the random number and pass it as a JSON file.
3. The browser integrates the script and accomplishes the whole thing. jQuery now submits us the file to the "success" Event.

And at the Server:

string response = context.Request.Params["jsonp_callback"];
       response += "({\"response\":\"" + context.Session["RequestCounter"]  + " requests startet\"});";
context.Response.Write(response);

For this example I used a Generic Handler (.ashx). But you could also use a WCF service. The example consists of two projects. A clientproject “CrossDomainAjax” and a serviceproject “SourceDomain”. To start the demo press with the right mousebutton on the name of the Project -> debug -> Start new instance

Both projects should be started now. After this you should see a javascipt alert with an “1” in your browser window. With this example I also tried to find out if it´s possible to access the session of the server, and it works. After every rebuild of the page the value increase by one.

I know it´s not a really exiting example but I hope you are able to forgive me about this.

Here you can find the demo code. Have Fun :)