Building AJAX Applications with PHP

We have been talking a lot lately about AJAX and how it works with PHP.

Well today Zend Developer Zone released a great article about building ajax applications with PHP and a Pearl Library.

Good article.

Check it out: http://devzone.zend.com/article/4201-Building-AJAX-Applications-with-PHP-and-HTML_AJAX

Creating your own Javascript AJAX Request

Using Javascript to post variables to another script and process them is not something new. Posting by AJAX with nowadays libraries is also not new, but what about you creating your own javascript AJAX handler.

The first thing you need to know is about using the Javascript XMLHttpRequest.  It’s very simple object that will allow you to submit via get to anohter script and retrieve the response for it. For more information about this object you can always check W3Schools.

Creating your own script will need 4 required parameters:

• form name
• action of the form (script where you will be posting to)
• parameters or variables to be sent
• callback function to process the result

With this in hand you can create your function and submit the variables to your script using your own AJAX function.

You will need, for that, a script similar to this one:

var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,…
http_request = new XMLHttpRequest(); // creating the object
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType(‘text/xml’);
http_request.overrideMimeType(‘text/html’);
}
}
else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject(“Msxml2.XMLHTTP”); // creating the object for IE
}
catch (e) {
try {
http_request = new ActiveXObject(“Microsoft.XMLHTTP”); // since it can work differently through versions, using the try catch event for Javascript will force IE to always create the object.
}
catch (e) {}
}
}
// got this test from other site, but don’t remember where….
if(!http_request){
// something did not work right
alert(‘Unable to create an HTTP request instance.’);
return false;
}

// if callback is not a function it will create one so the onreadystatechange from the get the parameters
callback = callback || function(){};

// creating the AJAX call
http_request.onreadystatechange = function completeAjaxRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// everything worked as it should
result = http_request.responseText;
// process the result by a callback function
callback(result);
return true;
}
else {
alert(‘There was a problem with the request.’);
return false;
}
}
};
// sending the parameters through the created object to the script
http_request.open(‘POST’, action, true);
http_request.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http_request.setRequestHeader(“Content-length”, parameters.length);
http_request.setRequestHeader(“Connection”, “close”);
http_request.send(parameters);
return true;

Off course you need way more validation and testing to see if everything is working as it should, but this will kick start it.

Tip:

Create a function that will alert an error or write in console if you are using Firefox with Firebug. This will help to handle and troubleshoot your functions.

All you need is a simple test:

var type = typeof(console);
if(type == ‘undefined’) {
alert(message);
}
else {
console.log(message); // firefox with firebug only
}

Have fun.

Posting Files with AJAX

Well it’s not actually AJAX, but mimics very well.

Consider a scenario where you need to submit files using AJAX because the files are too large to be handled by normal posting and the user would try to cancel the file post while he waits. You could consider the same scenario but with you wanting the user to do something while he waits for the file upload.

As you probaly know, posting files through AJAX is not that easy, but, there is a very simple trick that you can use with very simple Javascript: POST to an IFRAME.

The first time that I have heard about this I tought that was very weird, but you know, why not give it a try.

To post to an Iframe is simple. Create your FORM as you would usally do and add a TARGET attribute to it with the IFRAME NAME set on it. Now create the IFRAME with the DISPLAY and VISIBILITY style set to none and hidden and add set the WIDTH and HEIGHT to 1px each.

Add a submit button on the form and you are good. Everything inside the form will be posted to the IFRAME, but for the user, it will be like he had never left the page.

Simple cool trick.

For faster help, here is the code:

<form id=”frm” name=”frm” method=”post” action=”postHandler.php” enctype=”multipart/form-data” target=”postIframe”>

<input type=”file” name=”myFile” id=”myFile” value=”" size=”30″ /><br />
<input type=”button” id=”btnSubmit” name=”btnSubmit” value=”Upload File” onClick=”document.frm.submit();” /><br />

</form>

<iframe name=”postIframe” id=”postIframe” style=”width:1px; height:1px;display:none;visibility:hidden;”></iframe>

JQuery

I have been working with JQuery for a while and it is by far one of the easiest and strongest Javascript Frameworks that I have worked with.

The process is simple:

• include the JQuery js files (all that you might need)
• Work with Javascript as it was never so easy

Let’s take an example (a very simple one, but pratical – almost everyone that I know have to work with AJAX).

Consider that we need a function to request (AJAX) an information from a helper file (a PHP script that will perform whatever you need it to do) and print it’s results on a div box.

The function would be something like this:

<script>

