Make WebAPI Return JSON to an AJAX Request


If you make an AJAX call to a WebAPI service using an XmlHttpRequest object, you’ll notice that the data returned to you is formatted as XML. This is because the “Accept” header in a typical XmlHttpRequest call looks something like this:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,\*/\*;q=0.8

The Accept header plays a key role in a procedure known as “content negotiation”. Content negotiation is the process by which a client and a server decide in which media type to transmit information. The “Accept” header, sent to the server from the client, indicates the types in which it is willing to receive data. This particular header states that HTML or XHTML is preferred, followed by XML, followed by anything else. As WebAPI supports XML and JSON out of the box, it will by default return data to this request in XML, which is the preferred format of the two.

But what if we want JSON? When working in JavaScript, JSON is often preferred to XML due to the ease at which JSON can be parsed into working JavaScript objects. In order to tell WebAPI to return JSON, we simply need to modify the “Accept” header of our HTTP request before it is sent. We do this as follows:

var request = new XMLHttpRequest();
request.onreadystatechange = MyCallbackFunction;
request.open("GET", "http://mywebapi.com/api/MyService");
request.setRequestHeader("Accept", "application/json");
request.send();

WebAPI will now send us JSON data in response to our calls. This data can then be parsed into JavaScript objects using the JSON.Parse() method.