1. Make XMLHttpRequest Object

This is the most important thing. It is what AJAX is all about, it is the object that fetches stuff for you to display on your web pages. Without it (and well along with the user having JavaScript enabled) basic AJAX is not possible. I know there are “workarounds” that might give the impression of AJAX but I am just talking about straight-up AJAX. Anyways, the XMLHttpRequest object is important, so it is understandable it must work on every browser. I hope I didn’t lose you. This is how we do it.

var req = null; // XMLHttpRequest Object 

var init = function() {
   try { // firefox, safari, ie7
   req = new XMLHttpRequest(); }catch(e) {
   try { // later ie
   req = new ActiveXObject('MSXML2.XMLHTTP');}catch(e) {
   try { //early ie
   req = new ActiveXObject('Microsoft.XMLHTTP');} catch(e) {
   return false;}}}
   return req;
}

So what did we do here? If you look past all the ‘try’ you notice that we try to declare the ‘req’ object as whatever form of XMLHttpRequest is available depending on your browser. In older versions of Internet Explorer AJAX occurs in the form of ActiveXObjects. This explains most of the clutter in the preceding code.

2. Open The XMLHttpRequest

So you made the object now you need to tell it what to fetch. For this we use the open method of the XMLHttpRequest object which takes three parameters: method (get or post); url, and whether our request is asynchronous or not. What asynchronous means is allowing to happen at different times.

Additionally you have to execute the ‘send’ method of the request object passing a null value. The ‘send’ method ships our request to the server, the value it takes is used for POST requests which is why we pass null this time. This is what it looks like.

req.open('GET', 'index.php?call=Marco', true);
req.send(null);

For simplicity’s sake in our example we are going to use the form’s ‘GET’ method to request text from the server as opposed to XML. Using the form’s ‘POST’ method is a little more difficult and requires additional code. I will later explain how that is done in another post.

Another thing you might want to know is that some browsers might try to cache the response you received from the server. So no matter how different the response you are expecting is, it returns the same one always. To avoid this you might want to try append the time the request was made to your ‘URL’ string as so.

var time = new Date();
req.open('GET', 'index.php?call=Marco&time=' + time.getTime(), true);
req.send(null);

Note

Also please note that AJAX will only work within the server that made the request so make sure the ‘url’ value you pass is a local one. Cross server AJAX requests are not readily possible for security reasons but can be allowed through additional server configuration.

3. Check For The Request’s State Change

Now the next few steps might get a tiny bit complicated. I will try extra hard to simplify them.
First we want to try to monitor the ‘onreadystatechange’ event of the XMLHttpRequest. The ‘onreadystatechange’ event tells us when there is a change of state in our request as the name already suggests. So we are going to listen in by making an event handler for it.

req.onreadystatechange = function() {
     ...
}

However the ‘onreadystatechange’ event handler itself won’t really tell us anything. The reason being that there are four states the request can move around from which won’t necessarily hold the data we want. They are listed below. For our purposes we only care about state #4 which means our data is ready for our viewing.

• Uninitialized (0)
• Loading (1)
• Loaded (2)
• Interactive (3)
• Completed (4)

So in order to check when our state is at 4, we create a simple conditional statement within our event listener.

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        ...
    }
}

But again we need more since it is not enough for us to know when AJAX has something to show us. The reason is that it might have encountered an error and we wouldn’t want to show that to the users right? So now we must check to see if everything worked out right and that there were no server errors or anything of the sort. There are two ways to do this. One is to make sure our request’s status (req.status) is greater than or equal to 200 and that it is also less than or equal to 299. Together with the rest of our state change code it would look like this.

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        if (req.status >= 200 && req.status <= 299) {
            ...
        }
    }
}

A more simple alternative to the last step we did is to check if the 'statusText' property of our request simply returned 'OK'. For the sake of our Ajax In A Nutshell post name we will stick with the alternative. This is what that looks like.

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        if(req.statusText == 'OK') {
            ...
        }
    }
}

Now wasn't that a lot easier?

4. Retrieve Your Data

Finally we grab our much awaited data which will be stored in our request's 'responseText' property. I suggest you structure your main function to accept a handler function for the data. This handler function would then either further process the data and or place it on the HTML document for viewing. In our example we are going to be passing our data to another function (our handler function) which will display it on a div in our HTML document. Below is what the passing of our data to the 'handler' function will look like along with our state change code from before.

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        if(req.statusText == 'OK') {
            dataHandler(req.responseText);
        }
    }
}

So there it is. Getting your data from the server wasn't that hard. Hopefully you are not like me and actually get it on the first few reads.

Sample Please?

I have built a sample page and script that uses this code to submit a form to the server. The form will just submit the hidden value "Marco". The server will then respond "Polo" which will be displayed on a DIV below the button.

You can see the sample demo here: http://www.quinterox.com/public/ajax_sample/
You can download the sample files here: ajax_sample (25)

Removing Indexes

Options -Indexes

Adding Indexes

Options +Indexes

As simple as that! Here is the link I found that might come in pretty handy.
http://www.hostingmanual.net/other/htfun.shtml

document.forms['myForm'].onsubmit = function() {
       // Your code
}

Or

document.forms[0].onsubmit = function() {
       // Your code
}

Though I do not have the whole .htaccess thing down yet. I have found some code that simply works. As always I post it for myself as well as anyone who needs it.


