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

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

相关资源：JAVA上百实例源码以及开源项目