Using the AJAX Model
What is AJAX?
A new technique?

Wikipedia defines the term AJAX as Asynchronous JavaScript And XML, I actually think Asynchronous JavaScript Across XML is slightly sexier but really it is just a buzzword for tools are a technique that can be used to better the web experience. Lets take a detailed look at the terms Ajax defines.

Asynchronous - This is probably the most powerful implication of the AJAX model. That is to say AJAX enables the client to thread out multiple processes and requests for parallel processing of data, thereby upping your efficiency of your application

JavaScript - Hopefully if your here you understand that JavaScript to be the established standards compliant language of the web.

Across XML - The last piece of the puzzle is really a data storage format. The web is basically a flat place and XML is an attempt to give that flat data meaning and structure to the clients that interact with it.
A Collection of tools

So when you get down to it, AJAX is a technique, but more recently it has been able to define itself a little further due to the introduction a of a few specific programming tools mad available. Most specifically these include the XMLHttpRequest, DOM, and JavaScript and we'll we cover the use and interaction of these tools specifically later in the lecture.
History of interaction on the web

The surprising thing to most is that AJAX is really not a new thing. Developers have long been using tricks to asynchronously make requests. Javascript across XML is mostly a new technique but the achieved results are essentially the same. If you have ever created a framed site where frames have interacted with each other via javascript you have at a very basic level accomplished a form of AJAX.
Using javascript for application development

Most teams take on AJAX as a technique for large scale projects, that is to say - web software. Before getting involved it is important to think critically about the architecture and framework that your javascript will provide for you. Because javascript is a scripted rather than compiled language the enforcement of standards is much harder, and as such poor code is often propagated.
---

Understanding the toolkit.
Javascript and Document Object Model(DOM)

Hopefully you already have a rudimentary understanding of what javascript is and the some sort of working knowledge of the DOM. In essence they are the language and tools that allow web developers to interact with the browser. There are many resources available on the web on the subject, I'd particularly recommend Mozilla and the W3C. Unfortunately the time allotted for this course is not sufficient to cover this subject in depth. We'll work specifically with the DOM in later examples.
XMLHttpRequest

This is the object to get excited about. In reality it has spawned the technology that is now considered "AJAX". So what makes it so special?

First of all it's the first real asynchronous tool in the javascripters toolbox. Previously asynchronous attempts had to be accomplished via hidden elements and requests. All of sudden the ability to go off and ask for data has been conveniently packaged up for us. Because it was written to work so specifically with scripting it has really enabled the response side of the data retrieval to be custom per application and easily configurable. Often overlooked is the fact that it is readily documented which was never been the case when trying to thread request through hidden frames or some other old school sorcery.

So now we have a great tool to thread data requests with. We'll get more into the specifics of this tool later in this lecture.
XML and Serialized Data

Now that we have a good way to retrieve the data we need a good way to "flatten" it. Largely speaking the data behind the web can be traced back to relational databases. It's what makes the data effective to get at and creates efficiencies. So in many cases the data must be flattened into some schema your application can understand. Really this is where standards end, and intuition is free to optimize.

In essence there are two emerging schools of thought on how to implement "serialized data". The first school of thought is that the resulting serialization should be rich and stringent. That is to say elements should be strictly typed and defined against a standard. In fact the W3C has defined and released such a standard called XML. The other school of thought is that data serialization should be customized and optimized to suit the applications needs. Usually this is done for performance gains. Well cover this subject more in depth later.

The other school of thought is that data serialization should be customized and optimized to suit the applications needs. Usually this is done for performance gains. Well cover this subject more in depth later.
---
When to use ajax?
Value through interaction

Before you go off rebuilding your entire site to keep up with the latest trend be wary of what your needs really are. With all the buzz talk about web 2.0 and weblications it can be easy to get lost in the hype. Really only a handful of applications are leveraging the tools effectively and those are those are the ones that will ultimately drive the technology.

So what's out there that's some real deal ajax software? The term is really so loose that a lot could be argued but I really think google maps and gmail are pretty trend setting. Both cases epitomize value through interaction, that is to say the data the use is interested must be prompted by the user somehow.
Offscreen buffering

When you get down to it what is really going on with AJAX applications? Ultimately the answer can be summarized as "offscreen buffering". What I mean by that is after the web page appears loaded and the user is now able interact with the page, more processing and "thinning" can be done for on the server. This can be used to effectively manage satellite photo retrieval or complex data extraction. If you have a particularly expensive (in terms of CPU time) process to perform why not thread that off on the server? That's ultimately what we have gained through the power of "AJAX".
Managing a connection
XMLHttpRequest

As mentioned the XMLHttpRequest object really enables us to make convenient asynchronous requests. We'll cover some of the details of this object and alternatives that also exists. I'll provide some code examples here but really a more flushed set of examples will be covered in part 2 of this class.
Creating the object

