阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      AJAX 实例

      AJAX 实例

      为了帮助您理解 AJAX 的工作原理,我们创建了一个小型的 AJAX 应用程序:

      这是您当前看到的内容,你可以点击下面按钮来更改内容!然后再看变化!!!

      AJAX 实例解析

      上面的 AJAX 应用程序包含一个 div 和一个按钮。

      div 部分用于显示来自服务器的信息。当按钮被点击时,它负责调用名为 loadXMLDoc() 的函数:

      <div style="background-color: #fff000;padding: 10px;">
          <div id="myDiv">
              <strong>这是您当前看到的内容,你可以点击下面按钮来更改内容!然后再看变化!!!</strong>
          </div>
          <button type="button" onclick="loadXMLDoc()">
              通过AJAX请求内容
          </button>
      </div>
      

      接下来,在页面的 head 部分添加一个 标签。该标签中包含了这个 loadXMLDoc() 函数:

      function loadXMLDoc(){
          if (window.XMLHttpRequest){
              // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xmlhttp=new ActiveXObject("/");
          }
          xmlhttp.onreadystatechange=function(){
              if (xmlhttp.readyState==4 && xmlhttp.status==200){
              document.getElementById("myDiv").innerHTML='----- 这里从 阿西河前端教程 的后台拿到的数据!当您看到这段话的时候,页面并没有刷新 -----';
              }
          }
          xmlhttp.open("GET","/",true);
          xmlhttp.send();
      }
      

      函数里,拿到内容后,我手动更改内容,您可以打个console.log来查看拿到的是什么值

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录