美文网首页
02Ajax请求的使用详解以及实例，含源码

02Ajax请求的使用详解以及实例，含源码

作者: An的杂货铺 | 来源:发表于2019-08-28 15:00 被阅读0次

第一个简单的Ajax请求用例 请求本地文件(在服务器环境下打开)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script>
        var content = document.getElementById('content');
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            //创建通信对象
            var xhr = new XMLHttpRequest();
            //创建一个请求，配置参数，请求类型(post/get),url地址,是否异步
            xhr.open('get','wenben/one.txt',true);
            //发送请求
            xhr.send();
            //指定接收回来的内容，就绪状态改变时触发
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    //代表接收完文件
                    content.innerText = xhr.responseText;
                }
            }

        }

    </script>    
</body>
</html>

创建一个原生的兼容写法的Ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn">点我读取文件</button>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         btn.onclick = function() {
             // Ajax兼容低版本IE浏览器的写法
             // 创建一个xhr对象
             var xhr;
             if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
             } else {
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             //创建一个请求 配置 第一个参数 请求类型 get/post 第二个参数 请求路径 第三个参数 是否使用异步
             xhr.open("get","wenben/one.txt",true);
             //发送请求
             xhr.send(null);
             //指定接受回来的内容 就绪状态改变时候触发
             xhr.onreadystatechange = function() {
                if(xhr.readyState == 4) {
                    // 接收完文件 
                    console.log(xhr.responseText);
                }
             }
            console.log("HAHA1");
            console.log("HAHA2");
            console.log("Haha3");
         }
         //根据打印的顺序可以明确的知道，ajax请求是异步程序
       </script> 
</body>
</html>

一个Ajax的post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script src="js/myajax.js"></script>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         btn.onclick = function() {
             // Ajax
             // 1 创建一个xhr对象
             var xhr = new XMLHttpRequest();
             // 2 指定接受回来的内容 就绪状态改变时候触发
             xhr.onreadystatechange = function() {
                if(xhr.readyState == 4) {
                    // 接收完文件 
                    content.innerHTML = xhr.responseText;
                }
             }
             // 3 创建一个请求 配置 第一个参数 请求类型 get/post 第二个参数 请求路径 第三个参数 是否使用异步
             xhr.open("post","wenben/do2.php",true);
             // 假如是post请求 必须写一句话 模拟成form表单提交
             xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
             // 4 发送请求
             xhr.send("xingming=along&age=30");//"k=v&k=v"
         }
    </script>    
</body>
</html>

使用encodeURIComponent来处理有时参数传递时的中文参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         btn.onclick = function() {
             // Ajax
             // 1 创建一个xhr对象
             var xhr = new XMLHttpRequest();
             // 2 指定接受回来的内容 就绪状态改变时候触发
             xhr.onreadystatechange = function() {
                if(xhr.readyState == 4) {
                    // 接收完文件 
                    content.innerHTML = xhr.responseText;
                }
             }
             var str = "我是文本";
            //  使用encodeURIComponent来处理有时参数传递时的中文参数
             // 3 创建一个请求 配置 第一个参数 请求类型 get/post 第二个参数 请求路径 第三个参数 是否使用异步
             xhr.open("get","wenebn/do.php?wenben="+encodeURIComponent(str),true);
             // 4 发送请求
             xhr.send(null);//
         }
    </script>    
</body>
</html>

Xhr.stutus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         btn.onclick = function() {
             // Ajax
             // 1 创建一个xhr对象
             var xhr = new XMLHttpRequest();
             // 2 指定接受回来的内容 就绪状态改变时候触发
             xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 ) {
                    if(xhr.status >=200 && xhr.status<300 || xhr.status == 304) {
                        // 接收完文件 
                        content.innerHTML = xhr.responseText;
                    } else {
                        content.innerHTML = "服务内部错误，稍后再试";
                    }
                }
             }
             // 3 创建一个请求 配置 第一个参数 请求类型 get/post 第二个参数 请求路径 第三个参数 是否使用异步
             xhr.open("get","wenben/one.txt",true);
             // 4 发送请求
             xhr.send(null);
         }
    </script>    
</body>
</html>

用js来封装一个公用的Ajax请求

