What is Ajax? Ajax components ?

What is Ajax?
Ajax is an approach or pattern to web development that uses client-side scripting to exchange data with a web server. This approach enables pages to be updated dynamically without causing a full page refresh to occur (the dream, we presume, of every web developer). As a result, the interaction between the user and the application is uninterrupted and remains continuous and fluid. Some consider this approach to be a technology rather than a pattern. Instead, it’s a combination of related technologies used together in a creative way.
Some credit remote scripting as the precursor to Ajax development. Prior to the XMLHttpRequest object, remote scripting allowed scripts running in a browser to exchange information with a server. For more about remote scripting, read http://en.wikipedia.org/wiki/Remote_Scripting.

Ajax components
the Ajax programming pattern consists of a set of existing technologies brought together in an imaginative way, resulting in a richer and more engaging user experience. The following are the main pillars of the Ajax programming pattern and the role they play in its model:

JavaScript—A scripting language that is commonly hosted in a browser to add interactivity to HTML pages. JavaScript is the most popular scripting language on the Web and is
supported by all major browsers. Ajax applications are built in JavaScript.

Document Object Model (DOM) —Defines the structure of a web page as a set of
programmable objects that can be accessed through JavaScript. In Ajax programming,
the DOM is leveraged to effectively redraw portions of the page.

Cascading Style Sheets (CSS)—Provides a way to define the visual appearance
of elements on a web page. CSS is used in Ajax applications to modify the exterior of the user interface interactively.

XMLHttpRequest—Allows a client-side script to perform an HTTP request. Ajax applications use the XMLHttpRequest object to perform asynchronous requests to the server as opposed to performing a full-page refresh or postback.


In an Ajax-enabled application, you can think of JavaScript as the glue that holds everything together. When data is needed, the XMLHttpRequest object is used to make a request to the server. When the data is returned, the DOM and CSS are leveraged to update the browser’s user interface dynamically. TIP You can find a collection of Ajax design patterns at
http://ajaxpatterns.org.

AJAX Form Validation learn step by step

1. Connect to the ajax database, and create a table named users with the following code:

CREATE TABLE users

(

user_id INT UNSIGNED NOT NULL AUTO_INCREMENT,

user_name VARCHAR(32) NOT NULL,

PRIMARY KEY (user_id)

);

2. Execute the following INSERT commands to populate your users table with some sample data (because user_id is an auto_increment column, its values will be generated by the database):

INSERT INTO users (user_name) VALUES ('bogdan');

INSERT INTO users (user_name) VALUES ('filip');

INSERT INTO users (user_name) VALUES ('mihai');

INSERT INTO users (user_name) VALUES ('emilian');

INSERT INTO users (user_name) VALUES ('paula');

INSERT INTO users (user_name) VALUES ('cristian');

3. In your ajax folder, create a new folder named validate.

4. Let's start writing the code with the presentation tier. Create a file named validate.css, and add the following code to it:

body

{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
}

label
{
float: left;
width: 150px;
font-weight: bold;
}
input, select
{
margin-bottom: 3px;
}
.button
{
font-size: 2em;
}
.left
{
margin-left: 150px;
}
.txtFormLegend
{
color: #777777;
font-weight: bold;
font-size: large;
}
.txtSmall
{
color: #999999;
font-size: smaller;
}
.hidden
{
display: none;
}
.error
{
display: block;
margin-left: 150px;
color: #ff0000;
}

Continue...

AJAX Form Validation
AJAX Form Validation - Learn step by step PART-2
AJAX Form Validation - Learn step by step PART-3
AJAX Form Validation - Learn step by step PART-4
AJAX Form Validation - Learn step by step PART-5
AJAX Form Validation - Learn step by step PART-6

XML in ACTION : AJAX Sample Program

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"> <head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>Ajax learners</title>
<script type="text/javascript" src="fetchxml.js"></script>
</head>
<body>
<h1>Ajax Technologies</h1>
<ul>
<li>
<a href="w3c.xml"
onclick="grabFile(this.href); return false;">W3C</a>
</li>
<li>
<a href="XML.xml"
onclick="grabFile(this.href); return false;">XML</a>
</li>
<li>
<a href="CSS.xml"
onclick="grabFile(this.href); return false;">CSS</a>
</li>
<li>
<a href="XMLHttpRequest.xml"
onclick="grabFile(this.href); return false;">XMLHttpRequest</a>
</li>
<li>
<a href="JavaScript.xml"
onclick="grabFile(this.href); return false;">JavaScript</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>


// JavaScript Document fetchxml.js
function getHTTPObject() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
}
}
}
return xhr;
}

function grabFile(file) {
var request = getHTTPObject();
if (request) {
request.onreadystatechange = function() {
parseResponse(request);
};
request.open("GET", file, true);
request.send(null);
}
}

