We
can access Http handlers directly from a regular AJAX call, if they are in the
same domain. However it is not the case if handler is hosted in a different
domain. One solution is to use JSONP (the “padding” around the pure JSON).
JSONP
pass the response from the server in to a user specified function, return the
response as JSON, but also wrap the response in the requested call back.
In
order to use JSONP, server has to support JSONP. The client tells the server
the callback function for the response. The server then return the response as
JSON, but also wraps the response in this callback function.
HttpHandler
sending the response in the format
expected by JSONP.
public
class
AtomHandler
:
IHttpHandler
{
///<summary>
///
Enables processing of HTTP
Web requests by a custom HttpHandler that implements
the System.Web.IHttpHandler interface.
///</summary>
///
<param
name="context">
A System.Web.HttpContext object that provides references to
the intrinsic server objects (for example, Request, Response, Session, and
Server) used to service HTTP requests
.<
/param>
public
voidProcessRequest(
HttpContext
context)
{
string
jsonString=
"{'Title':'What Will Brand
Engagement Look Like in 2020?','Summary':'When it comes to brand engagement, 5
years will seem like a lifetime.','UpdatedDate':'4/23/2015 4:27:46 AM
+00:00','FeedType':'MBD - Marketing'}"
;
string
jsonp=context.Request["callback"];
if
(!
String.IsNullOrEmpty
(jsonp))
{
jsonString = jsonp
+
"("+jsonString+")";
}
context.Response.ContentType =
"application/json";
context.Response.Write(jsonString);
}
///<summary>
///
Gets
a value indicating whether another request can use this instance.
///</summary>
public
bool
IsReusable
{
get
{
return
false;
}
}
}
jQuery
JSONP request to get data from handler.
var
loadAtomData=function() {
try
{
$.ajax({
url:
"http://<server>/AtomTest/AtomHandler.ashx",
type:
"GET",
dataType:
"jsonp",
jsonp:
"callback",
contentType:
"application/json;
charset=utf-8"
,
success:
function
(responseData, txtStatus, jqXHR) {
console.log(
"The response is"
, responseData);
},
error:
function
(responseData, txtStatus, errThrown) {
console.warn(responseData, txtStatus,
errThrown);
alert(
'JSONP failed - '
+ txtStatus);
}
});
}
catch(e) {
alert(e)
}
}
$(document).ready(
function() {
loadAtomData();
});
Web
browsers let scripts from a webpage to access data from a second page, if both
have the same origin (URI scheme, hostname and port). JSONP works since
browsers do not enforce the same-origin policy on <script> tags.
