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

0 Comments

Read More »

AJAX at work - Sample program demonstrating AJAX

//Select this following code, paste in dreamweaver or any text editor.
// save them in any web server root directory. I saved in wwwroot of
// Inetpub. execute the program using "http" protocol for instance //"http://localhost/ajaxprograms/Index.html" .

//Index.html

<html>
<head>
<title> Ajax at work <⁄title>

<script language = "javascript">
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.send(null);
}
}
<⁄script>
<⁄head>

<body>

<h1> Fetching data with Ajax <⁄h1>

<form<
<input type = "button" value = "Display Message"
onclick = "getData('data.txt', 'targetDiv')">
<⁄form>

<div id="targetDiv">
<p>The fetched data will go here.<⁄p>
<⁄div>

<⁄body>
<⁄html>

//data.txt
This text was fetched using Ajax.

Let us revise some key points about AJAX step by step:

The XMLHttpRequest object is the heart and soul of Ajax. Its methods and properties drive the asynchronous requests that make Ajax applications feel so responsive.

In this sample AJAX program, we’ve seen how to use the XMLHttpRequest object in three steps:

1. Create an instance of the object that will work across different browser implementations.
2. Prepare a request using the onreadystatechange event handler, the open method, and the send method.
3. Process the response from the server through the properties readyState, status, responseText, and sometimes responseXML.

This basic model will remain unchanged for all the AJAX programs.

0 Comments

Read More »

instantiating an instance of XMLHttpRequest using javascript's try…catch

If Old version browsers (Internet Explorer 5 for Mac) doesn’t support ActiveX object for Ajax
The getHTTPObject function throws an error in that browser.

JavaScript has a useful control structure for situations like this called the
try...catch statement.It looks at the user-agent string of the browser and check
its name and version number. This is called browser sniffing. We can use you can use object detection to test only for the existence of ActiveX, not for a particular type of ActiveX object.
Using try…catch block statement, we can execute the code, if it doesn’t work, you can catch the error. The error won’t be displayed in the browser.

if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
}
}

The try block contains the attempt to assign an instance of the ActiveX
object to the variable xhr. If that doesn’t work, the catch block sets the
value to false.
The try...catch statement can be used to refine the getHTTPObject function
even further. Later versions of Internet Explorer can use a newer ActiveX
object to handle Ajax. Using a series of try...catch statements, you can
attempt to use the newest version and, if that fails, fall back to the older way:

if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
}
}
}

The finished function look like this:


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;
}

After handling exception, we are instantiating an instance of XMLHttpRequest. Once we’ve created an object with getHTTPObject, its methods and properties will be the same regardless of whether it’s native or an ActiveX object.

0 Comments

Read More »

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.

0 Comments

Read More »