Accessing EVE Online API via JavaScript and jQuery

Preparation

Before we start you'll need two things: Your API Key and verification code. You can get both from https://community.eveonline.com/support/api-key/. Having a look at the API documentation won't hurt either: http://eveonline-third-party-documentation.readthedocs.org/en/latest/

The Markup

The markup will be bare bones - just a form to get the relevant data and a place holder which determines where the gathered data will be displayed:

<form id="api-data">
    <input id="keyID" type="text" placeholder="Key ID">
    <input id="vCode" type="text" placeholder="Verification Code">
    <button>Fetch Characters</button>
</form>
<div id="chars"></div>

The Script

This is where the magic happens. We will perform an ajax request, process the gathered data an display it.

The fetch_chars() function will gather the required data from the form, prepare the request and process the retrieved data. The request url consist of the base url and the data you actually want to retrieve. For a list of all request able data have a look at the documentation. This documentation contains all the information about the request we are going to make, including the required data we have to supply - in our case that will be the key ID and verification code, in some cases you'll need to add the character ID. You'll find information about the returned data too, which will always be an xml file. On success the function will process the retrieved data and add it to the list of character names.

// you probably want to make more than one request
var api_baseurl = "https://api.eveonline.com";
var api_keyID;
var api_vCode;

// load character data from api
function fetch_chars(){

    var placeholder = $("#chars");    // where to place all the gathered stuff

    api_keyID = $("#keyID").val();    // get the Key ID
    api_vCode = $("#vCode").val();    // get the Verification Code

    // ajax request
    $.ajax({

        url : api_baseurl + "/account/Characters.xml.aspx",    // we want character information
        crossDomain : true,                                    // yep - that's a cross domain request

        data : {                                            //  the api data 
            "keyID" : api_keyID,
            "vCode" : api_vCode
        },

        // what to do when something goes wrong
        error: function() {
            placeholder.text("Could not get character data - please check Key ID and Verification Code.");
        },

        // what to do if the request succeeded
        success:function
    });
}

Last but not least we have to bind the fetch_chars() to the button:

// on document ready
$(function(){
    $("#api-data button").click(function);
});

Going further

Now you'll (hopefully) have a basic understanding of how to access the API and retrieve data from it. To build your own applications you'll need to have a closer look at the documentation to find the bits and pieces you need and patch them together. The requests will follow the given process: query, retrieve data as xml and process it.

The full script is available at my Git Hub.

Have fun :)