//自己封装一个可以发送get和post请求的ajax函数
(function(){
    //封装在一个匿名自执行函数里面 并导出到全局
    var myAjax = window.myAjax = {
        author:'an',
        version:'1.0'
    };
    myAjax.get = function(URL,queryJson,callback){
        //创建一个xhr对象
        var xhr;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //创建一个get请求 get请求有时需要发送参数拼接在url后面
        // 对queryJson来进行处理
        var queryString = myAjax.jsonTostring(queryJson);
        console.log(queryString)
        xhr.open('get',URL+'?'+queryString,true);
        //发送请求
        xhr.send(null);
        //监听
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status>=200 && xhr.status <300 || xhr.status == 304){
                    //请求成功 执行成功的回调
                    callback(null,xhr.responseText);
                }else{
                    callback(new Error('找不到该文件'),'找不到该文件');
                }
            }
        }
    },


    myAjax.post = function(URL,queryJson,callback){
        //创建一个xhr对象
        var xhr;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //创建一个post请求
        // 对queryJson来进行处理
        var queryString = myAjax.jsonTostring(queryJson);
        xhr.open('post',URL,true);
        //发送请求
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(queryString);
        //监听
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status>=200 && xhr.status <300 || xhr.status == 304){
                    //请求成功 执行成功的回调
                    callback(null,xhr.responseText);
                }else{
                    callback(new Error('找不到该文件'),'找不到该文件');
                }
            }
        }
    }
    myAjax.jsonTostring = function(json){
       var str = '';
       for(var k in json){
          str+=(k+'='+encodeURIComponent(json[k]) +'&');
       }
       return str.substring(0,str.length-1);
    }
})()

利用自己封装的myAjax.js实现的一个get请求实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script src="js/myAjax.js"></script>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         btn.onclick = function() {
            console.log(Date.parse(new Date()))
                // 发get请求
            myAjax.get("wenben/oneone.txt",{temp:Date.parse(new Date()),age:20},function(err,data) {
                 if　(err) {
                     content.innerHTML = data;
                     return;
                 }
                 content.innerHTML = data;
            });                      
         }
    </script>    
</body>
</html>
</body>
</html>

利用自己封装的myAjax.js实现的一个post请求实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script src="js/myAjax.js"></script>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         //该请求需要开启一个服务来处理
         btn.onclick = function() {
             myAjax.post('http://localhost:8088/one.txt',{
                 "xingming":"along",
                 "age":30
             },function(err,data) {
                 console.log(data);
                 if(err){
                    content.innerHTML = "错误";
                     return;
                 }
                content.innerHTML = data;
             })
         }
    </script>    
</body>
</html>

JSON数据的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="js/myAjax.js"></script>
    <script>
        myAjax.get("wenben/a.json",{},function(err,data) {
            if (err) return;
            //console.log(typeof(data)); // 结果是string
            // 转换成对象
            //方法1 eval()
            // var obj = eval('('+data+')');
            // console.log(obj)
            // alert(obj.students[0].name);
            
            //方法2 
            // var obj = new Function("return"+data)();
            // console.log(obj)
            // console.log(typeof obj);
            
           // JSON.parse() 将json字符串转换为对象
           var obj = JSON.parse(data);
           console.log(obj)
           alert(obj.students[1].age);
        });
        //eval直接将json字符串转换为对象
        var strone = {
            "students":[{
                "name":"小米",
                "age":"8"
            },{
                "name":"小花",
                "age":"7"
            },{
                "name":"小芳",
                "age":"7"
            },{
                "name":"哈la",
                "age":"12"
            }]
        }
        var strtwo = "helloworld";
        var objone = eval(strone);
        var objtwo = eval('strtwo');
        console.log(objone);//对象
        console.log(typeof(objtwo));//string
    </script>
</body>
</html>

使用jquery封装的Ajax做一个简单的get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         btn.onclick = function() {
                // 发get请求
            $.get("wenben/a.json",{temp:Date.parse(new Date())},function(data) {
                console.log(data);
            });                      
         }
    </script>    
</body>
</html>
</body>
</html>

