Thursday, January 19, 2012

AJAX (Asynchronous JavaScript and XML)


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

AJAX is use for partial page updating.

Ajax is a catchy name for a type of programming made popular in 2005 by Google and other big web developers. Ajax loosely stands for Asynchronous JavaScript and XML, but that just sounds like techno jargon to many people.

AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

When JavaScript was released, people loved all the cool things you could do with the web browser to make a more user-friendly experience. You could do form validation, quirky popup messages, make cool web tools and more. However, JavaScript had no way of sending information between the web browser and the web server.

If you wanted to get any information from a database on the server, or send user information to a server-side script like PHP, you had to make an HTML form to GET or POST data to the server. The user would then have to click "Submit", wait for the server to respond, then a new page would load with the results. I'm sure we have all gotten slightly annoyed when having to wait for especially slow websites!

Ajax attempts to remedy this problem by letting your JavaScript communicate directly with the server, using a special JavaScript object XMLHttpRequest. With this object, your JavaScript can get information from the server without having to load a new page!

XMLHttpRequest - The XMLHttpRequest object is used to exchange data with a server.
XHTML - A rigid subset of html which is used to mark-up and style the information.
DOM - The Document Object Model which can be accessed by the client browsers.
XML - The format used to transfer the data from the server to the client.

GET or POST?
GET is simpler and faster than POST, and can be used in most cases.

However, always use POST requests when:

A cached file is not an option (update a file or database on the server).
Sending a large amount of data to the server (POST has no size limitations).
Sending user input (which can contain unknown characters), POST is more robust and secure than GET.

$.ajax({
    url: '/Controller/GetData/',
    success: function(data){
        lineitems = data;
    }
});
// post data to server
$.ajax({
    url: '/Controller/SaveData/',
    data: { incoming: lineitems }
});


Thanks,
Anil

No comments: