We are going to discuss the design behind the Web. There is one and it's very rarely mentioned in books on web development. This relates very closely to the new trend in web development which is AJAX. We'll discuss AJAX is and how it relates to REST. We'll also briefly discuss a simple data transfer format called JSON and a system of standardized HTML classes called Microformats.

REST (Representational State Transfer) is the architectural style behind the Hypertext Transfer Protocol. It's the understanding of how the protocol was designed to be used, as presented by the designer, Roy Fielding. He introduced the term in his doctoral dissertation. This understanding is critical if you want to do your job right as a Web developer.

I heard a great quote at the Open Source Convention up in Portland this year: "Understand one layer of abstraction below the one you’re working in."

Web developers must have a solid understanding of Hypertext Transfer Protocol, not just the stuff that goes over the top of it.  Can you answer the question, "How do I properly I name my web pages?" or, "What’s the difference between the Hypertext Transfer Protocol methods, GET, PUT, POST, and DELETE and how do I use them?"  When we’re done with this presentation, you’ll be able to answer these questions better.  There is a "right" way to do this. You won't read about it in most books on web development but I hope that changes in the future.

When you deal with web pages, the way to think of it is that you're dealing with "representations of resources".  A resource is only a concept, such as a person (represented by their information in an address book) or a performance by a local band (represented by a poster on a bulletin board).  So you're transferring the current state of these resources around, and modifying their state.  That’s essentially what’s meant by "Representational State Transfer".

As we've seen, a resource is a noun - a person, place, thing, or idea. We identify them on the Web with http://server.com/something - a resource indicator.

We view or modify these resources with the different methods in the protocol.

There are other methods as well. We won't cover them here.

GET must not change anything in the state of the resource. It's "safe".  It is designed to be "idempotent", meaning you can repeat it endless numbers of times and always get the same results. 

Google released their Google Web Accelerator - a proxy service which grabbed all the links on a web page and cached them. www.37signals.com did not make their web site with Idempotent GETs.  Some of those links used GET to deleting records from databases on the server. Imagine explainging that to your boss!

When you GET a web page from a web server, the response headers include a a result code. Typically it’s 200 meaning the server was able to fulfill the request for you.

If you send a POST method in your request, the response includes a 201 response, meaning the server created the resource you requested.

There are also result codes, such as the ubiquitous 404, indicating things didn’t go well.

It used to be that a person submitted a web form and got an entire new page back.  This is like old-time "batch processing"; submit your pile of punched cards and get back a big printout some time tomorrow afternoon.  That is, the browser POST'd the form data to the server. The server dealt with the form data then redirected the client to a new page.  This is Hypertext Transfer Protocol under the browser’s control.

Now, a user can click a button and javascript turns the form into a data format (such as XML or JSON) and sends it to a server.  Content is received back from the server and some portion of the current page is updated accordingly. Have you been to Google and had it suggest things you are looking for as you type?  It is sending keystrokes to the server periodically and getting suggestions back, virtually in real-time, and you can keep typing while it does this.  This is Hypertext Transfer Protocol under Javascript’s control. AJAX gives web developers more control over the Hypertext Transfer Protocol.

AJAX gives users a more interactive experience.

AJAX stands for stands for "Asynchronous Javascript and XML", which is not terribly accurate. The transfer can be done synchronously and XML is not required. A better way to understand it might be "Javascript Controlled Data Transfer".

Asynchronous means things can be done in non-sequential order. More than one can be going at the same time. Synchronous means, "in order". One has to finish before the next one starts.

Javascript does the work. A paradigm shift is occuring here as Javascript is becoming the application, not just a way of doing special effects.

Javascript uses an XMLHTTPRequest object to control the HTTP data transfers. Microsoft invented XMLHTTPRequest in 1999.

XHR can only transfer data to and from the web server that the Javascript came from.

You can not access local files with Javascript, therefore, you can't upload files to the server using XHR. Must be done the old way.

You don't have to do anything to the infrastructure to make use of it.  It uses existing Hypertext Transfer Protocol so it uses existing Hypertext Transfer Protocol security, caching, cookies, etc.  With AJAX the Hypertext Transfer Protocol is under Javascript’s control rather than the browser’s.

Data is transferred to the server and back.  AJAX implies XML for this.  There are good tools to handle and parse XML in virtually all server-side programming languages and in Javascript.  However, parsing XML can be somewhat tedious (just ask your computer) and it’s overkill for most data transfer.

Another new thing based in mature technology is known as microformats.  Microformats are just that, small chunks of formatting, which make it easier to share information with others.

"Microformats are a way to enable "smart scraping" of web pages, so that you can create tools and scripts that losslessly extract machine-readable information from cleanly-formatted, human-readable HTML."

How do you bookmark your place in an application when the page never changes URI or keep a history so that the Back button works?

How does a blind person deal with this new paradigm?  Their browsers don’t do Javascript.

What about search engines?

"Graceful degradation" now means working in two different paradigms.  In the "old days" of web development we had to keep more than one version of a web site because of browser incompatibilities, but they were in the same paradigm.  Now we have to have an interactive version and a batch-oriented version, essentially.  The AJAX libraries help with this but it’s not pretty.