Smallest AJAX example in the world?

[problem]

Learn and demonstrate some simple AJAX.

To produce a clear, clean example – as small as possible.

[/problem]

[solution]

Can a smaller working AJAX example be produced?

Always a believer in keeping it simple & find it easier to learn something complex, by making it as small as possible. See Example.

[/solution]

[example]

  1. Click ‘see demo’.
  2. Click image to see updated date.
  3. Click ‘view the code’.

Here is the code:

<?php

if(isset($_GET['subreq'])) {
echo date('l dS of F Y h:i:s A');
exit(0);
}
?>
<img src=/icons/a.png onClick="javascript:
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch (E) { xmlhttp = false; }
}
@end @*/
if(!xmlhttp) { xmlhttp=new XMLHttpRequest(); }
xmlhttp.open('GET','index.php?subreq=y', true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4) { document.getElementById('output_div').innerHTML = xmlhttp.responseText; }
}
xmlhttp.send(null);
">
<div id='output_div'>click image above to put date here</div>

Or Click this link:

[/example]

[reference]

[tags]AJAX tutorial, AJAX, AJAX demonstration, PHP, Learn AJAX[/tags]

For excellent doco (as always) check out Wiki.

[/reference]

If you have found my website useful, please consider buying me a coffee below 😉

Leave a Reply

Your email address will not be published. Required fields are marked *