用XMLHttpRequest对象从服务器获取图像，缓存图像到本地的浏览器缓冲区。
从本地的浏览器缓冲区取得图像进行显示。
因为在第二步从取图片到显示的时间很短，所以用户基本上觉察不出任何闪烁。可见，以上技术基于所请求的图像是可缓存的的假设，如果图像是不可缓存的，是不是以上代码就不能正常工作了呢？
还是让代码来说话，把以上代码做些更改：
function displayImage()
{
var url = "./" + i + ".jpg";
var url = "./image.php?filename=" + i + ".jpg";
makeAsyncRequest(url, function (url) {
var div = document.getElementById("image");
var img = div.getElementsByTagName("img");
再写一个php脚本用来传送所请求的图片：
<?php
header("Content-Type: image/jpeg");
header("Cache-Control: no-cache");
echo file_get_contents($_GET["filename"]);
?>
果真不出所料，又出现了闪烁...
看来还需要另想办法，闭门造车是行不通了，求助google这位百事通先生吧！功夫不负有心人，终于还是被我找到了，欣喜归欣喜，结果还是让我大跌眼镜，img竟然有onload的事件回调接口，只能庆幸自己的眼镜是树脂的了，"眼镜掉了我不怕不怕啦，不怕不怕不怕啦..."
还等啥，当然是代码伺候了:
<html>
<head>
<title>Image Slide</title>
<script>
var i = 0;
var max_i = 10;
function displayImage()
{
var img = document.createElement("img");
img.onload = function () {
var div = document.getElementById("image");
while (div.childNodes.length > 0)
div.removeChild(div.childNodes[0]);
div.appendChild(img);
if (i == max_i)
i = 0;
else
i ++;
window.setTimeout("displayImage();", 1000);
}
img.src = "./" + i + ".jpg";
}
</script>
</head>
<body onload="displayImage();">
<div id="image">
</div>
</body>
</html>
"She is an ungly girl!"没啥好说的，不可缓存的图像的情况：
i ++;
window.setTimeout("displayImage();", 1000);
}
img.src = "./" + i + ".jpg";
img.src = "./image.php?filename=" + i + ".jpg";
}
</script>
</head>
读到这里，你应该知道哪个是歪门邪道，哪个是人间正道了吧？
更多关于Ajax相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》及《PHP+ajax技巧与应用小结》。
希望本文所述对大家ajax程序设计有所帮助。