<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>


Connecting to the database

Step 1. Create and configure some connection variables.

$mysql_server = "mysql.yourserver.com";
$mysql_user = "admin";
$mysql_pwd= "password";
$mysql_db= "mydatabase";

Step 2. Create connection.

$mysql_connection =
mysql_connect($mysql_server, $mysql_user, $mysql_pwd);

Step 3. Select your database.

mysql_select_db($mysql_db) or die("Unable to select a database.");

Step 4. Create your SQL string.

$mysql_sql = "SELECT * FROM mytable";

Step 5. Combine your connection string and your SQL to return data.

$mysql_result = mysql_query($mysql_sql, $mysql_connection);

Printing the data

Step 6. Loop through the results and write it to the page. This output’s format is not pretty since it is meant to be simple.

while($data_row = mysql_fetch_row($mysql_result)) {
    foreach($data_row as $data_field) {
        print $data_field;
    }
    print "<br />";
}

Step 7. Close the connection string.

mysql_close($mysql_connection);

I recently installed YSlow, a handy web development tool for Firefox. In it there is an option that tells you whether your CSS or JavaScript files are cached on the client’s computer allowing for a quicker page load. I noticed my files were not cached so I looked a little into how to go about caching them so the browser won’t download the same file over and over when going from page to page. So I went about conducting my own tests to see how to make this happen. The only way of making it happen other than setting an expire date/time on the WHOLE page (or on the .htaccess file in Linux servers) was to create a server-side file that would output the expiration, content type headers as well as the actual styles/code in your web application. Below is a clearer picture of how I made it happen.

PHP- Step 1.

Make a dynamically generated CSS file that includes expiration and content headers (code below). Save it as ‘dynamic_css.php’. The actual CSS styling can be typed in the same way you would do in a regular stylesheet, we are only after getting those expiration and content type headers sent out.

<?php
header("Expires: Thu, 31 Dec 2020 20:00:00 GMT");
header('Content-type: text/css');
?>
h1 { color: Red; }

PHP- Step 2.

Add ‘dynamic_css.php’ as the CSS href of you document. This should make YSlow happy and increase the speed at which the user navigates through pages that use the same CSS file. Use the same method to add expiration tags to JavaScript.

<link rel="stylesheet" type="text/css" href="dynamic_css.php"/>

ASP- Step 1.

The way I added expire tags to my CSS code in ASP is very similar to PHP’s. First you make a server-side CSS file and save it as ‘dynamic_css.aspx’. Since it is important the headers hit the server first we use server-side code  to send those out first. We type in the actual CSS code like we would in a regular CSS file after that. Besides would you really want to Response.Write() all of your CSS code? I think not.

<%
    Response.Expires = 3600
    Response.ContentType = "text/css"
%>
    h1 { color: Blue; }

ASP- Step 2.

Add ‘dynamic_css.aspx’ as the CSS source of you document. This should make YSlow happy since the expiration headers are now being sent increasing the speed at which the user navigates through the pages that share the same CSS file. Use this same header method to add expiration tags to JavaScript files.

<link rel="stylesheet" type="text/css" href="dynamic_css.aspx"/>

FileETag None

1. Get the current website address.

$website = $_SERVER['HTTP_HOST'];

Woah that was simple! Now the current folder path.

2. Get the current folder path.

$filePath= $_SERVER['REQUEST_URI'];

Did you catch that? It was so fast.

Put the first part and the second together (and of course add an “http://”) and you have the current file’s complete url!

$fileWebAddress= "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

Before HTML

A few of the reasons you would want to place your code before the HTML are because you want to redirect the user to another page on your website, or getting data out of a database and placing it on your page as content.

<?php $pageTitle = "Cesar's page"; ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $pageTitle; ?></title>
</head>
<body> ...

In the script tag

Yes! Just like Javascript you can place your PHP code within a script tag, but also like Javascript gets executed after your page loads. Though I have not seen many people using this method I think it really helps you keep your code clean and organized. It is similar to the .NET code placement.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Web Page</title>
<script language="php">
$pageContent = "Cesar's page content.";
</script>
</head>
<body>
<?php echo $pageContent; ?>
</body>
</html>

Within HTML

Mixing HTML and PHP is probably the most common way PHP applications are made. As useful and conventional as this type of coding can be, it can also become confusing. Below is an example of how that looks.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Web Page</title>
</head>
<body>
<?php
$HeadDiv = "<div><h1>Welcome to my website!</h1></div>";
$BodyDiv = "<div><p>Are you ready to hire me?! Click on my port...</p></div>";
$FooterDiv = "<div>copyright ...</div>";
?>
<?php
echo $HeadDiv;
echo $BodyDiv;
echo $FooterDiv;
?>
</body>
</html>

After HTML

This might be an unorthodox way of code execution but nonetheless it is a possibility and depending on your application needs, it might be a useful one. Your code will execute after the HTML so anything that would be rendered above your HTML will render below it (afterwards) now. Here is how that looks. Please comment if you have an idea of how it would be useful.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My WebApp</title>
</head>
<body>
<form action="/code/untitled.php" method="post">
<input type="text" name="txtMessage" />
<input type="submit" value="submit" />
</form>
</body>
</html>
<?php echo $_POST['txtMessage'];?>