I hate JavaScript (…there I said it!) but with the implementation of Ajax, I’ve had to put in some effort into understanding it somewhat. After much studying up - or rather copy and paste errors - on Ajax and some clever google searches, I finally completed a long awaited project. A simple booking engine / sans shopping cart that’s easy to use and to my surprise, quite easy to code The following tutorial requires that you have-working knowledge of PHP and MySQL, the Ajax won’t be of much importance since we’re only going to use simple XMLHttpRequests which will allow for the dynamic controls.

From this tutorial, you should be able to quickly build simple web applications, or expand the code into something larger. So let’s begin:

The User Interface (UI)
Remember to always keep your UI’s simple, it’s the most important part of your web application. You want to invite users to use your application not scare them off with gadgets and dohickies. Simple is always the way to go. So let’s first design a basic form for our users to interact with:

That’s it for the form, you can add more elements to it later, for now and to ease up on my typing time, we’ll settle for the above.

<form method=”get”>

<label for=”item”>item</label>
<select name=”item_id” id=”item_id>
<option value=”1″>item 1</option>
<option value=”2″>item 2</option>
<option value=”3″>item 3</option>
<option value=”4″>item 4</option>
</select>

<label for=”checkIn”>check in</label>
<input type=”text” name=”checkIn” id=”checkIn” />

<label for=”checkOut”>check out</label>
<input type=”text” name=”checkOut” id=”checkOut” />

<label for=”adults”>adults</label>
<input type=”text” name=”adults” id=”adults” />

<label for=”button”> </label>
<input type=”button” name=”book_button” id=”book_button” onclick=”javascript:createAction();” />

</form>

Of course you can pretty it up with your own CSS styles, there are so many css tutorials out there, so not going to waste your time in writing up something fancy for you. You can see my css via the working demo for this engine by clicking here.

The next thing we want to do is create a space for our itinerary, what you will need is a simple <div> tag with a unique id. We’ll call it “itinerary” for the purpose of this tutorial.

<div id=”itinerary”>
</div>

Great! Now that we have our form and page completed, it’s time to set up our Ajax and Javascript.

Create an XML connection based on your browser. The following function is widely used in tutorials throughout the www, it basically creates the ajax connection based on the users browser: ActiveXObject for MSIE or XMLHttpRequest for FireFox and Opera.


function createXMLHttpRequest() {
var xmlhttp;
if(window.XMLHttpRequest) {
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
xmlhttp = false;
}
} else if(window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlhttp = false;
}
}
return xmlhttp;
}


Now let’s utilize our function and make the connection:

var req = createXMLHttpRequest();

Our next javascript function makes the connection to a PHP script on the server. The PHP script does most of the work for your application and we’ll get to that real soon.

This function does exactly what it says, using the above connection assigned to the variable “req” we can now connect directly to our PHP script.


function sndReq(action) {
req.open('get', 'phpreqpage.php?action='+action);
req.onreadystatechange = handleResponse;
req.send(null);
}


Here we use the open connection “req” and request the page “phpreqpage.php” while passing the variables held in “action” via a form get method.

When the connection has been made, we pass the response from our PHP script back to our browser. (Ajax at work…) We then pass this response off to another function which handles the returned values from our PHP script.


function handleResponse() {
if(req.readyState == 4){
var response = req.responseText;
document.getElementById('itinerary').innerHTML = response;
}
}


This function checks if the process was completed and our returned data to our div tag “itinerary” we created earlier. Sounds pretty easy doesn’t it? These three functions are the main functions you’ll need to handle most any simple Ajax application, in fact - with just these three functions, and some simple PHP code, we already have a very basic Ajax application - but Basic is so boring!!!


function createAction() {
var vars = document.getElementById('item_id').value+'|'+
document.getElementById('checkIn').value+'|'+
document.getElementById('checkOut').value+'|'+
document.getElementById('count').value;
sndReq(vars);
}


I’m so lazy when it comes to JavaScript, so I wrote this quick function above that will pull the information from our form, when completed and send it off to our sndReq function we made earlier. (remember the +Action?) well here’s our Action variable in one simple JavaScript function. Click here for the code to the above script.

We’ll come back to our JavaScript above later, to add in more functions later. For now, let’s hit our PHP script and get something going.

The PHP Script

<?php
debug($_REQUEST);
function debug($array) {
echo "<pre>\n";
print_r($array);
echo "</pre>\n";
}
?>