ajax shmajax! here, i will discuss how to create the ajax effect(close to) without the x(xml). ajax stans for Asynchronous Javascript And XML. so... it should technically be just aj, but aja sounds better. =p
why use aja, or ajax for that matter? the answer is, to enhance the user experience and to relieve the server of some load. by using aja[x], you can actually put in more data into a page that has already been served. that way, you don't have to serve the whole page again just to change a single word. and if you are an expert on DOM(Document Object Model), you can, theoretically, just serve a single page and hand it off to aja[x] to get the data then modify the page elements by following the DOM.
i will get to the limitations later on, but for now let's start rolling...
first, lets make the page that's going to be served...
<html>
<head>
<title>AJA!</title>
</head>
those are the mandatory things, here's where you start paying attention...
<body>
<p>This is a demo of aja:<br>
<input id="add" type="button" value="Show lines!" onclick="aja_do('add')">
<input type="button" value="Clear" onclick="aja_do('clear')">
here we have two buttons, what you should take note of is the onclick attribute. once you click on the button, it will execute the code inside the onclick attribute, in this case its a call to a function named "aja_do", passing to it a parameter, either "add" or "clear" depending on what you click.
<div style="border: solid 1px black">
<span id="container">This is where all the magic will happen.</span>
</div>
then we have a div tag, its just to have a pretty box(sort of). inside it, we have a span tag and we gave it an id of "container" and some text in it. the span tag is important (cause of the id attribute) and it must have the id attribute if you want to make your life easier.
<script type="text/javascript">
function aja_do(action) {
var jsel = document.createElement('script');
jsel.type = 'text/javascript';
jsel.src = 'get_text.php?action='+action;
document.body.appendChild(jsel);
}
</script>
</body>
</html>
finally, just before we close the body tag and the document, we sneak in a bit of javascript. yes, you can put script tags outside of the head. but let's concentrate on the script tag and what it holds.
the script tag declares a function. this is the function which the buttons above call when you click them. let's take a look at it line by line:
var jsel = document.createElement('script');
this creates a script tag, DOM style, and assigns the variable jsel to hold it so we can poke it, otherwise, its as good as lost.
jsel.type = 'text/javascript';
then we tell the browser that the script tag we created is text/javascript type, of course, we're using javascript after all.
jsel.src = 'get_text.php?action='+action;
then we tell the browser that the script tag will be loaded from a file and the file can be found there. what's different here is that the source is not the traditional "script.js", as what you'd expect from loading a javascript file. we tell it to load "get_text.php". its been known for a long time that you can load php(or asp, or whatever file you want) files as javascript files or css files(loading a php-fied css file is a quick and easy way to make customizable skin colors for websites), so thats what we're doing now. but the we add to the source some more parameters, namely the "action", which is the parameter which the buttons passed on to aja_do. so we're telling it to load either get_text.php?action=add or get_text.php?action=clear.
document.body.appendChild(jsel);
then we have this final bit which basically "executes" the code inside get_text.php. if you notice i used document.body. that is the reason why i put the script inside the body and not the head. some browsers only append to the body if the script instructing it to append something to it is a direct child. so placing it in the head means its not a direct child anymore, likewise with placing it inside a div tag inside the body. it has to be a direct child of the body, so its convenient to place it just before the closing body tag or right after the opening body tag. though personally, i put my scripts in the head tag and then append the code to a dummy placeholder like a span tag.
so that's your static page, you can save it as aja_test.html. now lets take a look at get_text.php
<?php
$action = trim($_GET['action']);
if(!empty($action)) {
$output_string = '';
?>
the opening section. if you remember we passed what we're going to do, either add or clear, so here we take what we passed and make sure that it is there. we also initialize the variable output_string which will hold what we're going to display.
var con = document.getElementById('container');
then we leave php for a bit to put in a bit of javascript. the only thing you have to remember is that instead of formatting your data in php for html output, your doing it for javascript output, that's why proficiency in DOM is a huge advantage. in this case, we make a variable and use it as something like a pointer to the "container". if you remember, the "container" is in the static page and its a span tag. this allows us to easily to poke that tag whichever way we want.
<?php
if($action == 'add') {
$output_string = "Server time is: ".date("h:i:sa");
?>
var newline = document.createElement('br');
con.appendChild(newline);
var append_text = document.createTextNode('<?php echo $output_string; ?>');
con.appendChild(append_text);
<?php
}
ok, if what we got is add, we put in what we're going to display in output_string, then leave the realm of php and get into javascript. first, we create a newline,so we create a "br" tag DOM style. then we add it inside the container. next we create in javascript the text that we made earlier, and then add it inside the container. and that's it, we have successfully added stuff in the other page! yay!
elseif($action == 'clear') {
$output_string = "Server time when box was reset: ".date("h:i:sa");
?>
while(con.firstChild) con.removeChild(con.firstChild);
var new_text = document.createTextNode('<?php echo $output_string; ?>');
con.appendChild(new_text);
<?php
}
but if we're going to clear, the next block handles it. again, we create the text in php, then enter javascript land. what the first line does is it clears everything inside "container" DOM-style. while container still has a "child" or content, it will remove it. then like the one up there, we create the text in javascript and insert it in the "container". if you take a look at the page, the contents of the box was cleared and just has a single line.
}
?>
then we close the page.
and there you have it, a crash-course in aja and a little DOM. now my example above, if you check it out, absolutely makes no sense. ideally, the php file would do more complicated stuff(read: access database) and return more sensible material. but that will have to do cause i don't have anymore database hosting. if you want to really see it in action, take a look at the gallery from my previous post, thats where my database hosting went.
if you check out my example, you'd notice something is off... namely the time is the same for each line everytime you click a button. is this a bug? nope! well, technically no. this is the effect of your browser caching pages! if you examine the code carefully and take a look at the process from the browser's eye, it looks like we are loading two javascript files: get_text.php?action=add and get_text.php?action=clear. the browser doesn't know its just a single file with different parameters, for the browser, it looks its two different files cause they don't look the same. so, the first time it loads the two files, it makes two different copies in its cache. so the next time you click a button again, it serves the one in its cache, so the time in the line that's added doesn't get updated. and that makes sense cause that is the expected behaviour of a browser.
so you're screaming at me asking why use this at all? the answer is simple, when you do use it, what you're going to use it for will not be anything like my example. in reality, what you will load will be more like file.php?id=1 ... file.php?id=890345 cause you are most likely going to query a database or something. get the picture? although yeah, ajax will not have this problem... =D but this is definitely a lot simpler and easier to implement than ajax(have you met JSON? no? well, he's usually the guy with a SOAP in hand.).
and as a closer, there is this quirk in ie6... it doesn't like loading javascript files dynamically. so sometimes it works, sometimes it doesn't. it depends. if someone could provide more details on this problem and a possible fix, please share it to the world! one odd thing, if you put an alert anywhere inside aja_do, ie6 will execute the code. i'm not sure why, but that's what it does. i've made some headway into this problem, was able to fix it for the avant browser, which is based on the ie6, but it still doesn't seem to work with earlier versions of ie6(either that or my test ie6 is seriously screwed).
see it in action here:
http://fapri.ifastnet.com/aja_test.html
get the files here:
http://fapri.ifastnet.com/aja.zip
what do you think? got a better idea? let the world know! and yeah, one reason i'm writing this is to contribute my little thoughts to the world(erm, google...) which has taught me a lot over the past few months.
...:::more
less:::...
