Wednesday, July 28, 2010

AJAX And Table, Forms Example

AJAX:

AJAX stands for Asynchronous JavaScript And XML.

AJAX is a type of programming made popular in 2005 by Google (with Google Suggest).

AJAX 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 applications.

AJAX is based on JavaScript and HTTP requests.

The keystone of AJAX is the XMLHttpRequest object.

Different browsers use different methods to create the XMLHttpRequest object.

Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.

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:
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

Example

function createRequestObject()
{
var request_o;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_o = new XMLHttpRequest();
}
return request_o;
}

var http = createRequestObject();
function getTypeVal(a)
{
document.getElementById('subtype_name_before').style.display="block";
document.getElementById('subtype_name_after').style.display="none";
http.open('get', 'index2.php?option=com_helpdesk&func=HDDepartmentRelatedType&departmentid='+a.value);
http.onreadystatechange = handleType;
http.send(null);
}

function handleType()
{
if(http.readyState == 4)
{
var response = http.responseText;
document.getElementById('type_name_before').style.display="none";
document.getElementById('type_name_after').style.display="block";
document.getElementById('type_name_after').innerHTML = response;
}
}

Ajax Table Grid (ajax_table_grid) example (zip file) on mail.yahoo.com(manojavasthimca)

No comments:

Post a Comment