Ajax Data formats

Ajax is language agnostic on the server. It doesn’t matter what server-side language one use for business logic. However, when you are requesting data from the server, the data that’s sent from the server must be formatted in a way that the browser can understand. Server-side programming language needs to return data in one of following ways:

• HTML
  
• XML
• JSON
• Text
  

There are some other formats which we won't discuss.
I’m going to examine each data format so that you can make an informed decision as to
which one best suits different kind of applications. I will have sample for each one format.

The XMLHttpRequest Object

XMLHttpRequest

• A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript
• Make an HTTP request from a JavaScript event
• A call back JavaScript function is invoked at each state of the HTTP request and response

XMLHttpRequest Properties

• onreadystatechange - call back function for state changes
• readyState - the current state of the HTTP call
• responseText - the text result of the request
• responseXML - DOM xml object from the request
• status - HTTP status code of the response
• statusText - HTTP status text

XMLHttpRequest Example from sample #1:

var xmlHttpRequest;

function getXmlHttpRequestObject()
{
 if(window.ActivexObject)
 {
  return (new ActivexObject("Microsoft.XMLHTTP"));
 }
 else if( window.XMLHttpRequest)
 {
  return(new XMLHttpRequest());
 }
 else
 {
  return null; 
 }
}

function sendRequest() {
 xmlHttpRequest = getXmlHttpRequestObject();
 xmlHttpRequest.onreadystatechange = handleResponse;
 xmlHttpRequest.open("GET", "data_message.html", true);
 xmlHttpRequest.send(null);
}

function handleResponse() {
 if (xmlHttpRequest.readyState == 4) {
  alert(xmlHttpRequest.responseText);
 }
}

IE does it different

• The above example however won't work on IE
• new ActiveXOjbect("Microsoft.XMLHTTP");
• Native XMLHttpRequest support should be in IE7

Source :

• The XMLHttpObject on Apple site
• Wikipedia
  

Ajax 101 workshop

Excellent presentation I came across by Bill Scott of Yahoo. Very nice and basically goes over the concept in more graphical way with lots of code example and diagrams.

Kind of long and goes in YUI framework. But it is really nice presentation.

X in Ajax

Garrett coined the term Ajax (Asynchronous Java-Script and XML) to describe techniques used to build new kind of Web application.

While the first letters of these words map very neatly to the cool name, they aren’t very effective in describing the technologies in question.

The X for XML is particularly problematic. It implies that XML is a requirement for Ajax applications. This simply isn’t true. To be fair, the letters XML also appear in the word XMLHttpRequest (the core technology used in most Ajax implementations), but XMLHttpRequest doesn’t sound very cool.

The XMLHttpRequest object is an extension to JavaScript that allows Web pages to communicate with a server. It’s perfect for creating Ajax applications. The XMLHttpRequest object is the engine that drives Ajax, but it doesn’t exist in a vacuum.

XML, which stands for eXtensible Markup Language, is a format for describing data. Ajax applications require some kind of structured format to deliver information from the server to the client. But XML is just one option. As we’ll see later on as we explore more, there are other ways of structuring data that are equally viable for Ajax.

This is one of the important aspect to understand.

Ajax: Sample #1

Here is my first sample which I did mid last week, before my laptop crashed. It was and is a painful experience.

This is pretty simple example. I have three files. One html file which is this sample and other one which provides the data for this example and javascript file.

Let me know what you think about this one.

Ajax is not an acronym

I just wanted to re-iterate myself here again that Ajax is not a specific technology but a methodology, it's a way of working with set of technologies.

In the traditional web applications server pushes the entire web page after a user-initiation. In Ajax web applications apart of web page can be modified this increasing speed and usability of an application. Through the power of Ajax, the pages of your application can exchange small amounts of data with the server without going through a form submit.

Most client side technologies are as listed below:

• HTML or XHTML
• CSS
• DOM Scripting
• XMLHttpRequest

The XMLHttpRequest object is the glue that binds the server to the browser.

Here is excellent Diagram. I like diagrams they explain more than words.

1. The user generates an event, such as by clicking a button. This results in a JavaScript call.
2. An XMLHttpRequest object is created and configured with a request parameter that includes the ID of the component that generated the event and any value that the user might have entered.
3. The XMLHttpRequest object makes an asynchronous request to the web server. An object (such as a servlet or listener) receives the request, processes it, and stores any data in the request to the data store. In the case of Ajax-aware JavaServer Faces components, the object that processes the request is a PhaseListener object. We'll cover that more later in the document.
4. The object that processed the request returns an XML document containing any updates that need to go to the client.
5. The XMLHttpRequest object receives the XML data, processes it, and updates the HTML DOM representing the page with the new data.

The diagram and points are from this article

Ajax: A new Approach

For last two weeks or more I am been reading a lot about Ajax and its application. When I googled for term AJAX, I got around about 98,500,000 search result isn't that incredible. wow. That is huge number. The first link was from Wikipedia site. which has a very good explanation about ajax. So I started digging in google result set. The article which I found most impressed was on Adaptive path site, written by Jesse James Garrett.

Jesse explains the core deficiencies in the existing model of web application or web application prior to ajax. He also explains how windows application are more feature rich and very responsive to user. It is very important to understand this, in order to understand how new solutions can be developed to solve this problem. It was very important for me to understand that. This article points us to this very critical information.

Then author defines Ajax. How it isn't a technology, but collection of technologies.
The name is short hand for Asynchronous Javascript + XML.

Following diagram is very fundamental in understanding how tow model vary to each other.



Article goes in more detail about application time and interactions between client and server.

I like the closing paragraph, in which author talks about how technology is not the challenges, but to make us learn new way of doing things.

Introduction

This blog I will be maintaining to document my learning of Ajax and related technologies. I am doing this for my final project, but since I passionately excited towards Ajax, I see myself continuing with this blog even in future. Let see how that goes.

So we I will blog all the interesting things I find about Ajax which were goood learning experiences for me. The assumption here I am making is that all one needs to know is Html, xml and little bit of programming experience.