[Nathan]

AJAX (Asynchronous Javascript and XML) is widely defined as retrieving server data and updating a portion of a page using Javascript. Although the results are impressive, it's really quite simple to implement. This tutorial is meant to be a very basic implementation, where the MD5 of the user's input will be retrieved and directly outputted without any manipulation.

Prerequisites:
- Knowledge of HTML
- At least basic knowledge of Javascript
- Server-side coding knowledge, PHP, ASP, etc..

Step 1 - HTML
In this tutorial we are going to setup a div with an id of ajaxout, to display the retrieved MD5. The script will update the contents of ajaxout using innerHTML.

<div id="ajaxout"></div>

We are also going to need a form, which will allow the user to submit their information.

<form name="ajax" onsubmit="sndReq(document.ajax.str.value); return false;">
<input name="str" type="text" /><input type="button" value="Retrieve MD5" onclick="sndReq(document.ajax.str.value); return false;" />
</form>

Step 2 - Javascript Setup
The XMLHttpRequest object will be used to retrieve the page with the required information. IE will use MS's ActiveX object.

function requestObj() {
	var reqObj;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
		reqObj = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		reqObj = new XMLHttpRequest();
	}
	return reqObj;
}

var http = requestObj();

Next, a function must be created to use the newly created object and retrieve the desired page. I added a loading message.

function sndReq(action) {
	document.getElementById("ajaxout").innerHTML = "Loading...";
	http.open('get', 'md5.php?str='+action, true);
	http.onreadystatechange = handleResponse;
	http.send(null);
}

The following code is executed when the http object's state changes. It checks for a readystate of 4 (request complete), and the ajaxout div is updated with the response.

function handleResponse() {
	if(http.readyState == 4){
		var response = http.responseText;
		document.getElementById("ajaxout").innerHTML = response;
	}
}

Step 3 - Server-side Setup
The file we are retrieving in the previous step was called md5.php. For the purpose of this tutorial, the script simply outputs the MD5 hash of the input string:

<?php
echo md5($_GET['str']);
?>

And that's really all there is to it!
Here it is, all put together: AJAX Basics Tutorial Example

Copyright 2008 Nathan LaPierre. For publication only on NovaTechForums.com.

[Matt W]

Wow...Very nice, I need to start learning AJAX but your next project is to go from MD5 to text ; )

[alsblog]

Very nice tutorial there thanks Nathan.

[pecky]

You said IEs activex, does that mean it will not work for systems like linux or mozilla?

EDIT:

Never mind, i didnt understand what you said..

_

Very good tutorial - is there a way to change the time of the loading message, so it lasts like 2 secs

[ventriloquist]

This is a must needed for me.you make me a jump start for my ajax world.thanks a bunch nathan.

[Jonathan Lau]

Ajax is rather simple actually. Have been using it for quite some time already.

@Ramp8ge: theres no way to convert md5 to text. MD5 is a checksum, and thus is non-reversible. Those you see out there are huge databases of md5->text.

@pecky: its javascript, and thus, cross browser compatable. why would you want to delay 2 seconds before showing your message? you can use settimeout

Nevertheless, its a good article for those who have never tried ajax before.

This post has been edited by Jonathan Lau: 23 November 2008 - 03:52 PM

[ventriloquist]

Oh is MD5 is one way encyption?
what about RC5,RSA,SHA are they also one way encryption?

[Zarel]

ventriloquist, on Nov 23 2008, 06:59 PM, said:

Oh is MD5 is one way encyption?
what about RC5,RSA,SHA are they also one way encryption?

MD5 and SHA are hashes, so yes, one-way encryption. The others aren't. RSA is a public-key cryptography algorithm, and RC5 is a normal block cipher.

[Jonathan Lau]

Isnt it kind of obvious that MD5 cant be reversed.
How could it be possible if i could make a 1gb file into a 32byte string and reverse it.

Think of it this way, the possible combinations of MD5 is limited, meaning that there could be different text with same hashes.
People have already found some.

[SaadBoy]

very good tutorial thanks brother

[uzi.boy]

Sweet, finally found a good example I was looking for, thanks Nathan.

[pratish7]

Thanks Nathan for this tutorial. This is a very useful simple tutorial for ajax. Since AJAX works with javascript, if javascript is disabled in a browser then this AJAX also won't work. I heard that using AJAX enabled forms and other thing in a very busy website will really slow down your server, is this true?

[pecky]

Thought i might like to ask a question here- how do I determine if the end user does not have AJAX support on their browser? Ie - psp, ipod etc

[Nathan]

If the browser doesn't fully support JS it should fall back to <noscript> tags.

You could also use the user agent of the browser to match against a list of non-supported browsers. PHP Ex:

<?php
if (strstr($_SERVER['HTTP_USER_AGENT'], "PlayStation Portable")) {
 somecode();
}
?>