Blogs

Set Up JQuery to Interact with the Smart Publish API

by User Not Found | Feb 06, 2012

What did we ever do before JQuery came about?  Back in the day, when we wanted to use AJAX to interact with services from the browser using javascript, we had to detect which browser was being used and use the appropriate objects to call the services. We then had to write browser specific code to update the UI since there were subtle differences in how to perform DOM manipulations in code.  Thanks to JQuery, all of those nuances have been abstracted and we can let the library take care of those subtleties. Here are some tips in getting JQuery to work for you when you want to call our Smart Publish API (SPA) services.  

At this point you should be signed up for our services and have set up an application through our Partner Workspace. Each application will have it's own APIKey which you will need to interact with our services.  The APIkey is passed in the header of each call to the SPA Services. Without this header, the service will return a "403 Forbidden" http code. 

JQuery makes it easy to set up default values for all ajax interactions by using the $.ajaxSetup function and we'll take advantage of that to make sure the APIKey is added to all calls.  In this example, we'll create a javascript function that  sets the request header value for Authorization and then in the $(document).ready function, we'll set the default ajax values. Don't forget to replace YOURAPIKEYHERE with the APIKey that you get from the Application Management Partner Workspace page (you'll need to be logged in to access that page). 

 

function AddAuthHeaders(xhr, settings) {

    xhr.setRequestHeader('Authorization', 'apikey=YOURAPIKEYHERE');
     //perform any other header updates you need here

}
 
$(document).ready(function () {
    //set default values for all of the service calls
    $.ajaxSetup({
        contentType: "application/json",
        dataType: "json",
        beforeSend: AddAuthHeaders
    });
}

 

Alright, we've gotten that authorization header out of the way, now we need to tell JQuery that it's ok to make cross origin scripting requests since the services are not hosted at the same URL as the web site.  Some browsers throw errors and some don't (Internet Explorer will complain with a "No Transport" error if you don't do this), so we can generally handle this by adding the following in the $(document).ready function:

 

jQuery.support.cors = true;

 

One last bit of housekeeping to take care of and that's to make sure the protocol of your AJAX requests are the same as the containing web page.  Usually what I do is keep a global javascript variable that contains the root of the RESTful requests including whether they should be called through http or https. I'll usually define the value in the $(document).ready by getting the window.location.protocol value and appending it to a constant for the service root URI. The SPA API requires all calls coming in to be through https, so at the point you're making the SPA calls, your page should be at an https URL.  Putting it all together, the $(document).ready function looks like this:

 

//defined up here so that they have global scope
var apiKey = "YOURAPIKEYHERE";
var serviceRootURI = "preview.webservices.fujifilmesys.com/spa/v2/"; //test URI
 
function AddAuthHeaders(xhr, settings) {
    xhr.setRequestHeader('Authorization', 'apikey=' + apiKey);
    //do any other header adds here
}
 
$(document).ready(function () {
    //set default values for all of the service calls
    $.ajaxSetup({
        contentType: "application/json",
        dataType: "json",
        beforeSend: AddAuthHeaders
    });
 
    jQuery.support.cors = true;
    serviceRootURI = window.location.protocol + "//" + serviceRootURI;
 
    //setup is complete, do other stuff now :)
});

With this code in the JQuery $(document).ready function and the AddAuthHeaders helper function, we're ready to start making calls to the Smart Publish API. The next blog entry will look at the use of our JQuery library for interacting with the individual services. Until then, feel free to leave us a comment to let me know what you think!

10 comments

Leave a comment
  1. Olivia king | Nov 12, 2019
    A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great work energy comparsion site
  2. sam | Aug 23, 2019
    I am all that much satisfied with the substance you have specified. I needed to thank you for this awesome article.  voyance gratuite en ligne
  3. sam | Aug 21, 2019
    This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. trademark watch services
  4. sam | Aug 16, 2019
    I truly value this superb post that you have accommodated us. I guarantee this would be helpful for a large portion of the general population. 파워볼사다리
  5. sam | Jul 25, 2019
    wow, great, I was wondering how to cure acne naturally. and found your site by google, learned a lot, now i’m a bit clear. I’ve bookmark your site and also add rss. keep us updated. 프로미 먹튀
  6. Olivia | Jul 17, 2019
    Thank you! This is what I need to find. I'd love to know more updates from you hotmail com login
  7. Amaer | May 17, 2019
    https://terrariaapkmod.com/
  8. Amarde | May 17, 2019

    Thanks for sharing with us

    <a href="https://terrariaapkmod.com/">terraria apk</a>

     

  9. Terraria apk | May 17, 2019

    Very informative thanks for sharing with us

    <a href="https://terrariaapkmod.com/">terraria apk</a>

  10. Allen E. Harrington | Mar 06, 2019

    Thanks For Share Information.

    terraria apk

    Leave a comment