I would like to thank IMVU for their extensive use of Web APIs for data delivery. The use these in many of their web pages on the classic site and also in IMVU Next. They are used primarily to display data on the web page, but are also used in the IMVU client app as well.
So I would be remiss if I didn’t tell you what a “Web API” is. Alternatively, they are also called REST APIs or RESTful APIs. If you’re already familiar with Web APIs, you can skip this. The way web pages typically work, you type a URL in the address bar, or click a link, and the browser sends an HTTP request to the web server. The web server runs some server-side code (PHP, ASP.NET, Node.js, etc.) on the remote machine and constructs a response to send back. The response is in HTML format, and when your browser has received it, it will render the HTML visually as a web page, and loads all the images, styles, scripts and video after that.
A Web API is invoked by URL the same way, but instead of returning HTML, it returns JSON, which is a popular data format. JSON stands for JavaScript Object Notation, because it is literally JavaScript code that can be accessed instantly from the JavaScript code running on a web page. The important difference is that JSON doesn’t do any rendering or styling by itself. It is up to the front-end web designer to use the data to modify the web page with the new data using JavaScript.
Another difference between a Web API and a web page is that you normally don’t type the URL into the address bar or link to the URL on the page. Instead, you create an XmlHttpRequest object in JavaScript, and make the HTTP request in code. This request is asynchronous, so you have to decide what to do with the returned response via callback.
<html><body><div>Hello, <span id="your_name">Unknown</span></div>
<script type="text/javascript">
var xhr = new XmlHttpRequest();
var URL = 'http://url.to.my.webapi';
xhr.open('GET', URL);
xhr.onreadystatechange = function() { // what to do when response arrives
var DONE = 4; // all data has arrived
var OK = 200; // no errors
if (xhr.status == OK && xhr.readyState == DONE) {
var newObject = JSON.parse(xhr.responseText);
// use the properties of newObject to modify an HTML element on the page
document.getElementById('your_name').innerText = newObject.name; // assume there is a "name" property
}
};
xhr.send(null);
</script></body></html>
This code is a simple example of AJAX, using plain old JavaScript. Most people seem to shy away from plain old JS, though, and add-ons like jQuery, React, AngularJS, etc., have their own objects that encapsulate this AJAX in their own way, but under the hood, they are calling JS code like that shown above.
If you would like to take a quick peek at an IMVU Web API, you can check out this link: http://www.imvu.com/api/avatarcard.php?cid=143451586. Whenever you click an avatar picture and the “avatar card” pops up, this URL is requested via JavaScript. The IMVU page only has one avatar card that is usually hidden. The JSON data you get from that link is transmogrified into a JavaScript object with JSON.parse(), and the data in the avatar card is updated using the JSON returned from the server. For this API, “cid” refers to customer id. I’ll go into more detail about this specific API in a subsequent post, but for now, this should give you a flavor of the IMVU REST requests. From what I’ve seen, all the IMVU APIs are GET requests, although in other web applications, you can use POST, PUT and DELETE requests to modify data on the server. That’s a topic for another post.
