JSONP
This tutorial explains how developers can use JavaScript Object Notation with Padding (JSONP) to make cross-domain GET requests to the Conversations API.
Overview
JSONP is a technique for returning data in a way that works around the restrictions imposed by the Same Origin Policy. It relies on the fact that <script> tags are not subject to the Same Origin Policy. When data is requested using JSONP it is returned as a text representation of a JSON object wrapped (or "padded") with a JavaScript function name.
When a <script> tag processes a JSONP response, the JSON object is treated as an argument and if the function is already defined on the page it is executed immediately, giving that function access to the JSON object.
JSONP with the Conversations API
| Name | Description | Required |
|---|---|---|
Callback | Value is a string consisting of the following characters: a-z , A-Z , 0-9 , \_ , .(excluding comma). | No |
To perform a request that returns JSONP using the Conversations API, add the callback parameter with a value that is the name of your JSONP handling function:
Demonstration purposes only. Do not reuse the API passkeys below in your application.
JSONPHandler({"Includes":{},"HasErrors":false,"Offset":0,"TotalResults":808,"Locale":"en_US",...});
When a <script> tag processes this response, the JSON object is treated as an argument to JSONPHandler() which is executed immediately, giving it access to the JSON object. The following examples will make this more clear:
Examples
These examples demonstrate how to perform cross domain requests and process the responses using the Conversations API and JSONP
Plain JavaScript
To perform a request that returns JSONP using the Conversations API, add the &callback= parameter with a value that is the name of your JSONP handling function
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Bazaarvoice Conversations API with JSONP</title>
</head>
<body>
<script>
function JSONPHandler(data) {
console.log(data);
}
</script>
<!-- Demonstration purposes only. Do not reuse the API passkeys below in your application. -->
<script src="http://stg.api.bazaarvoice.com/data/reviews.json?apiversion=5.4&passkey=kuy3zj9pr3n7i0wxajrzj04xo&callback=JSONPHandler"></script>
</body>
</html>
jQuery
jQuery simplifies the process by abstracting away the details of creating the script tag and the JSONP handler function. When a $.getJSON(URL, function) is executed with a URL containing &callback=? JQuery will transparently create the script tag and the handler function. The script tag uses the URL as its src attribute and the handler is created using the function passed as the second argument.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Bazaarvoice Conversations API with JSONP</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
<!-- Demonstration purposes only. Do not reuse the API passkeys below in your application. -->
$.getJSON('http://stg.api.bazaarvoice.com/data/reviews.json?apiversion=5.4&passkey=kuy3zj9pr3n7i0wxajrzj04xo&callback=?', function(data) {
console.log(data);
})
</script>
</body>
</html>
Learn more about $.getJSON() at http://api.jquery.com/jQuery.getJSON/
Updated 3 months ago