使用jquery封装的Ajax做一个简单的post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         btn.onclick = function() {
                // 发get请求
            $.post("wenben/a.json",{'name':'lucy'},function(data) {
                console.log(data);
            });                      
         }
    </script>    
</body>
</html>
</body>
</html>

一个包含成功回调和失败回调的的jquery的Ajax的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
         // 找到相关元素
         var btn = document.getElementById("btn");
         var content = document.getElementById("content");
         // 事件监听
         btn.onclick = function() {
             $.ajax('wenben/a.json',{
                 'type':'get',
                 'data':{},
                 'success':function(data){
                     console.log(data)
                 },
                 'error':function(xhr,textStatus,errorThrown){
                    console.log('失败')
                 }
             })                 
         }
    </script>    
</body>
</html>
</body>
</html>

一个原生的表单序列化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="" id="biaodan">
      <p>
        <label
          >请输入姓名
          <input type="text" name="userName" />
        </label>
      </p>
      <p>
        <label
          >请输入密码
          <input type="password" name="psw" />
        </label>
      </p>
      <p>
        请选择性别
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
      </p>
      <p>
        请选择你的爱好
        <input type="checkbox" name="hobby" value="足球" />足球
        <input type="checkbox" name="hobby" value="篮球" />篮球
        <input type="checkbox" name="hobby" value="打豆豆" />打豆豆
        <input type="checkbox" name="hobby" value="编程" />编程
      </p>
      <p>
        请选择你所在省份
        <select name="prov" id="prov">
          <option value="江苏">江苏</option>
          <option value="广东">广东</option>
          <option value="湖南">湖南</option>
        </select>
      </p>
      <p>
        请谈谈你的建议
        <textarea name="message" id="" cols="30" rows="10"></textarea>
      </p>
      <p>
        <input type="button" value="点击提交" id="btn" />
      </p>
    </form>
    <script>
        //一个原生的表单序列化的案例 用于处理提交表单的数据
      // 找到相关元素
      var biaodan = document.getElementById("biaodan");
      var btn = document.getElementById("btn");
      // 注册事件
      btn.onclick = function() {
       //获取所有表单控件
       var eles = biaodan.elements;
       console.log(eles);
       console.log(eles.length);
       console.log(eles[0].value);
       var res = [];
       //循环遍历所有表单控件
       for(var i = 0;i<eles.length;i++){
           var ele = eles[i];
           console.log(ele.type);
           //根据ele.type来进行表单数据的处理
           switch(ele.type){
                case 'button':
                case 'submit':
                case 'reset':
                      break;
                case 'text':
                case 'password':
                case 'textarea':
                      res.push(ele.name+'='+ele.value);
                      break;
                case 'radio':
                case 'checkbox':
                      ele.checked&&res.push(ele.name+'='+ele.value);
                      break;
                case  'select-one':
                       console.log(ele)
                       var options = ele.getElementsByTagName('option');
                       for(var j = 0;j<options.length;j++){
                           options[j].selected&&res.push(ele.name+"="+options[j].value)
                       }
            }
       }
        console.log(res)
      };
    </script>
  </body>
</html>

jquery的表单的序列化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="" id="biaodan">
      <p>
        <label
          >请输入姓名
          <input type="text" name="userName" />
        </label>
      </p>
      <p>
        <label
          >请输入密码
          <input type="password" name="psw" />
        </label>
      </p>
      <p>
        请选择性别
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
      </p>
      <p>
        请选择你的爱好
        <input type="checkbox" name="hobby" value="足球" />足球
        <input type="checkbox" name="hobby" value="篮球" />篮球
        <input type="checkbox" name="hobby" value="打豆豆" />打豆豆
        <input type="checkbox" name="hobby" value="编程" />编程
      </p>
      <p>
        请选择你所在省份
        <select name="prov" id="prov">
          <option value="江苏">江苏</option>
          <option value="广东">广东</option>
          <option value="湖南">湖南</option>
        </select>
      </p>
      <p>
        请谈谈你的建议
        <textarea name="message" id="" cols="30" rows="10"></textarea>
      </p>
      <p>
        <input type="button" value="点击提交" id="btn" />
      </p>
    </form>
    <script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        //基于jquery来实现的一个表单的序列化 相较于原生的序列化，大大优化
      // 找到相关元素
      var biaodan = document.getElementById("biaodan");
      var btn = document.getElementById("btn");
      // 注册事件
      btn.onclick = function() {
          console.log($('#biaodan').serialize());
      };
    </script>
  </body>
