Posts Tagged 'Ajax'

February 17, 2011

API Basics: REST

What is REST?
"Representational State Transfer," or REST, is a style of software architecture designed to relate different types of hypermedia to each other for distribution. The basic concept of REST is that a client application can request information from a server in the form of a representation of a resource without actually downloading an entirely new resource. This is how the World Wide Web works.

The World Wide Web
A browser is a client side application which requests information from a server; the server then accepts the request and transfers data back to the browser. The data transferred is not an application; it simply gives instructions to the client-side application (the browser), which then uses those instructions to properly display some information. Downloading information from a server changes the application state of the browser. The result of that change in state is a new website, which is therefore named the new state, so when new websites are downloaded by a browser, it is transferring representational data for a new application state.

How does REST relate to SoftLayer's API?
SoftLayer's API has many different avenues for implementation; one of these avenues is simple data transfer using the GET method in HTTP. Hyperlinks are one of the most basic examples of REST in action. When the user clicks on the hyperlink it requests information from the server and responds by transferring back representational data, in this case the data is expressed as either XML or JSON.

What are the disadvantages of using a REST API?
REST requests must contain all information, including authentication, within the URL. This can lead to security threats somewhere down the line. Luckily, SoftLayer allows you to add any number of users to your account, and then restrict their access to specific servers/services. This way your customers can utilize SoftLayer's API without a security risk to you or each other. They can even create their own users and further restrict access.

What are the advantages of using SoftLayer's REST API?
Direct client to server communication is the biggest advantage of using REST. The other protocols that SoftLayer uses to communicate data to the API require server-side scripting; this means that you will have to program your websites to use the host server as a proxy for calling SoftLayer functions. With REST you can directly link to the information that you want to display, using XLST or JavaScript to display it. You can also use AJAX with JSONP or script injection to dynamically update your webpage.

The REST archetype is the most natural API for HTTP. This sets it above others in that there are no secondary programs needed to interact with HTTP (like SOAP), which means less computing time and better performance. REST APIs also don't need to use a proxy server for remote procedure calls. This decreases server load and bandwidth usage and further increases website performance. SoftLayer's REST API is easy to implement, and with SoftLayer's tiered user system its security flaws can be eliminated. This is why I prefer SoftLayer's REST API over the others.

Basic REST function calls are detailed in the SoftLayer Development Network (SLDN) here.


January 19, 2011

AJAX Without XML HTTP Requests

What is AJAX?

Asynchronous JavaScript and XML - AJAX - is what you use to create truly dynamic websites. Ajax is the bridge between application and presentation layers, facilitating lightning fast, instant application of data from the end user to the host and back to the end user. It dynamically changes the data displayed on the page without disrupting the end user or bogging down the client. Although the name is misleading, it is used as a term for any process that can change the content of a web page without unnecessarily reloading other parts of the page.

What are XML HTTP requests?

Passing information from your server to your end user's browser is handled over HTTP in the form of HTML. The browser then takes that info and formats it in a way the end user can view it easily. What if we want to change some of the data in the HTML without loading a whole new HTML document? That's where XML comes in. Your web page needs to tell the browser to ask for the XML from the server; luckily, all browsers have a function called XmlHttpRequest(). Once it's called, it will poll the server for XML data.

Why shouldn't you use XML HTTP requests?

A long time ago, in a galaxy far, far away, Microsoft invented the XmlHttpRequest() object for Microsoft Exchange Server 2000. As with all first generation technologies, everyone wanted to use it, and some people implemented it differently. IE didn't even have native support until 2006, and there are still some discrepancies in various browsers when studying the OnReadyStateChange event listener. There is also an issue with cross-domain requests. When the internet was young, JavaScript hackers would steal users' identity by pulling information from secure websites and posting it to their own, stealing bank account numbers, credit cards, etc. Now that the internet has grown up a bit, people with large networks and many servers have found use for sending data across domains, but it's still not possible with XML HTTP requests.

What's an Alternative?

Using JavaScript, you can create client side scripts whose source is built with server side scripts, passing variables in the URL. Here's an example of a basic web page with local JavaScript, a few checkboxes for human interaction, and a table with some information that we want to change. View source on the page below to see the outline.

Looking at the three JavaScript functions, the first (clearTags) automatically clears out the checkboxes on load, the second (check(box)) makes sure that only one box is checked at a time, the third (createScript) is the interesting one; it uses the createElement() function to create an external JavaScript, the source of which is written in PHP. I have provided a sample script below to explain what I mean. First, we get the variable from the URL using the $_GET super global. Then, we process the variable with a switch, but you might use this opportunity to grab info from a database or other program. Finally, we print code which the browser will translate to JavaScript and execute.

//First we get the variable from the URL
//Here's the switch to process the variable
switch ($foo){
case 'foo' : print "var E=document.getElementById('data'); E.innerHTML='bar'; "; break;
case 'fooo' : print "var E=document.getElementById('data'); E.innerHTML='barr'; "; break;
case 'ffoo' : print "var E=document.getElementById('data'); E.innerHTML='baar'; "; break;
case 'ffooo' : print "var E=document.getElementById('data'); E.innerHTML='baarr'; "; break;
default : print "var E=document.getElementById('data');
E.innerHTML='unknown'; ";


Subscribe to ajax