I'm noticing a lot of people posting bout ajax and such and they're using the archaic xmlhttp object, which is no wonder why people run into cross-browser problems as well as trying to get the DOM to work. Point is, there's really no reason to mess with that and wasting time for simple tasks when you can use a framework like prototype, Jquery and so forth. Below is a simple ajax example using Jquery. In this code, is a page with a paragraph tag (with an id of 'time'), and four buttons, the buttons will trigger a click event which will either get the date/time, time, your IP address, or your country's name. Live example of the code below can be seen here : http://tryit.in/php/jqueryajax/ The 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" xml:lang="en" lang="en"> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#time').load('load.php'); $("input.trigger_buttons").bind("click", function(e){ var mytitle = $(this).attr("title"); switch(mytitle) { case 'button_1': $('#time').load('load.php', {getwhat: 0}); break; case 'button_2': $('#time').load('load.php', {getwhat: 1}); break; case 'button_3': $('#time').load('load.php', {getwhat: 2}); break; case 'button_4': $('#time').load('load.php', {getwhat: 3}); break; } }); }); </script> </head> <body> <p id="time"></p> <input type="button" class="trigger_buttons" title="button_1" value="Show Date and Time"/> <input type="button" class="trigger_buttons" title="button_2" value="Show only Time"/> <input type="button" class="trigger_buttons" title="button_3" value="What's my IP?"/> <input type="button" class="trigger_buttons" title="button_4" value="My Country?"/> </body> </html> HTML: The load.php file <? //Checks to see if the variable getwhat is set //if it is, set $what to that value //otherwise set it to zero $what = isset($_REQUEST['getwhat'])?$_REQUEST['getwhat']:0; //Depending on the value, echo different values to the request switch($what) { case 0: echo date('l jS \of F Y h:i:s A'); break; case 1: echo "<b>".date('h:i:s A')."</b>"; break; case 2: echo "<i>".$_SERVER['REMOTE_ADDR']."</i>"; break; case 3: $loc = unserialize(file_get_contents('http://www.geoplugin.net/php.gp?ip='.$_SERVER['REMOTE_ADDR'])); echo $loc['geoplugin_countryName']; } ?> PHP: The $('...').load(...) functionality is pretty nice if you simply want to fill an element with the response, but sometimes you need the data back in order to manipulate it, or sometimes you simply want to tag a php file but do nothing with the response. In those cases you have $.get() and $.post() (as well as ajax()) The Ajax functionality of Jquery with some examples can be seen here : http://docs.jquery.com/Ajax
Great to see someone try and educate the DP userbase For things like ajax, people should really use a library like jquery or mootools. There's alot of browser quirks that they account for.
I hate mootools, just a personal preference of due to the number of times that library has caused conflicts with any other library, though least with Jquery (I used to be a big prototype person), I can use the noConflict() functionality to write code that won't conflict with other libraries. But to each their own. The list as I know it of (free) javascript frameworks are: Prototype (usually combined with script.aculo.us for visual effects) JQuery MooTools (via moo.ajax) Dojo Google Web Toolkit There's like over 50 more, but the ones above are the most popular right now (and the first three appear to be best on cross browser compatibility).
I just came across a somewhat interesting article about some javascript bad practices and thought it may be of interest to some digitalpoint members.. Who am i kidding, most digitalpoint members http://james.padolsey.com/javascript/javascript-bad-practices/