Note: The is a rewrite from an earlier post (originally published Mar 8 , 2006). The original post has been replaced with this one.

Ever since the phrase “Web 2.0″ and AJAX (Asynchronous JavaScript and XML), Webmaster have looked for ways to make websites more dynamic. was created back in 2006 to help provide some useful information making websites a little more dynamic.

AJAX was originally coined to describe transmitting XML data using JavaScript. However, the same term has also been used when describing transmitting non-xml data with JavaScript. In fact, most times the data send and received using JavaScript will be HTML or JSON (i.e. not XML). In this post we will NOT be using XML either.

One of the most common active feature a website is the contact form. I’m going to show you how to create a contact form using AJAX (without XML).

The complete AJAX contact form example will consist of four files. Below’s a brief description of these files.

  • ajaxform.htm – The main HTML form code
  • ajaxform.js – The main JavaScript file which will send the form data to the PHP script (ajaxform.php) for processing
  • ajaxform.php – The PHP file which will take the submitted form data, email it and return a thank you message to the form.
  • ajaxsettings.php – This is the file to configure the form

Here is a screen capture of how the form will appear (this is an image, not a function form!).

File: ajaxform.htm

File: ajaxform.js

File: ajaxform.php

File: ajaxsettings.php

After you’ve had a chance to look through the above code, you should notice how things hang together.
Here’s a brief description of how it works.

[will update this soon]

Leave a Reply