Ajax实例二：取得新内容

通过点击pre和next按钮，从服务器取得最新内容。

HTML代码

<div id="slide">图片显示区</div>

<a onclick="return previousSlide()" href="#">&lt; Previous</a>&nbsp;

<a onclick="return nextSlide()" href="#">Next &gt;</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;

  }

}