</html>

Ajax请求的缓存问题

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <h1 id="content">.........</h1>
   <button id="btn">点我读取文件</button>
   <script>
        // 找到相关元素
        var btn = document.getElementById("btn");
        var content = document.getElementById("content");
        // 事件监听
        btn.onclick = function() {
            // Ajax
            // 1 创建一个xhr对象
            var xhr = new XMLHttpRequest();
            // 2 指定接受回来的内容 就绪状态改变时候触发
            xhr.onreadystatechange = function() {
               if(xhr.readyState == 4 ) {
                   if(xhr.status >=200 && xhr.status<300 || xhr.status == 304) {
                       // 接收完文件 
                       content.innerHTML = xhr.responseText;
                   } else {
                       content.innerHTML = "服务内部错误，稍后再试";
                   }
               }
            }
            // 3 创建一个请求 配置 第一个参数 请求类型 get/post 第二个参数 请求路径 第三个参数 是否使用异步
            //xhr.open("get","wenben/one.txt?x="+Math.random(),true);//添加随机数
            xhr.open("get","wenben/one.txt?x="+Date.parse(new Date()),true);//添加时间戳
            // 4 发送请求
            xhr.send(null);
            console.log(Date.parse(new Date()))
        }
        //两次get或者post请求的url和携带的参数一致 请求的时候即使服务器返回的状态码是200，
        //也会被认为是304那样的缓存，直接取缓存里面的数据，有时就会带来后台数据改变但是前
        //台却没有及时更新的问题
        //解决方法 时间戳或者在参数中添加一个随机数
   </script>    
</body>
</html>

获取服务器的本地时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script>
        var content = document.getElementById('content');
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            //创建通信对象
            var xhr = new XMLHttpRequest();
            //创建一个请求，配置参数，请求类型(post/get),url地址,是否异步
            xhr.open('get','wenben/one.txt',true);
            //发送请求
            xhr.send();
            //指定接收回来的内容，就绪状态改变时触发
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    //获取服务器的时间 而不是本地时间
                    console.log(xhr.getResponseHeader('Date'))
                    var time = xhr.getResponseHeader('Date');
                    console.log(Date.parse(time));
                    var now =new Date();
                    console.log(Date.parse(now));
                   
                    console.log(Date.parse(time) - Date.parse(now));
                    //代表接收完文件
                    content.innerText = xhr.responseText;
                }
            }

        }

    </script>    
</body>
</html>

图片的无限滚动的瀑布流的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        background:lightgray;
    }
    .outer{
        width: 800px;
        margin:0 auto;
        position: relative;
    }
    .grid{
        width:240px;
        position:absolute;
        padding: 10px;
        border-radius:15px;
        background:#fff;
    }
    .grid img{
        width:240px;
    }
</style>
<body>
    <div class="outer">
        <div class="grid">
            <img src="images/0.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/1.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/2.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/3.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/4.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/5.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/6.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/7.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/8.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/9.png" alt="">
            <p>图片描述图片描述图片描述片描述图片描述图片描述图片描述图片描述</p>
        </div>图
        <div class="grid">
            <img src="images/10.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/11.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
    </div>
</body>
<script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
   window.onload = function(){
       var grids = $('.grid');
       grids.each(function(){
           var sum = 0;
           for(var i=$(this).index()-3;i>=0;i-=3){
               sum+=grids.eq(i).outerHeight()+20
           }
         $(this).css({
             'left':$(this).index()%3*270,
             'top':sum
         })  
       })
   }
</script>
</html>

图示：


瀑布流.png

图片的无限滚动的瀑布流的实例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        background:lightgray;
    }
    .outer{
        width: 800px;
        margin:0 auto;
        position: relative;
    }
    .grid{
        width:240px;
        position:absolute;
        padding: 10px;
        border-radius:15px;
        background:#fff;
    }
    .grid img{
        width:240px;
    }
