Ajax实例二:取得新内容
Ajax实例二:取得新内容
通过点击pre和next按钮,从服务器取得最新内容。
HTML代码
<div id="slide">图片显示区</div>
<a onclick="return previousSlide()" href="#">< Previous</a>
<a onclick="return nextSlide()" href="#">Next ></a>
JavaScript代码
var slideNumber;//计数器,向前向后导航
var req = new XMLHttpRequest();
window.onload = function() {
slideNumber = 0;
}
function nextSlide() {
if (slideNumber == 5) {
slideNumber = 1;
} else {
slideNumber += 1;
}
goToNewSlide();
return false;
}
function goToNewSlide() {
if (req != null) { // 发送请求
req.open("GET", "ChinaSites" + slideNumber + "_slide" + ".html", true);
req.onreadystatechange = newSlideReceived;
req.send();
}
else {
// There was a problem. Ignore it.
}
}
function previousSlide() {
if (slideNumber == 1) {
slideNumber = 5;
} else {
slideNumber -= 1;
}
goToNewSlide();
return false;
}
function newSlideReceived() {//服务器响应状态监控程序
if ((req.readyState == 4) && (req.status == 200))
{
document.getElementById("slide").innerHTML = req.responseText;
}
}