Cross domain Calls in AJAX with Jsonp

Web browser doesnot allow initiating cross domain call from javascript. There are multiple ways to initiate cross domain calls, I will be showing example on how to make cross domain call from javascript using jsonp.


Using Jquery following is the way to initiate Cross Domain call.

in $.ajax method, "dataType" parameter should be set to "jsonp", here jsonp means Json with padding, with jsonp a javascript code
is injected in client browser, which enables code to make cross domain call.

function initiateCrossDomainCall(url) {
 $.ajax({
     dataType: 'jsonp', // json with padding
     type:"GET",
            url : url,
            success: function ( data) {
             parseResp(data);
            },
     error: function ( data, status, error) {
  parseErrorResp(data, status, error)
     },
            timeout: 2000
  });
}
function parseResp(data){
 //add code to parse responsedata.
}
function parseErrorResp(data, status, error){
 // parse errr response.
}

Basically when above javascript call is initiated from client, and dataType is mentioned as JSONP, then jquery by default adds a parameter to the url. parameter name will be "callback" and name of the method will dynamically generated by jquery. Server response should be wrapped inside this method.. e.g. in the below url call, you can see the callback=jQuery11230083279708298031_1472922945432, "jQuery11230083279708298031_1472922945432" this is the function name in which response should be wrapped and sent back from the server side code.

http://localhost:8080/location?callback=jQuery11230083279708298031_1472922945432&_=1472922945433

Incase if custom callback method is defined in $.ajax method then jquery will send that method name in the "jsonpCallback" parameter. something like this. jsonpCallback:'handleResp' in the url call you can see the callback=handleResp is passed.

http://localhost:8080/location?callback=handleResp&_=1472922945433

To make the server side code support jsonp approach, following should be the logic on server side code. Sample code in java with spring. but this can be done in any framework with similar output.

@RequestMapping(value="/location", method=RequestMethod.GET)
public @ResponseBody String returnLocation(HttpServletRequest request){
 //reading callback paarameter
 String callback = request.getParameter("callback");
 StringBuilder sb=new StringBuilder();
//preparing response based on if callback parameter is present or not.
 if(callback!=null){
  //appending callback method name and adding json response inside that method.
 sb.append(callback).append("(").append("{\"location\":").append("BL").append("})");
 }else{
 sb.append("{\"location\":").append("BL").append("}");
 }
 return sb.toString();
}

following is the response from the server to the jsnop call.

  jQuery11230083279708298031_1472922945432({"location":"BL"})

 once the client browser receives the above response it calls back the success block of the $.ajax function and executes either "parseResp" or "parseErrorResp" method based on success or error.

that is all from jsonp.