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);
})();
