So far we've seen AJAX content generated after a successful request triggered by a call-to-action. But this kind of content can actually be generated when the page is finished loading. A typical example is an image gallery retrieved from a server-side script like this:
header('Content-Type: text/xml');
$xml = '<?xml version="1.0" encoding="utf-8"?>';
$xml .= '<gallery>' . "\n";
$dir = opendir('books');
$images = array();
while($fname = readdir($dir)) {
if(preg_match('/[.]gif$/', $fname)) {
$images[] = $fname;
}
}
closedir($dir);
function imgSort($a, $b)
{
$a1 = str_replace('.gif', '', $a);
$a2 = str_replace('.gif', '', $b);
return $a1 > $a2;
}
usort($images, 'imgSort');
foreach($images as $img) {
$xml .= '<img>books/' . $img . '</img>' . "\n";
}
$xml .= '</gallery>';
echo $xml;
This PHP script generates an XML file containing a list of images. We can fetch this file using jQuery, like so:
$(document).ready(function() {
$('<ul id="gallery"></ul>').appendTo('body');
var html = '';
$.ajax({
type: 'GET',
url: 'gallery.php',
dataType: 'xml',
data: null,
success: function(xml) {
$(xml).find('img').each(function() {
var url = $(this).text();
html += '<li><img src="' + url + '" /></li>';
});
$('#gallery').html(html);
}
});
});
The above code generates an unordered list that contains all of our images. As you can see, the AJAX request takes place when the page is ready and without a call-to-action. You can see this demo here.