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 :)
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}