AJAX Tutorial - Web Hosting UK Forums | Linux Windows Dedicated Server and cPanel VPS Hosting Forum

MeTi · #1 (**permalink**) 09-11-2006, 06:09 PM

AJAX Tutorial [including the 2nd part]
Prologue: The thing that is AJAX

AJAX is one the those things which are re-invented only to find that this time they have become the biggest show-stealers and the hottest topics for forums, blogs and various sites. Basically, what is AJAX. AJAX as you may know, stands for Asynchronus JavaScript And XML. The fullform is useless because it is hardly close to the definition pertaining to which I've made this tutorial. AJAX, is a technology or a method which enables a web-page to contact the server from within the page without causing the browser to load any other page, reloading or any sort of redirection. By 'contact' the server I mean, to contact the server with params and in return get data.
Buying books on AJAX is useless. AJAX is not a topic so vast that it requires a book. There is a lot of filler-stuff filled in those books like "AJAX and bandwidth", "What AJAX can do", "What AJAX can't do". This is just an author's attempt to reach to the 'word-limit' for their works to be called 'books'. Out of it, 70% of the information everyone knows, and for the rest, no one wants to know that.
Prologue 2: Getting down to AJAX
So.. let's get down to some AJAX. AJAX consisits of two parts:
1. Server side
2. Client Side
Server Side is coded via php, asp, jsp etc. In this tutorial, we'll use php and MySQL. Client-side is obviously JavaScript. We will also be using a fair amount of xHTML as it is necessary for defining our pages.
The tools you need are:
1. A text-editor
2. A browser supporting XMLHttpRequest()
3. php and MySQL installed on your system + a webserver(recommended: Apache 2.xx)
4. Basic knowledge of: JavaScript, php, SQL and (x)HTML
There are two ways of scripting AJAX:
1. XMLHttpRequest()
2. iFrames
iFrames method is not reliable and an iFrame cannot be controlled once it is set to fetch a server side request. Hence, we will be using XMLHttpRequest(). The browsers supporting it are:
1. Internet Explorer 6+ (through ActiveX)
2. Opera 8+
3. Firefox 1.00+
There are other browsers, but I am not aware whether or not they support this method. Please check your browser if it supports XMLHttpRequest().
Chapter 1: The grounds of our app
Let's first start with a generic xHTML page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html" />
<title>My first AJAX page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>Now, let's create a script object for inserting the AJAX code. Here is the modified <head> section of our HMTL page:


<head>
<script type="text/javascript">
<!--
//Our code comes here
//-->
</script>
</head>Now, we come to the server-side. Here is the generic php code for outputting a simple string "AJAX was here":


<?php
printf("AJAX was here");

?>Now things are setup, we can go into AJAX.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

User Name		Remember Me?
Password