Cross Domain JSONP ( Json with padding ) with Jquery and Servlet or JAX-WS

• Solving Cross Domain problem using JSONP ( Json with padding ) with Jquery and Servlet JAX-WS
• or Cross-domain communications with JSONP
• or Cross domain jquery or cross domain Ajax
• or java - Sending JSONP vs. JSON data
• or JSONP javascript or Java JSONP

  Well there are several techniques to address cross domain problem. Here are few.

1. Using CORS ( Cross-Origin Resource Sharing ) where in we modify the repsonse header

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://test.com:8080 http://foobar.com
The asterisk permits scripts hosted on any site to load your resources; the space-delimited lists limits access to scripts hosted on the listed servers.
Problem is CORS may not work in all browsers ( See: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing)

2. Other option is to use some server side re-direct of the request to a servlet or a php script on your  own domain which in trun calls third party web site.
But at times we may not have this option to implment a servlet or PHP script which we can call on our domain.

3.If the third party url that you are invoking supports JSONP response then all browsers work without complaining


What is JSONP ?
- JSONP - JSon with padding. It means to your JSON response we will append the callback method name.
eg: Let say your JSON response is  {"totalInterestPmtAmt":5092.79,"totalPmtAmt":15092.79}
and lets assume the callback method name that was sent in request was  getPayment JSONP Response will be :getPayment( {"totalInterestPmtAmt":5092.79,"totalPmtAmt":15092.79} )
(However if you dont give call back method name Jquery dynamically generates a method name sends in request and when response comes back  it will use that method name to call it ...Read further everything will make sense...)

Since all browsers allow injecting java scripts from third party websites without complaining (that they are cross domain) in JSONP the response we need, is wrapped as a Java script method there by fooling the browser to think its as java script.
<script> tag is less restrictive hence in JSONP you got the same JSON response with a call back method added to it. So browser was happy that it was just injecting some java script function and did not complain. Sweet !!!

Enabling JSONP Server side using Servlet as wrapper for JAX-WS webservice
--------------------------------------------------------------------------------------------------
I had an exisitng JAX-WS webservice which returns  JSON response. Most time this webservice is invoked by some other server component. But we had a client who had to call using Ajax and browser started complaining that we are accessing cross domain url.

Let say my webservice url was:
http://abcd.com/Calculation/CalculationWebServiceImpl.wsdl

And the caller is on
http://xyz.com/displayRate.html ---> this page has ajax call. (will show later )

So all we did was added a servlet called CalulationServlet which had the URL
http://abcd.com/Calculation/CalculationServlet

//SERVLET:

package com.rama.test.jsonp;
public class CalculationServlet extends HttpServlet{
   // NOTE: JSONP works only iwth GET request
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        processRequest(request, response);
    }

//JSONP cannot work for POST.....So dont implement. 
  protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

 }
  private void processRequest(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
     String amount = request.getParameter("amount");
     String rate= request.getParameter("interestRate");
     BigDecimal  principal = new BigDecimal( amount);
     BigDecimal  interestRate = new BigDecimal(rate);        

//If are using Jquery each time the call back method name will be auto generated.// but Parameter name can be controlled
// most often all exmaples I have seen use "callback" as request parameter
//eg: your call method name can be like.  jsonp1337622713385
String callBackJavaScripMethodName = request.getParameter("callback");


//Here called my webservice as if like any other java client.      
//callWebservice -- Takes two input param and returns response as JSON    

 String jsonResponseData =   callWebservice(principal,interestRate);
// so it will look like  
//jsonp1337622713385 ( {"totalInterestPmtAmt":5092.79,"totalPmtAmt":15092.79} );
String jsonPoutput = callBackJavaScripMethodName + "("+ jsonResponseData + ");";

//Write it to Response  

   response.setContentType("text/javascript");
   PrintWriter out = response.getWriter();
   out.println(jsonPoutput);
 }    
}

NOTE: Its very important that the response content type is set to   text/javascript
Now I edited the web.xml that was already there for my webservice I added the following entry

  <servlet>
   <description>This Servlet  was added to support JSONP protocol to resolve cross domain scripting problem
    </description>
        <display-name>CalculationServlet</display-name>
       <servlet-name>CalculationServlet</servlet-name>
        <servlet-class>com.rama.test.jsonp.CalculationServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CalculationServlet</servlet-name>
       <url-pattern>/CalculationServlet</url-pattern>
    </servlet-mapping>

Now my servlet can be invoked using the url
http://abcd.com/Calculation/CalculationServlet?amount=10000  (as the web app name is Calculation)

JQuery to invoke:
Inside the any html page assuming you have Jquery included

<SCRIPT src="scripts/jquery.js"></SCRIPT>

<SCRIPT>

function callWebService() {
///the callback=? the questsion mark will be replace by JQuery with 
//some method name like jsonp1337622713385
//So when response comes back the response is packed inside this method.
//Thats all we did in server side. The callback method name is dynamically 
//generated by JQUERY.


var calcServcURLValue = 'http://abcd.com/Calculation/CalculationServlet?amount=10000&callback=?';
    $.ajax({ 
            url: calcServcURLValue , 
            type: 'get',  /* Dont use post it JSONP doesnt support */
            dataType: 'jsonp',
            success: function(res) {
             alert('Yahoo!!!! We got the Response back')
             processResponse(res);
          }
          , 
            error: function(e , msg){ 
                processError(e,msg);
            }
    }); 
 }


function processError(e , msg){
    alert('Call to Service Failed');
}


//The res object you get is a JSON object 
// Since the JSON response is 
// {"totalInterestPmtAmt":5092.79,"totalPmtAmt":15092.79}
//yes the call back method name will 
//be removed by Jquery isn that neat 

function processResponse(res){
    alert('totalInterestPmtAmt='+ res.totalInterestPmtAmt);
    alert('totalPmtAmt='+ res.totalPmtAmt);
}

</script>

//Add some html and a button to call function callWebService( ) you should be all set.

so this work around will save you from CROSS Domain Issues.