Ajax's Tutorial

Wednesday, September 17, 2008

AJAX Introduction

AJAX stands for Asynchronous JavaScript And XML.

What You Should Already Know

Before you continue you should have a basic understanding of the following:

HTML / XHTML
JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

AJAX = Asynchronous JavaScript and XML

AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

AJAX is a browser technology independent of web server software.

AJAX is Based on Web Standards

AJAX is based on the following web standards:

JavaScript
XML
HTML
CSS

The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent.

AJAX is About Better Internet Applications

Web applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop.

However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications.

With AJAX, Internet applications can be made richer and more user-friendly.

You Can Start Using AJAX Today

There is nothing new to learn.

AJAX is based on existing standards. These standards have been used by most developers for several years.

Readmore..........

From : http://www.w3schools.com/Ajax/ajax_intro.asp

AJAX Uses HTTP Requests

In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the "Submit" button to send/get the information, wait for the server to respond, then a new page will load with the results.

Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object

With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

The XMLHttpRequest Object

By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded!

AJAX was made popular in 2005 by Google (with Google Suggest).

Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.

The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.

Readmore.........

From : http://www.w3schools.com/Ajax/ajax_httprequest.asp

JavaScript Form Validator number two

JavaScript Form Validator

This is an updated and improved version of AJAX Generic Form Parser

Our updated JavaScript code is smaller, prettier :) and more powerful (just).

That’s nice, but what does it do?
Well it validates your form stupid!! as with most (if not all?) posts on this website, the script is simple, easy to follow and not jam packed with to many features. Basically this script will look for required fields (which you specify in your form.. I’ll come to this later) and if a required field is empty, it will through up a JavaScript alert box telling the user (and prevent the form from being submitted).

Before I present to you the Code Example, I’ll explain a little about how to configure your form and make certain fields required.
For simplicity, I’ve chosen to make use of the fields ‘Title’ tag. This is where you make fields required.

For example: Readmore.........

Note: The script will support the following form field types:

Text
Textarea
Password
Select

Just to recap. To make any of the supported fields required, just add title=”required”!

Triggering the form to call the JavaScript Validation Script:
In order for the form to call the JavaScript and check all the required fields, we need to prevent the form from submitting. In order to achieve this, we will use the onSubmit event on the form tag. Example:

Readmore.........

We must use return before the function call, this tells to form ‘do not submit the form unless the function returns true’.

The JavaScript form Validator Script

Readmore.........

From : http://www.ajaxtutorial.net/index.php/2007/01/17/javascript-form-validator-number-two/

ExtJS JavaScript Framework

Ext JS, the JavaScript framework with Ajax and UI Components

Ext JS is a JavaScript Library/Framework which works in conjunction with Prototype, YahooUI and jQuery. It’s probably the most exciting toolkit available for building web 2.0 websites right now. It’s jam packed with features, and is designed to make life much easier for building great UI in JavaScript.

I’ll not dig to deep right now, I suggest you check out the example and demos first to see what you think.

Below is a the script used to grab XML data via Ajax and populate a grid (sortable table like object):

Readmore.......

from : http://www.ajaxtutorial.net/index.php/2007/04/30/extjs-javascript-framework/

Simple Ajax Functions - Snippets

Basic Ajax Functions
I’ve created a list of very common JavaScript functions for Ajax. They have been created in quick reference fashion and do not contain any fancy stuff. Instead of creating one function which can handle various tasks depending on passed values, they are split into seperate basic task functions. The reason for this is simplicity.

Anyway - here they are. I’ll post the function and give a basic outline of what it does.

This first function is the real important one - it’s the one which creates the object for making the Ajax connection.

Here is the function which sends the request to the server script. This version creats the connection with TEXT and uses the POST method.

Here is the function which sends the request to the server script. This version creats the connection with TEXT and uses the GET method.

Here is the function which sends the request to the server script. This version creats the connection with XML and uses the POST method.

Here is the function which sends the request to the server script. This version creats the connection with XML and uses the GET method.

Now here is the function which retrieves the response from the server script. This version receives the response as TEXT (http.responseText).

Now here is the function which retrieves the response from the server script. This version receives the response as XML (http.responseXML).

This little function can be used to delay the call - handy for forms where you use onKeyUp or onKeyPress to trigger submit action.

Readmore.............
From : http://www.ajaxtutorial.net/index.php/2006/03/08/simple-ajax-functions-snippets/

AJAX generic form parser

AJAX Generic Form Parser - With Validation:

In this tutorial I’ll show you a simple method to pass any HTML form through AJAX without the need to hard code all form fields into the JavaScript or Server Side Script. Using this simple piece of JavaScript you can reuse it as is with any form, saving a lot of time. I’ve even added basic validation to certain form element types (which would be expected).

Okay, straight to the main JS code. (readmore....)

The JavaScript code above is split into 4 functions, here is an overview of what each function does.

createXMLHttpRequest() - This is the function which will establish the AJAX connection object, this is called as soon as the JS file is loaded.

sendRequest() - This function is the one which is called when the form is submitted. This function requires (passed in) the ‘Form Object’ and the ‘File Name’ of the script which will receive the form data. When this function has been called, it takes the form object and passes it to the JS function getForm() which in turn parses the whole form extracting all the data. sendRequest() then takes the open AJAX connection and passes all the data to the PHP file form processing. Finally when the request from the PHP server script is returned, it writes out the reply to an element on the screen with the div ID ‘results’.

getForm() - This is the magic, this function reads through the whole form and extracts the field data before returning it back to sendRequest(). It handles radio, text, password, textarea, select and checkbox field types. It even looks for validation requests on text, password and textarea fields (which is enabled by using title=”required” in the form element).

Simple :)

Readmore...........

From : http://www.ajaxtutorial.net/index.php/2006/07/07/ajax-generic-form-parser/

Simple Ajax using Prototype. Part 2

Ajax Updater - Update a DOM element ID from a Server Script

This example is probably the simplest example you will ever find.
We are going to use the prototype feature ‘ajax.Updater’ (see part one for more details on prototype).

ajax.Updater allows you to specify an element ID and script URL - and whatever the script URL prints will appear in your element ID. Simple as that.

The example below simply returns the Server time each time the button is clicked.

I’m not going to explain this bit by bit as it is just so easy to grasp.

Remember, you will need the prototype library in order to use this!

Readmore......

From : http://www.ajaxtutorial.net/index.php/2006/11/30/simple-ajax-using-prototype-part-2/