JavaScript/AJAX Programming

Calling Luminate Online APIs in JavaScript

You can use native JavaScript XMLHttpRequest (XHR) or the AJAX methods provided by JavaScript frameworks such as jQuery, YUI, or Dojo to call Luminate Online API methods.

Luminate Online APIs support the W3C Cross-Origin Resource Sharing (CORS) specification for client-side cross-origin requests. You must add the domain of each authorized website to the JavaScript/Flash Allowed Domains white list on your Luminate Online site in order to enable cross-origin requests from pages hosted on those sites:

  1. From the Setup menu, select Site Options.
  2. Click the Open API Configuration tab.
  3. Next to "Configure Javascript/Flash access to Open APIs" click the Edit Javascript/Flash configuration link.
  4. Under 1. Allow JavaScript/Flash API from these domains enter the list of domains you will allow to host cross-origin requests.
Note: Note: With support for CORS, the JavaScript API Library located in the the /api directory on your website has been deprecated. You should not use this library for new development.

JavaScript Examples

The following is a basic API call made using the native JavaScript XMLHttpRequest object:


var 	uri = "https://secure2.convio.net/MY-ORG/site/CRConsAPI",
	postdata = "method=listUserFields&v=1.0&api_key=MY-API-KEY";

function makeXhrRequest () {
   xhr = new XMLHttpRequest();
   xhr.open('POST', uri, true);
   xhr.onreadystatechange=function() {
     if (xhr.readyState == 4) {
        console.log(xhr.status);
        console.log(xhr.responseText);
     }
   };
   xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   xhr.send(postdata);
}

Using the jQuery framework, the same API call looks like this:


var 	uri = "https://secure2.convio.net/MY-ORG/site/CRConsAPI",
	postdata = "method=listUserFields&v=1.0&api_key=MY-API-KEY";

function makeJqueryRequest() {
  $.post(uri, postdata, function(data, textStatus, jqxhr){
     console.log(data);
     console.log(textStatus);
     console.log(jqxhr);
  });
}

This is the same API call using the YUI framework:


var 	uri = "https://secure2.convio.net/MY-ORG/site/CRConsAPI",
	postdata = "method=listUserFields&v=1.0&api_key=MY-API-KEY";

function makeYuiRequest() {
   YAHOO.util.Connect.asyncRequest(
      'POST',
      uri,
      {
         success : function(o) {
            console.log(o.responseText);
	    },
         failure : function(o) {
            console.log(o.responseText);
	    },
         args : {}
      },
      postdata );
}

Finally, here is the same API call using the Dojo framework:


var 	uri = "https://secure2.convio.net/MY-ORG/site/CRConsAPI",
	postdata = "method=listUserFields&v=1.0&api_key=MY-API-KEY";

function makeDojoRequest() {
   dojo.xhrPost({
      url: uri,
      postData: postdata, //consider content: or form: instead of postData:
      load: function(response) {
         console.log(response);
      }
   });
}

These examples demonstrate basic communication with Luminate Online API methods through various JavaScript frameworks. You should refer to the reference documentation of whichever framework you choose for additional examples and information on parsing response data, handling errors, and serializing form data using the framework.

Comments

Submitted by Ronnie at 09:25 AM on September 29, 2015
Why would you want to make your api key public?

Leave a Comment

Nickname
Comment
Enter this word: