|
AJAX
Ajax, shorthand for Asynchronous JavaScript and XML, is a web development
technique for creating interactive web applications. 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.
The Ajax technique uses a combination of:
XHTML (or HTML) and CSS, for marking up and styling information.
The DOM accessed with a client-side scripting language, especially
ECMAScript implementations such as JavaScript and JScript, to dynamically
display and interact with the information presented.
The XMLHttpRequest object to exchange data asynchronously with the web
server. In some Ajax frameworks and in certain situations, an IFrame
object is used instead of the XMLHttpRequest object to exchange data with
the web server.
XML is sometimes used as the format for transferring data between the
server and client, although any format will work, including preformatted
HTML, plain text, JSON and even EBML.
Like DHTML, LAMP and SPA, Ajax is not a technology in itself, but a term
that refers to the use of a group of technologies together.
A simple script
function deleterow(id) {
if (confirm('Are you sure you want to delete row number ' + id + '?')) {
// Set up the request
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'mycheck.php', true);
// The callback function
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) { // implies the request is sucessfull
if (xmlhttp.status == 200) {
var response_stat = xmlhttp.responseXML.getElementsByTagName('deleted')[0].firstChild.data;
if (response_stat == 1) {
alert('Deleted row successfully.');
} else {
alert('Failed to delete row: ' +
xmlhttp.responseXML.getElementsByTagName('error')[0].firstChild.data +
'.');
}
}
}
}
// Send the POST request
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send('row=' + id);
}
}
|
