JSONP and JavaScript

Using the JSONP interface with JavaScript

JavaScript programmers will be familiar with the Same-Origin Policy, which limits requests made with the XMLHttpRequest object to servers on the same domain name as the page running the JavaScript code.  For this reason, you won't be able to call the Etsy API directly using XMLHttpRequest.  One way to get around this limitation is to build a proxy application to make requests to beta-api.etsy.com and serve the response to your JavaScript code.  This can be useful if you want to implement caching.  Another solution is to use the Etsy API's built-in JSONP interface, which uses <script> tag injection as an alternative to XMLHttpRequest.  (Here is an in-depth description of JSONP.) To use the JSONP interface, you will need to make some small changes to the way you call and process the Etsy API:

• The URI must end in .js
• An additional parameter, callback, must be specified
• Callback values may only contain the letters A-Z, the digits 0-9, periods ("."), underscores ("_") and square brackets ("[" and "]").
• Callback values must be shorter than 100 characters.

Here's an example of an API method, first called using the standard JSON interface, and then with the alternate JSONP interface:

To call this request, you would first define a JavaScript function getData() to process the response, and then insert a <script> tag to make the request, like so:

<script type="text/javascript">
function getData(data) {
      if (data.ok) {
            // do something with the data here
        } else {
            alert(data.error);
      }
}
</script>

<script src="https://openapi.etsy.com/v2/users/testusername.js?callback=getData&api_key=your_api_key"></script>

Notice that we need to explicitly check the value of data.ok before proceeding with the getData() function.  This is because the normal error handling rules of the Etsy API don't apply when using the JSONP interface.  Under JSONP, every API call results in a 200 OK regardless of its actual error state (this is because the <script> tag injection won't work with any other status code).  When they occur, errors will be reported as part of the result object using the following special fields:

Starting with version 1.2, the jQuery JavaScript framework includes native support for JSONP. Note that when using jQuery, it's not necessary to pick your own value for callback. jQuery recognizes the standard parameter name and will pick its own value and create a function to handle it. jQuery will also clean up the callback function after the call is finished.

jQuery Example Code