|
AJAX - Cross-Platform, Cross-Browser technology.
You've probably heard all the Ajax hype by now. Lets have a brief understanding about this new hype.
Suppose a user fills out a form to add data to a database table. Without Ajax, the validity of data in the form is not checked until the form is submitted. With Ajax, the data added to the form can be dynamically validated as the data is added to form fields using business logic in a server application. Thus, a complete form does not have to be posted to the server to check if data in the form is valid.
AJAX - an acronym for Asynchronous JavaScript And XML is a development technique for creating interactive web applications. It uses JavaScript to send and receive data between a web browser and a web server. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability.
AJAX is a web browser technology independent of web server software - Cross-Platform, Cross-Browser technology. It uses a combination of JavaScript, XML, HTML, CSS etc etc.... Ajax is not a technology in itself, but a term that refers to the use of a group of technologies together.
- Asynchronous: This means that when you send a request, you wait for the response to come back, but are free to do other things while you wait. The response probably won’t come back immediately, so you set up a function that will wait for it to be sent by the server, and react to it once that happens.
- JavaScript: JavaScript is used to make a request to the server. Once the server returns the response, you will generally use some more JavaScript to modify the current page’s document object model in some way to show the user that the submission went through successfully.
- XML The data that you receive back from the server will often be packaged up as a snippet of XML, so that it can be easily processed with JavaScript. This data can be anything you want, and as long as you want.
There’s nothing really new about what is happening here. We’re requesting a file (which will often be a server-side script, coded in something like PHP), and receiving a page as the response.This is how the web works already — the only difference is that now we can make these requests from JavaScript.
A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user. Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be fewer users friendly. With AJAX, web applications can send and retrieve data without reloading the whole web page. Sending HTTP Requests to the server does this, and by modifying only parts of the web page using JavaScript. The preferred way to communicate with the server is by sending data as XML (but other methods can be used).
An Ajax application in its simplest form is essentially a standard HTML user interface with Javascript functions to interact with an HTTP server that can generate XML dynamically. Any dynamic Web technology ranging from CGI to servlets—including JSF can serve as a server-side Ajax technology.
The key elements of a core Ajax application are: - An HTML page that contains:
- UI elements that interact with Ajax Javascript functions
- Javascript Functions that interact with Ajax server
- A server-side Web technology that can process HTTP requests and respond in XML markup.
How the Ajax Javascript code can be invoked?
We have an HTML user interface with elements such as an input field, a button or anything that can be linked to Javascript. In addition to responding to user interface interactions , Ajax Javascript functions they can operate independently on their own timers.
Ex: <input type="text" id="searchField"
size="20" onkeyup="lookup('searchField');">
Javascript code that can issue an XML HTTP request:
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = newActiveXObject("Microsoft.XMLHTTP");
}
Ajax is possible because of the leading browsers now offering objects that can make independent XML HTTP requests. Internet Explorer 5 and later offer an XMLHTTP object while Mozilla based browsers provide an XMLHttpRequest object. This code first checks to see if the browser supports either of the supported XMLHTTP objects and then instantiates one.
Server connection is initialized using the open method.
req.open("GET", url, true);After initializing a connection using open, the onreadystatechange call is made. This registers a callback function, which will be invoked once the request is complete:
req.onreadystatechange = processXMLResponse;
The function processXMLResponse( ), which processes the XML response, is invoked when the request is fulfilled.
req.onreadystatechange = processXMLResponse() { // process request }; Once the XMLHTTP request object (req) has been fully initialized, initiating a call to the server can be done using send( ):
req.send(null);
Processing the XML response is done using standard Javascript DOM methods
Ajax server-side component can send over HTML content directly to the client. JavaScript can then retrieve the HTML content by using the req.responseText method/property, which simply retrieves the content as a string. The HTML string text can then be used in whatever fashion to alter the page.
All XHR requests are still processed by typical server side frameworks, such as the standard options like J2EE, .NET and PHP.
... contd ...
Ref: Oracle.com
|
 Published by |
|
|
Regular Member (100+)
Join Date: May 2006
Posts: 225
Rep Power: 5
|
|
Article Tools |
|
|
Latest articles |
|
|
|
|
|
30-08-2006, 10:33 PM
Linear Mode
