zoukankan      html  css  js  c++  java
  • Ajax实例二:取得新内容

    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;
      }
    }
    
  • 相关阅读:
    maven安装
    删掉centos原有的openjdk并安装sun jdk
    搭建私有仓库Harbor
    什么是Docker
    总结docker常用命令
    MySQL如何修改密码
    VMware vSphere
    安装Esxi 6.5
    Linux安装python3.6
    提高Linux运维效率的30个命令行常用快捷键
  • 原文地址:https://www.cnblogs.com/YeChing/p/6339332.html
Copyright © 2011-2022 走看看