Ajax的一次小练习从服务器端读取静态文件以及阻止缓存

最新推荐文章于 2023-11-15 13:09:46 发布

曲奇小姐

最新推荐文章于 2023-11-15 13:09:46 发布

阅读量251

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80701337

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>用Ajax读取一个服务器上的文件</title>
    <style></style>
    <script src='ajax.js'></script>
    <script type="text/javascript">
    window.οnlοad=function(){
      var oBtn=document.getElementById('btn');
      //请求一个静态的文件，以及如何阻止缓存
      oBtn.οnclick=function(){
        // ajax的使用格式： ajax（url,function(),function()）
        // ajax(请求的地址，请求成功的处理函数函数，请求失败的处理函数)，这里面的三个参数都不能缺少
        //使用 ajax之后，访问地址就必须变成：localhost:文件地址
        //这个时候的我们写的index.html文件就必须放在本地服务器的对应目录下，我用的是MAMP，这个放文件的目录是htdocs
        //记得在开头引入Ajax文件，如果是引用本地文件的方式，记得把Ajax.js的文件下载好，放到htdocs目录下
        //这里的地址是默认到htdocs目录的，所以如果你写相对路径的话，直接写文件名就好了
        ajax('aaa.txt？t='+new Date().getTime(),function(str){
            //'？t='+new Date().getTime()在文件名之后加上这么一长串的东西，主要是为了避免缓存带来的麻烦，
            //浏览器是默认是会将我们的请求过的东西缓存到本地的，但是这对于实时更新的网页来说是个障碍，加的这一串是给浏览器看的
            //目的是让请求地址时时刻刻都在改变，new Date().getTime()这是一个获得毫秒数的方法，这样t的值时刻都不一样，导致
            //请求地址也时刻发生改变，这样可以解决缓存带来的干扰
          alert(str);
          //我们用Ajax读过来的东西都是字符串的形式
        },function(){
          alert('失败');
        });
      };
    }
    </script>
  </head>
  <body>
    <button id='btn' type="button" name="button">点击我读文件</button>
  </body>
</html>