Out of
the box ASP.NET WebAPI does not include a JSONP formatter, but it's actually very easy to create a custom formatter that implements this functionality. JSONP is one way to allow Browser based JavaScript client applications to bypass cross-site scripting limitations and serve data from
the non-current Web server. AJAX in Web Applications uses
the XmlHttp object which by default doesn't allow access to remote domains. There are number of ways around this limitation <script> tag loading and JSONP is one of
the easiest and semi-official ways that you can do this. JSONP works by combining JSON data and wrapping it into a function call that is executed when
the JSONP data is returned. If you use a tool like jQUery it's extremely easy to access JSONP content. Imagine that you have a URL like this: http://RemoteDomain/aspnetWebApi/albums which on an HTTP GET serves some data - in this case an array of record albums. This URL is always directly accessible from an AJAX request if
the URL is on
the same domain as
the parent request. However, if that URL lives on a separate server it won't be easily accessible to an AJAX request. Now, if
the server can serve up JSONP this data can be accessed cross domain from a browser client. Using jQuery it's really easy to retrieve
the same data with JSONP:function getAlbums() {
$.getJSON("http://remotedomain/aspnetWebApi/albums?callback=?",null,
function (albums) {
alert(albums.length);
});
}
The resulting callback
the same as if
the call was to a local server when
the data is returned. jQuery deserializes
the data and feeds it into
the method. Here
the array is received and I simply echo back
the number of items returned. From here your app is ready to use
the data as needed.
This all works fine - as long as
the server can serve
the data with JSONP.
What does JSONP look like?
JSONP is a pretty simple 'protocol'. All it does is wrap a JSON response with a JavaScript function call.
The above result from
the JSONP call looks like this:Query17103401925975181569_1333408916499( [{"Id":"34043957","AlbumName":"Dirty Deeds Done Dirt Cheap",…},{…}] )
The way JSONP works is that
the client (jQuery in this case) sends of
the request, receives
the response and evals it.
The eval basically executes
the function and deserializes
the JSON inside of
the function. It's actually a little more complex for
the framework that does this, but that's
the gist of what happens. JSONP works by executing
the code that gets returned from
the JSONP call.
JSONP and ASP.NET Web API
As mentioned previously, JSONP support is not natively in
the box with ASP.NET Web API. But it's pretty easy to create and plug-in a custom formatter that provides this functionality.
The following code is based on Christian Weyers example but has been updated to
the latest Web API CodePlex bits, which changes
the implementation a bit due to
the way dependent objects are exposed differently in
the latest builds.
Here's
the code:
using System;
using System.IO;
using System.Net;
using System.Net.Http.Formatting;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using System.Web;
using System.Net.Http;
namespace Westwind.Web.WebApi
{
/// <summary>
/// Handles JsonP requests when requests are fired with
/// text/javascript or application/json and contain
/// a callback= (configurable) query string parameter
///
/// Based on Christian Weyers implementation
/// https://github.com/thinktecture/Thinktecture.Web.Http/blob/master/Thinktecture.Web.Http/Formatters/JsonpFormatter.cs
/// </summary>
public class JsonpFormatter : JsonMediaTypeFormatter
{
public JsonpFormatter()
{
SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));
SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));
//MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", "application/json"));
JsonpParameterName = "callback";
}
/// <summary>
/// Name of
the query string parameter to look for
///
the jsonp function name
/// </summary>
public string JsonpParameterName {get; set; }
/// <summary>
/// Captured name of
the Jsonp function that
the JSON call
/// is wrapped in. Set in GetPerRequestFormatter Instance
/// </summary>
private string JsonpCallbackFunction;
public override bool CanWriteType(Type type)
{
return true;
}
/// <summary>
/// Override this method to capture
the Request object
/// and look for
the query string parameter and
/// create a new instance of this formatter.
///
/// This is
the only place in a formatter where
the
/// Request object is available.
/// </summary>
/// <param name="type"></param>
/// <param name="request"></param>
/// <param name="mediaType"></param>
/// <returns></returns>
public override MediaTypeFormatter GetPerRequestFormatterInstance(Type type, HttpRequestMessage request, MediaTypeHeaderValue mediaType)
{
var formatter = new JsonpFormatter()
{
JsonpCallbackFunction = GetJsonCallbackFunction(request)
};
return formatter;
}
/// <summary>
/// Override to wrap existing JSON result with
the
/// JSONP function call
/// </summary>
/// <param name="type"></param>
/// <param name="value"></param>
/// <param name="stream"></param>
/// <param name="contentHeaders"></param>
/// <param name="transportContext"></param>
/// <returns></returns>
public override Task WriteToStreamAsync(Type type, object value, Stream stream,
HttpContentHeaders contentHeaders,
TransportContext transportContext)
{
if (!string.IsNullOrEmpty(JsonpCallbackFunction))
{
return Task.Factory.StartNew(() =>
{
var writer = new StreamWriter(stream);
writer.Write( JsonpCallbackFunction + "(");
writer.Flush();
base.WriteToStreamAsync(type, value, stream, contentHeaders,
transportContext).Wait();
writer.Write(")");
writer.Flush();
});
}
else
{
return base.WriteToStreamAsync(type, value, stream, contentHeaders, transportContext);
}
}
/// <summary>
/// Retrieves
the Jsonp Callback function
/// from
the query string
/// </summary>
/// <returns></returns>
private string GetJsonCallbackFunction(HttpRequestMessage request)
{
if (request.Method != HttpMethod.Get)
return null;
var query = HttpUtility.ParseQueryString(request.RequestUri.Query);
var queryVal = query[this.JsonpParameterName];
if (string.IsNullOrEmpty(queryVal))
return null;
return queryVal;
}
}
}
Note again that this code will not work with
the Beta bits of Web API - it works only with post beta bits from CodePlex and hopefully this will continue to work until RTM :-)
This code is a bit different from Christians original code as
the API has changed.
The biggest change is that
the Read/Write functions no longer receive a global context object that gives access to
the Request and Response objects as
the older bits did.
Instead you now have to override
the GetPerRequestFormatterInstance() method, which receives
the Request as a parameter. You can capture
the Request there, or use
the request to pick up
the values you need and store them on
the formatter. Note that I also have to create a new instance of
the formatter since I'm storing request specific state on
the instance (information whether
the callback= querystring is present) so I return a new instance of this formatter.
Other than that
the code should be straight forward:
The code basically writes out
the function pre- and post-amble and
the defers to
the base stream to retrieve
the JSON to wrap
the function call into.
The code uses
the Async APIs to write this data out (this will take some getting used to seeing all over
the place for me).
Hooking up
the JsonpFormatter
Once you've created a formatter, it has to be added to
the request processing sequence by adding it to
the formatter collection. Web API is configured via
the static GlobalConfiguration object.
protected void Application_Start(object sender, EventArgs e)
{
// Verb Routing
RouteTable.Routes.MapHttpRoute(
name: "AlbumsVerbs",
routeTemplate: "albums/{title}",
defaults: new
{
title = RouteParameter.Optional,
controller = "AlbumApi"
}
);
GlobalConfiguration
.Configuration
.Formatters
.Insert(0, new Westwind.Web.WebApi.JsonpFormatter());
}
That's all it takes.
Note that I added
the formatter at
the top of
the list of formatters, rather than adding it to
the end which is required.
The JSONP formatter needs to fire before any other JSON formatter since it relies on
the JSON formatter to encode
the actual JSON data. If you reverse
the order
the JSONP output never shows up. So, in general when adding new formatters also try to be aware of
the order of
the formatters as they are added.
Resources
JsonpFormatter Code on GitHub© Rick Strahl, West Wind Technologies, 2005-2012Posted in Web Api
Tweet
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