</style>
<body>
    <div class="outer">
        <div class="grid">
            <img src="images/2.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/1.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/0.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/3.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/4.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/5.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/6.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/7.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/8.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/9.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/10.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
        <div class="grid">
            <img src="images/11.png" alt="">
            <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
        </div>
    </div>
</body>
<script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="underscore.js"></script>
<script>
   window.onload = function(){
       var grids = $('.grid');
       var collectHeight = [0,0,0];

       grids.each(function(){

           var minHeight = _.min(collectHeight);
           var minIndex = _.indexOf(collectHeight,minHeight);

           $(this).css({
               top:minHeight,
               left:minIndex*270
           });

           collectHeight[minIndex]+=$(this).outerHeight()+20;
       });
   }
</script>
</html>

如图


瀑布流2.png

图片的无限滚动的瀑布流的实例三 滚动请求加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0
        }

        body {
            background-color: #ccc;
        }

        .waterfall {
            width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .grid {
            width: 240px;
            position: absolute;
            background-color: #fff;
            padding: 10px;
            border-radius: 15px;
        }

        .grid img {
            width: 240px;
        }

        .loading {
            width: 800px;
            margin: 0 auto;
            line-height: 30px;
            background-color: gold;
            color: white;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="waterfall" id="waterfall">

    </div>
    <div class="loading">
        正在加载....
    </div>
    <script type='text/template' id="grid_template">
         <div class = 'grid'>
              <img src="<%=imgurl%>" alt="">
              <p><%=content%></p>
              <p><%=author%></p>
         </div>
    </script>
    <script src="jquery-1.12.1.min.js"></script>
    <script src="underscore.js"></script>
    <script src="template.js"></script>
    <script>
        //得到外层容器
        var $waterfall = $('#waterfall');
        //得到模板字符串
        var templateStr = $('#grid_template').html();
        // //生成数据绑定函数
        //var complie = _.template(templateStr);
        //用数组存档当前三列总高度
        var collectHeight = [0,0,0];
        
        var page = 1;
        //数据请求以及模板渲染
        function getDataRender(page){
            $.get('./json/json'+page+'.txt?t='+Date.parse(new Date()),function(data){
                console.log(data);
                var dataObj = JSON.parse(data);
                console.log(dataObj);
                console.log(dataObj.news.length);
                if(dataObj.news.length==0){
                    $('.loading').show().html('已经没有数据了');
                    return false;
                }else{
                    _.each(dataObj.news,function(objKeys){
                       //console.log(objKeys);
                       var image = new Image();
                       image.src = objKeys.imgurl;
                       $(image).load(function(){
                           //如果使用template.js的模板
                          var domStr = template(templateStr,objKeys);
    
                         //如果使用_.template();
                        //  var domStr = complie(objKeys);
                        // console.log(domStr);
                         var $grid = $(domStr);
                         $waterfall.append($grid);

                         //为grid来定位
                         var minHeight = _.min(collectHeight);
                         var minIndex = _.indexOf(collectHeight,minHeight);
                         $grid.css({
                             'top':minHeight,
                             'left':minIndex*270
                         });
                         collectHeight[minIndex] += $grid.outerHeight() +20;
                         $waterfall.css('height',_.max(collectHeight));
                         //隐藏loading
                         $('.loading').hide();
                       });
                       lock = true;
                    });
                    
                }
            })
        };
        getDataRender(page);
        //监听窗口 滚动到一定距离再一次请求
        var lock = true;
        $(window).scroll(function(){
            if(!lock)  return;
            console.log($(window).scrollTop());
            console.log($(document).height());
            console.log($(window).height());
            var scrollTopH = $(window).scrollTop();
            var chaHeight = $(document).height()-$(window).height();
            if(scrollTopH/chaHeight>=0.99){
                $('.loading').show();
                setTimeout(() => {
                    page++;
                    getDataRender(page);
                }, 1000);
                lock = false;

            }
        })
    </script>
</body>

</html>

如下图所示


瀑布流滚动加载

相关文章

网友评论

      本文标题：02Ajax请求的使用详解以及实例，含源码

      本文链接：https://www.haomeiwen.com/subject/nugzsctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|02Ajax请求的使用详解以及实例，含源码|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！