Ajax实例二：取得新内容

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_30411819

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量62

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/YeChing/p/6339332.html

版权

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;
  }
}

转载于:https://www.cnblogs.com/YeChing/p/6339332.html