Ajax – Asynchronous JavaScript and XML

AJAX is no programming or script language, no new invention and no separate Web service, module or plug-in. It is a group of inter-related technologies like javascript, dom, xml, html, css etc. It is an algorithm with ‘old’ technologies similar to the Dynamic Html.  Ajax is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh

Ajax allows building server connections in the background while a user is interacting with a Web front-end. These connections can be created asynchronously, that the user need not wait until the server replies. AJAX concedes you to send only important information to the server not the entire page, so only valuable data from the client side is routed to the server side. It makes your application interactive and faster

ajax_1Features of AJAX

The attractive feature of AJAX is it make web page faster, it allows it load the particular part of the website not the whole page.

ajax_2

  • It make web page faster.
  • Independent of server technology.
  • Increase the Performance of web page.
  • No need to pushing on a submit button and reloading the complete website.
  • No need to reload the whole page only some part of page is reloaded which is required to reload.
  • Apart from obtaining the XMLHTTP object, all processing is same for all browser types, because JavaScript is used.
  • Using AJAX develop faster and more interactive web applications.
  • Not require to completely reload page due to this server use less bandwidth.

Technology Related to AJAX

  • HTML is used to build Web forms and identify fields for use in the rest of your application.
  • JavaScript code is the core code running Ajax applications and it helps facilitate communication with server applications.
  • DHTML, or Dynamic HTML, helps you update your forms dynamically. You’ll use div, span, and other dynamic HTML elements to mark up your HTML.
  • DOM, the Document Object Model, will be used (through JavaScript code) to work with both the structure of your HTML and (in some cases) XML returned from the server.
  • Asynchronous data retrieval using XMLHttpRequest.
  • Data interchange and manipulation using XML and XSLT.

Ideas with AJAX

  • Dynamically update the page without enforcing the user to click Update and wait for the server to resend the entire page.
  • Increase site performance by reducing the amount of data downloaded from the server
  • Eliminate page refreshes every time there is user input
  • Edit table data directly in place, without requiring the user to navigate to a new page to edit the data.

Working of AJAX

The XMLHttpRequest object is a JavaScript object which handles all our server communications

 <script language=”javascript” type=”text/javascript”>
var xmlHttp = new XMLHttpRequest();
</script>

Ajax imperatively brings JavaScript technology and the XMLHttpRequest object between your Web form and the server. When users fill out forms, that data is sent to some JavaScript code and sends a request to the server. In other words, the JavaScript code sends the request behind the scenes; the user doesn’t even grasp that the request is being made.

Then, the server sends data back to your JavaScript code which decides what to do with that data. It can update form fields on the fly, giving that immediate feeling to your application — users are getting new data without their form being submitted or refreshed. The JavaScript code could even get the data, perform some calculations, and send another request, all without user intervention! This is the power of XMLHttpRequest.

ajax_4

Adding in some Javascript

  • Get form data: JavaScript code makes it simple to pull data out of your HTML form and send it to the server.
  • Change values on the form
  • Parse HTML and XML

Finishing off with the DOM 

DOM (Document Object Model) in JavaScript technology is easy, and is mostly intuitive. When you start to send XML back and forth between your JavaScript code and the server and really change the HTML form, you’ll dig back into DOM.

Benefits of AJAX

ajax_3

  • Callbacks:Ajax is used to implement a callback, making a quick round trip to and from the server to retrieve and/or save data without posting the entire page back to the server.
  • Making Asynchronous Calls: Ajax allows you to make asynchronous calls to a web server
  • User-Friendly: Because a page postback is being eliminated, Ajax enabled applications will always be more responsive, faster and more user-friendly.
  • Increased Speed:The main purpose of Ajax is to improve the speed, performance and usability of a web application

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy This Password *

* Type Or Paste Password Here *

20,252 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>