function parseResponse(request) {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var data = request.responseXML;
var name = data.getElementsByTagName("name")[0].
firstChild.nodeValue;
var website = data.getElementsByTagName("website")[0].
firstChild.nodeValue;
var email = data.getElementsByTagName("email")[0].
firstChild.nodeValue;
var header = document.createElement("h2");
var mailto = document.createElement("a");
mailto.setAttribute("href","mailto:"+email);
var text = document.createTextNode(name);
mailto.appendChild(text);
header.appendChild(mailto);
var link = document.createElement("a");
link.setAttribute("href",website);
var linktext = document.createTextNode(website);
link.appendChild(linktext);
var details = document.getElementById("details");

while (details.hasChildNodes()) {
details.removeChild(details.lastChild);
}

details.appendChild(header);
details.appendChild(link);
}
}
}

XML introduction in AJAX

XML stands for eXtensible Markup Language.XML is nothing more than a text file containing a single well-formed XML document.

It is a general-purpose markup language that can be used to describe just about anything. XML differs from other markup languages like SGML and HTML. It’s a kind of metalanguage. The structure of an XML document must follow certain rules, but the vocabulary used within that structure isn’t tied to any dictionary of terms.

A tree data structure is built of nodes, with each node having only one node connected above it, called a parent node. The sole exception to this rule is the root node, which has no parent node. Nodes can also have other nodes connected below; these are called child nodes. In addition, nodes that are on the same level as the same parent node are called children. The following image is a graphical representation of a tree data structure.

An XML Document as Text

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<organization>

<employee><empid/><empname/></employee>

<employee> <empid/> <empname/> </employee>

<employee><empid/><empname/> </employee>

</organization>

XMLHttpRequest

What is XHR Stands for?

The XHR (XMLHttpRequest) object is the core of the Ajax engine. It is the object that enables a page to get data from (using the GET method) or post data to (using the POST method) the server as a background request, which means that it does not refresh the browser during this process. The XHR eliminates the need to wait on the server to respond with a new page for each request and allows users to continue to interact with the page while the requests are made in the background.
Aside from the background data processing, the GET and POST methods of the XHR object work the same as a standard HTTP request. Using either the POST or the GET method allows you to make a request for data from the server and receive a response in any standardized format. The most common formats in which to receive a response are XML, JSON (JavaScript Object Notation), and text. "The Response." POST is specifically useful when sending data that is larger than 512 bytes (an amount that the GET method cannot handle). After a response is received, the application can be populated with new data from the server by using the DOM with DHTML, which is a combination of XHTML, JavaScript, and CSS.

AJAX Introduction - AJAX, XMLHTTPRequest, XML

Ajax is an acronym for Asynchronous JavaScript and XML, and at its heart is the XMLHTTPRequest object, which is part of the XML DOM (Document Object Model).


The XML (Extensible Markup Language) Document Object Model defines a standard way for accessing and manipulating XML documents. The DOM enables JavaScript to completely access XML or XHTML documents by providing access to the elements which define the structure. The accessibility is possible through a set of intrinsic JavaScript objects that focus on DOM manipulation.It is required to parse the responses that we receive from the server side when we create an XMLHTTPRequest (XHR). As mentioned earlier, the XHR is the core of the Ajax model and without it the model would not exist. This is the piece of the Ajax puzzle that has created the recent buzz because it allows HTTP requests to be made to the server without refreshing the browser.


Ajax is a powerful collection of languages that, when brought together, create extremely intuitive user interfaces and client-side interactions. Although this is true, there are many developers who get so excited by the hype surrounding it that they simply throw the code into their applications without measuring the benefits of using it beforehand. Not every web application has a need for Ajax, but there are many parts of an application that can be enhanced by utilizing its benefits. You will learn usability patterns that will handle feedback, server-side form validation before we even submit the form, and Ajax-enabled components that can enhance sections of our web applications without overdoing it. Ajax is also great to use if you would like to make a server-side connection and possibly a database interaction without refreshing the browser. This is what makes Ajax so powerful because it allows us to interact with the server, receive HTTP status codes, save data to a database, and determine what to present to the user without ever refreshing the page. This request/response pattern can continually persist as a desktop application does, but Ajax-enabled web applications are, well, on the Webaccessible by anyone with a connection, without any downloads or shipping costs for delivering large fancy boxes. The Web is the new desktop, and we are on the verge of a major software shift that we can actively participate in as the pioneers of on-demand information.
Ajax can be a valuable connection between the interface and back-end logic, allowing the back end to be robust and powerful with a simple yet intuitive interface that provides on-demand feedback to users. It also provides ways to exchange data with server-side languages and store it in databases without disconnecting the user from the application like standard applications do when refreshing the browser window.you will have the information needed to create fully functional Ajax applications.