First thing first create the object. There are few ways to declare this for different browsers. For now we'll assume your using firefox.

			var http = new XMLHttpRequest();

Processing Results

Before we even make the request we'll want to assign a "handler" to process the result of the request when it's done. This is done by setting the "onreadystatechange" property of the object to a function reference. So building on our example.

			function handleResult(){
				//execute on http return
			}
			var http = new XMLHttpRequest();
			http.onreadystatechange = handleResult;

Opening Connections

Once we have assigned a handler we can begin opening connections. There are three parameters to this function. The method ("GET/POST"), the URI of the request, and finally a boolean asynchronous flag. What this means is that it is important to set this to true so that the script will continue executing after the send is called and any server slowness will not slow down your application. It also means we'll need to check the status of our request on our handler. Once the connection is open typically the request is sent directly after it.

			http.open("GET","retrieveData.asp",true);
			http.send();

Connection Alternatives

XMLHttpRequest clearly shines as a asynchronous data requesting tool. If you must, there are ways to accomplish the requests, most popularly with hidden iframes. I have seen some pretty cool wrappers that basically degrade the normal XMLHttpRequest capabilities to equivalents through an iframe. It gets far more advanced and confusing from here on in so this subject is really worth touching on.
Notes about asynchronous requests and your browsers connection limit

One last thing to consider is that your browser does have an inherent connection limit. Also your servers are also probably configured with a limit. It's really hard to put absolutes around these and I just feel like I'd be disproved so I am not going to give any numbers. Careful debugging is the best way to make sure your requests are happening asynchronously.

---

Extracting and Serializing Data
Extensible Markup Language

As mentioned earlier there are two schools of though on serialization. Quick and dirty, or rich and strict. The cool thing is XML is not only strict but it's extensible! What does that mean? You make up it as you go along. So basically XML by itself is pretty cool, but actually fairly loose in terms of standards. It's really about standards built on top of standard in this case. Check out RSS and SOAP. These are particular flavors of XML that really attempt to strictly define the architecture but remain flexible. What's the point? Well in theory you can take one piece of the puzzle, say the wsdl file, and you can generate the rest of the application from that. It's actually a reality on some levels but kind of hard to pull off in full.
Custom Serialization

In many cases small and rich is best. Fancy encoding and serialization methods can reduce your message to almost nothing. Use loose all the sleek maintainability and self-documentation of the markup, but you gain huge in speed.
XML and the DOM

For the purpose of this course we'll be concentrating on data serialized in XML. This is handy not only for the defined structure it provides, but that structure also interacts conveniently with the tools we have to work with.

---

Interacting with the page
Appending data to the DOM

I'll take a second to talk about whats considered to be the propper way to append data to your page once you have received it and parsed it for your needs. Really the methods that you'll want to be utilizing most are appendChild and createElement of the document object. A really good read about this is over at slayer office. A most basic insertion to a page would be accomplished as so.

			var div = document.createElement("div");
			var text = document.createTextNode("Hello World");			
			div.appendChild(text);
			document.body.appendChild(div);

DHTML and transition effects

Cool stuff can be accomplished through the use of transition effects, but in reality it is not AJAX. Accomplishing animation trough javascript is very possible but difficult and advanced. Some libraries do exist and we'll talk a little about them in our toolkits discussion.
The BACK Button

So you build this great AJAX gallery, the user clicks on an image, then hits his back button and is taken back to slashdot! What do you do? It's true AJAX can definitely create some annoying user interactions especially around the back button, sending links and bookmarking. I have found the use of anchors and updating the document.location.href to be the best alternative around this.
Analyzing the work flow
Page load -> data interaction

So what should you really expect to see once you have created an AJAX application? Hopefully what you'll see is a rich capable application that originally loads without data. By completely separating the data from the client you are able to serve up a highly cached application that then stages the interaction to your data.
Tamper data and other tools

A lot of the interactions I am talking about often happen pretty quick. They happen really quick if you're on a LAN with your server or your development box IS your server. Because of that it can be difficult to monitor whats going on. One extension in particular has proven to be one of my favorites - tamper data. This and a few others gives you visibility into how each request is made and how long it takes. It is invaluable for this type of development.

Frameworks and Toolkits
Packages Solutions

There are a lot of emerging players in the game of web portals and web software suites. There are also some great open source toolkits for javascript. When using licensed libraries it's important to consider exactly how custom your needs are. The more custom the less likely a toolkit, framework, or portal will work for you is. Of course javascript can always be modified since it is inherently open source. I really like the new YUI by yahoo and prototype.js has got a small following.
Google

As mentioned I am pretty impressed by the work google is doing in the AJAX realm. They really are in a position to change software over the web. Clearly there vision is to push the realm of real software, like email and word processing out via the web and it looks like they have the bandwidth and capital to do it. They use all the tricks in the book and do a good job at trying to obfuscate their software.

---