Ajax, ajax, and more ajax!
Ajax, ajax, ajax.. you may head so much about ajax, and you may be wondering, what’s ajax?, is it a new programming language? Well, this is not a programming language, this is only the new trend which is download a web-site or a portion of it when you need, avoiding reloading the hole page.
This is model is quite obsolete at this days, because usually web sites has a unique view, and when you link only is update a text, or fraction of the page, with the HTTP protocol you reload the whole page.
Because the HTTP is widely protocol, and it was wrote long time ago (1991), and in that time the Internet were not so popular as now. For avoiding this problem, there is a new methodology of develop websites, called AJAX (Asynchronous Javascript And XML), this is a mixture between client side (javascript) and server side (usually PHP, but could be write in any language, even statics files).
Here is where the problem begins, you must decide if your site will be AJAX or not, in this point there is a still a considerable number of browsers which doesn’t support because their javascript interpreter is a quite old or simple doesn’t have javascript interpreter.
Another important so important thing, is that not all the web-crawler doesn’t support ajax, so If you have a site which 100% ajax web search engines won’t be able to navigate and gather information about your site, if search engines could not crawl your site, visitors from all around the world won’t be able to discover your site searching.
To avoid this problem, we must have two versions of the website, Ajax and “traditional”, because ajax is much better to surf for users who have a new browser, and we cannot ignore web-robots because they’ll give benefits.
Based on the problem described above I’ve wrote a simple PHP classes, called AutoAjax, that comes with a javascript that in run time, when the page is loaded it examine all the anchor tags (”<a…> </a>”) and add a function in the property onclick. That property automatically is trigger when user click, and Analise the link, if the host of clicked link is the same of actual host, and if the link wasn’t forced manually to download by regular request, this return false to the onclick and the link doesn’t follow by regular request, instaed of that, a POST query by ajax is trigger to the PHP Script. The PHP script catch that Post query with the magic parameter, if match, return the ajax query in a JSON format, in otherwise the hole page is returned.
In AutoAjax you have to define a main page call template (see definition), the in the template you must set up your “AjaxContainer”, which are like boxes that will contain pages, then in every page must include its “AjaxContainer” destination.
Let’s see AutoAjax in action:
- Web-site space definition
<?php
require “../autoajax.php”;
$ajax = new autoajax(“..”);
$ajax->mainpage = “template.php”; /* ajax default main template */
?>
- Main site (template.php)
<?php
include_once(“definition.php”); /* auto-ajax definition */
global $ajax; /* Important, always do this, because this page will be include */
$ajax->add(“central”,“welcome.php”);
$ajax->add(“bottom”,“time.php”);
?><html>
<head>
<title>Testing Auto-Ajax</title>
<?php $ajax->printjs() ?>
</head>
<body>
<table width=”100%”>
<tr>
<td colspan=”2″ align=”center”><h1>Testing AutoAjax</h1></td>
</tr>
<tr>
<td width=”12%” valign=”top”>
<a href=”welcome.php”>Home</a><br />
<a href=”about.php”>About</a><br />
<a href=”copyleft.php”>Copyleft</a><br />
<a href=”time.php”>Refresh time</a>
<a href=”normal-request.php” rel=”no-ajax”>Normal request</a>
</td>
<td width=”88%”>
<?php
//Printing Ajax section
$ajax->AjaxSection(“central”);
?>
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<?php
//Printing Ajax section
$ajax->AjaxSection(“bottom”);
?>
</td>
</tr>
</table></body>
</html>
- Web- pages sites
<?php
include_once(“definition.php”); /* auto-ajax definition */
global $ajax; /* Important, always do this, because this page will be include */
$ajax->destiny(“central”); /* the ajax destination of this page */
$ajax->start();//the page start here
?>
<h2>Welcome to the test of AutoAjax.</h2>
<p>Here you can surfer well with ajax brower and with old browser.</p>
<p>To simulate old browser with mozilla do “control + click” on links. </p>
<?php
$ajax->end(); //and ends here
?>
You can get more details about AutoAjax here.
7 Comments
Leave a comment
Sweet!
Hello,
Very nice implementation
One question please: how can we apply AutoAjax for submiting forms? (Let’s say: I submit this comment and it is published with ajax or without ajax if I have Javascript disabled)
Thanks!
johnny,
For do that you need to change a little the javascript, and it should work, I’ll include in the next release, thank you for request that feature.
regards,
I see the code and I get the idea, but is there any DEMO page where I can see it in action? (I mean, not having to download and install the scripts on my server to see how they work)
Thanks
Yeah I’d like it too. That one of the big problems of PHPClasses. Needing to connect to download files because there’s no demo at all is not quite fun.
If you don’t want to download the class for the phpclasses site you can download with a svn client:
svn checkout http://php-ajax.googlecode.com/svn
jlkjlkj