AJAX - Episode 1
We will start with rather simple example.
Scenario:
We have 3 files:
- index.html - our main file
- updater.php - simple PHP script that prints current date and time
- prototype.js - prototype javascript library
Why prototype? Because I love it 
If you wanna use prototype for your projects, you can download it from here HERE
First we start withi index.html file, you can see demo here
index.html
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src='prototype.js'></script> <style type="text/css"> body{margin:0px;padding:0px;background:#565656;text-align:center;color:#414141;font:normal 14px "Trebuchet MS";} #container{margin:50px auto;border:solid 4px #561112;padding:10px;width:400px;background:#e1e1e1;} #time_div{border:solid 1px #cacaca;margin:10px;background:#ffffff;} </style> <title>Untitled Document</title> </head> <body> <div id="container"> <h1>Ajax 001 example</h1> <div id="time_div">not loaded yet</div> <input type="button" onclick="updateTime('time_div');" value="update" /> </div> </body> </html>
Next, we add actual Javascript that make this little script work in the first place.
(you must put it somewhere between <head> and </head> tags):
<script type="text/javascript"> updateTime = function(elm){ // assign time_div object to myElement var myElement=$(elm); // change innerHTML, and CSS style of time_div ona a single line myElement.update('Loading...').setStyle({background: '#ffd1d1',color:'#a1a1a1'}); // make AJAX request to updater.php script new Ajax.Request('updater.php', { // if we get any response: onSuccess: function(transport) { // // change innerHTML of time_div (print response from PHP), and change colors to normal myElement.update('Server time: ' +transport.responseText).setStyle({ background: '#ffffff',color:'#000000' }); } }); } </script>
Now you can see true power of prototype, instead of writing:
type="text/javascript"> var myElement=document.getElementById(elm); myElement.innerHTML='Loading...'; myElement.style.background= '#ffd1d1'; myElement.style.color='#a1a1a1';
as we would in standard javascript, we end up with this:
var myElement=$(elm); myElement.update('Loading...').setStyle({background: '#ffd1d1',color:'#a1a1a1'});
That may not look like big thing, we saved just a few lines, but we included 74kB Javascript library!?! Actually this is not as bad as it seams:
-Prototype is very well written, and well documented library.
-You may strip down all unused functions, and reduce size of prototype.js
-By using prototype (or some other javascipt framework), you can reduce your development time.
Next we write simple PHP file that prints current date and time. IF you wonder what does sleep(1) means, answer is really simple: it just pauses script execution for one second, so you can actually see "Loading... " text and background color change
updater.php
<?php sleep(2); echo date("D M Y H:i:s"); ?>
whole script:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src='prototype.js'></script> <script type="text/javascript"> updateTime = function(elm){ // assign time_div object to myElement var myElement=$(elm); // change innerHTML, and CSS style of time_div ona a single line myElement.update('Loading...').setStyle({background: '#ffd1d1',color:'#a1a1a1'}); // make AJAX request to updater.php script new Ajax.Request('updater.php', { // if we get any response: onSuccess: function(transport) { // // change innerHTML of time_div (print response from PHP), and change colors to normal myElement.update('Server time: ' +transport.responseText).setStyle({ background: '#ffffff',color:'#000000' }); } }); } </script> <style type="text/css"> body{margin:0px;padding:0px;background:#565656;text-align:center;color:#414141;font:normal 14px "Trebuchet MS";} #container{margin:50px auto;border:solid 4px #561112;padding:10px;width:400px;background:#e1e1e1;} #time_div{border:solid 1px #cacaca;margin:10px;background:#ffffff;} </style> <title>Untitled Document</title> </head> <body> <div id="container"> <h1>Ajax 001 example</h1> <div id="time_div">not loaded yet</div> <input type="button" onclick="updateTime('time_div');" value="update" /> </div> </body> </html>
Viewed 31873 times by 6287 viewers
Hello World (pt2)
Blogger account is abandoned, from now on I'll write only here. Stay tuned for some nifty stuff.
Viewed 18574 times by 4754 viewers