AJAX

 

                                          AJAX

 

                  Asynchronous Java script And XML

 

 

Ajax is revolution & we are all on board

                                                                    – vamshisomanchi

 

 

Basic understanding:

 

• AJAX it is not a new programming language, but a new way to use existing standards.

 

• With AJAX you can create better, faster, and more user-friendly web application.

 

• AJAX is based on Java Script and HTTP Requests.

 

 

Why only AJAX:

 

1. Speed and invisibility (ala smart client) makes for a very slick user experience.

 

1. The smaller server resources footprint helps server scalability (seriously!).

 

Am I confusing u Guys ?

 

K… let me make it very simple…..It is as simple as I wrote this document by copying here and there

 

AJAX is an existing form which was discovered and popularized by GOOGLE suggest.

 

With AJAX, your Java Script can communicate directly with the Server, using the Java Script XMLHttpRequest object. With this object, your Java Script can trade data with a web server, without reloading the page.

 

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

 

AJAX is a browser technology independent of web server software.

 

 

What are the Standards:

 

AJAX is based on the following web standards:

• Java Script
• XML
• HTML
• CSS

 

The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser.

 

Little more detailed

 

• Standards-Based Presentation

1. XHTML

2. CSS

 

• Dynamic Display and Interaction

1. Document Object Model

 

• Data Interchange and Manipulation

1.   XML and XSLT

 

• Asynchronous Invocation

1. XMLHttpRequest

 

• Java Script to Tie it All Together

 

 

ARCHITECTURE ?

 
Let me break this — we are after all technical right

 

 

Let me keep this figure in words

 

From a software architecture point of view, following are ways in which AJAX differs from today’s Web application architecture by adding a client-side engine:

 

• Use of a client-side engine as an intermediate between the User Interface (UI) and the server;
• User activity leads to program calls to the client-side engine instead of a page request to the server;

• XML data transfer between server and the client-side engine.

The client engine is the key to the AJAX model. Without this engine, every user event must go back to the server for processing. User interaction is tightly coupled with server communications—the client engine unlocks this dependency. This engine, while running inside a Web browser, gives the browser the “extra” intelligence to perform a “partial screen update” instead of a “full page refresh.” This engine also communicates with the server in the background, decoupling user interaction from server communications

let me eat your brain with figures…so that once one coding starts….u will be ready

Hope you got some idea…about AJAX…..

Simply saying…AJAX makes you and your system a bit lazy…..

AJAX Uses HTTP Requests

In traditional Java Script coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the “Submit” button to send/get the information, wait for the server to respond, then a new page will load with the results.

Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your Java Script communicates directly with the server, through the Java Script XMLHttpRequest object

With an HTTP request, a web page can make a request to, and get a response from a web server – without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

What is AJAX for ???

 

• Active Search

• validation

• Dynamic Forms

• Input Suggestions

• Panning Image Data

• Organizing and Navigating Data

• Parallel Activities

 

Considering that AJAX represents a Web application model that is defined by partial screen update and asynchronous communication, there are different technologies for building the AJAX client engine, of which Java Script, Java, and Flash are the most commonly used. Likewise, these three technologies are the most widely used in building AJAX applications.

 

Example:

 

<script type=”text/javascript”> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”); } catch (e) { try { xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”); } catch (e) { alert(”Your browser does not support AJAX!”); return false; } } } } </script> 

Example explained:

First create a variable xmlHttp to hold the XMLHttpRequest object.

Then try to create the object with XMLHttp=new XMLHttpRequest(). This is for the Firefox, Opera, and Safari browsers. If that fails, try xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”) which is for Internet Explorer 6.0+, if that also fails, try xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”) which is for Internet Explorer 5.5+

If none of the three methods work, the user has a very outdated browser, and he or she will get an alert stating that the browser doesn’t support AJAX.

Note: The browser-specific code above is long and quite complex. However, this is the code you can use every time you need to create an XMLHttpRequest object, so you can just copy and paste it whenever you need it. The code above is compatible with all the popular browsers: Internet Explorer, Opera, Firefox, and Safari.

Basic Properties:

The onreadystatechange Property

After a request to the server, we need a function that can receive the data that is returned by the server.

The onreadystatechange property stores the function that will process the response from a server. The following code defines an empty function and sets the onreadystatechange property at the same time:

xmlHttp.onreadystatechange=function() { // We are going to write some code here } The readyState Property

The readyState property holds the status of the server’s response. Each time the readyState changes, the onreadystatechange function will be executed.

Here are the possible values for the readyState property:

xmlHttp.onreadystatechange=function() { // We are going to write some code here }

Here are the possible values for the readyState property:

State	Description
0	The request is not initialized
1	The request has been set up
2	The request has been sent
3	The request is in process
4	The request is complete

We are going to add an If statement to the onreadystatechange function to test if our response is complete (this means that we can get our data):

xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Get the data from the server’s response } }

The responseText Property

The data sent back from the server can be retrieved with the responseText property.

xmlHttp.onreadystatechange=function()

{ if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } Its all over now… conclusion

AJAX represents a generic application model that would enable more interactive, more responsive, and smarter Web applications. AJAX is not tied to a particular programming language, data format, or network object and is defined by two core attributes: partial screen update and asynchronous communication. There are three approaches to build and deploy AJAX applications: DHTML/JavaScript (Asynchronous JavaScript + XML), Java (Asynchronous Java + XML), and Flash (Asynchronous ActionScript + SWF). Each approach has its strengthes and weaknesses; as such, customers should evaluate and choose carefully.