AJAX and REST

The combination of JavaScript and the platform's REST APIs lets you build a lot of power into a page that displays on a client-side browser.

About AJAX

AJAX is the name given to a set of JavaScript functions that let you connect to a server, get back data, and parse the data into something usable. It originally stood for "Asynchronous JavaScript and XML", but it can also use the JSON format for data interchange.

In fact, an arbitrary string can be passed to or from the server. It's just a matter of having a functions that can deal with the data in the string. The two most popular formats by far, however, are XML and JSON. The platform understands both, so you can choose the flavor you prefer.

Perhaps the best summary of AJAX comes from the w3c.schools tutorial:

"AJAX is the art of exchanging data with a server, and updating parts of a web page, without reloading the whole page."

Note: When you create a Page in the platform, you are creating a JSP page. You can embed Java code in that page, and use it to directly interact with the platform. Or you can use AJAX and the REST APIs, whichever is easiest.

Learn more:

• AJAX Tutorial: http://www.w3schools.com/ajax/

Basic AJAX Syntax

In this syntax description, xmlhttp is the communications object. You'll learn how to make one in the example that follows. For now, the focus is on the methods you use to interact with it.

xmlhttp.open(method, resource_url, async);
xmlhttp.send();                   // GET or DELETE
xmlhttp.send("request data");     // POST or PUT

where:

• method is GET, POST, PUT, or DELETE
• resource_url is the resource you are accessing
• async is a boolean.

• If true, you put processing code into an onreadystatechange function, and the page continues displaying itself while the request is being processed. Whenever the response from the server is received, it is integrated into the page. (That is the preferred way to do things.)
• If false, you put processing code after the send() statement. (You don't need a function, but the page may appear to hang while it is being rendered, so this procedure is not recommended.)

Considerations

• Most often, you'll want to make asynchronous requests. They're slightly harder to write, because you have to add the onreadystatechange function. But the page won't hang while waiting for the server to respond.
• The platform's REST APIs return XML, by default. To get back JSON data, you append "?alt=JSON" to the URL.
• When a resource that responds to a GET request takes additional data, the data is included by appending a query string to the URL, in order to Specify Query Parameters.
• Platform GET (read), PUT (update), and DELETE requests return 200 on success.
• Platform POST (create) requests return 201 on success.

Tip: In Firefox, the Firebug plugin makes it possible to debug JavaScript. You can set breakpoints, see the content of variables, and review the structure of the internal DOM after elements have been dynamically added.

POST/PUT Syntax

When there is too much data to send using Query Parameters, a REST API will require you to send the data in a POST request (to add something new) or in a PUT request (to update something existing). You'll specify add a request header that tells the platform what form the data is in:

xmlhttp.open(method,resource_url,async);
xmlhttp.setRequestHeader("Content-type","application/xml");  // or "application/json"
xmlhttp.send("request data");