function getHelloWorld(input1,input2){

/* Changing the current content with something new */
$(“#theDiv”).html(“Wait while loading the requested information”);
/* How about changing the css a bit */
$(“#theDiv”).css(“height”,”300px”);

/* Performing the AJAX request that will get the helper result and place it inside the “theDiv”  innerHTML */
$.post(“helpers/loadNewInfo.php”,{action:’new’,input1:input1,input2:input2},function(result){$(“#theDiv”).html(result); alert(‘cool it worked’); $(“#theDiv”).css(“height”,”500px”); } );

}

</script>

Now let me give a little bit of a “zoom” at the AJAX request.

$.post(
“helpers/loadNewInfo.php”,
{action:’new’,input1:input1,input2:input2}, /* the post variables and it’s values that will be sent to the loadNewInfo.php file */
function(result){
$(“#theDiv”).html(result); /* callback function body */
alert(‘cool it worked’);
$(“#theDiv”).css(“height”,”500px”); /* playing a bit with the css, maybe we could place it yellow background */
}
); /* Here the $.post is ending */

As you can see working with JQuery is very simple. You will access the elements by $(“#elementID”) (or name I really don’t remember right now) and every property from it as an object modifier preceeded by a dot.

With inputs you can work the attributes from it using the attr clause.

Anyway, I’m far from being an expert from this, but It’s a simple example for those who are starting with JQuery. Right now I’m using JQuery to work with a Shopping Cart. It’s a nice way to paginate and display products without having the user post back every time and the best of all I can control CSS elements with it.

For more reference, go to: JQuery Code

P.S. If you are used to perform hard core Javascript DOM manipulation, JQuery will be a piece of cake for you.

AJAX Show Case

I don’t remember where I was reading about this site, but it is a great finding. The site contains a directory with (right now) 888 AJAX scripts and among them one of my favorite, the BSN Auto Suggest.

Cool features:

• User rating on the AJAX script
• User comments on the AJAX script
• You can submit an AJAX
• Have live demo, so you can see how it works

Drawback so far: It is a bit slow.

Anyway is a great resource site (added to the resources page) and it is worth to check it out: Ajax Case

Iphone it

How about you create a version of your WordPress website for Iphone, well here is a small tutorial of how to do it.

All the coding is using the Zend Framework Database Handler, so if you are using one of my classes or anything else, change it to work for you.

The first thing you will need is to download the IUI framework. It have a series of scripts, css, and some other things that are going to be used when you are checking the site with your Iphone.

Now create a PHP script page with this html header. It’s the same one that is being used at the samples of the framework.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>McLoide.com Iphone Version</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "../iui/iui.css";</style>
<script type="application/x-javascript" src="../iui/iui.js"></script>
<!--
<script type="application/x-javascript" src="http://10.0.1.2:1840/ibug.js"></script>
-->
</head>
<body onclick="console.log('action', event.target);">

Now you have to create the following structure:

• Toolbar – will be displayed at top with a back button and the stats (battery, etc) button
• Home – will be the first thing loaded when the Iphone load the page, so this should have a list of the contents of the website
• Summary – This will display a small summary of what’s about the the content that is about to be displayed and a back button
• Display – This will display the full content of the item

Imagine this as a site tree that is being build dinamicaly and every click displays one of the tree branches.

So, how your body will be built? It’s simplier to display the code than explain, so, here’s the rest of the code:

<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a href="stats.php" class="button">Stats</a>
</div>
<ul id="home" title="Posts" selected="true">
<?php
$stmt = "select * from wp_posts where post_status = 'publish' group by post_title order by ID asc";
$data = $GLOBALS['db']->fetchAll($stmt); # This is using Zend Framework Db Hanlder
foreach($data as $key => $contents) {
?><li><a href="#summary<?php echo $contents['ID'] ?>"><?php echo strip_tags($contents['post_title']); ?></a></li><?php
}
# retrieving all info of your posts
?>
<li><a href="stats.php">Stats</a></li>
</ul>
<?php
#building the summary list
foreach($data as $key => $contents) { ?>
<ul id="summary<?php echo $contents['ID'] ?>" title="<?php echo strip_tags($contents['post_title']); ?>">
<li><a href="#display<?php echo $contents['ID'] ?>"><?php echo count_words(strip_tags($contents['post_content']),20); ?></a></li>
<li><a href="#home">Back</a></li>
</ul>
<?php } ?>
<?php
#building the display blocks
foreach($data as $key => $contents) { ?>
<div id="display<?php echo $contents['ID'] ?>" class="panel" title="<?php echo $contents['post_title']; ?>">
<h2><?php echo $contents['post_title']; ?></h2>
<p><?php
echo $contents['post_content'];
?></p>
</div>
<?php }

#note count_words is just a small function to get an string and correctly break into a smaller string without breaking the words

?>

With this in place all you need to do now is test it and for that you can test it in the Iphone tester. It’s not 100% accurate but it will give you a great idea of how things will work in the real Iphone and you can always access it by your computer browser.

Off course this is a simple example and there is much more you could do to work with this. Imagine a full application only to work out with Iphones.

If you want to see this example working, you can see a demo from in http://www.mcloide.com/iphone/

Have fun.