Ajax第三节

用户3461357

发布于 2019-08-02 15:01:24

1.4K0

发布于 2019-08-02 15:01:24

文章被收录于专栏：web前端基地web前端基地

瀑布流案例

封装jQuery瀑布流插件

思路分析

  /**
   * 实现思路分析:
   * 1. 找到父容器, 获取父容器宽度
   * 2. 找到子容器, 获取子容器宽度, 一行排 5 个
   * 3. 根据父容器, 子容器的以及列数, 计算间隔 (space)   间隔: (父容器宽 - 子容器宽 * 列数) / (列数 - 1);
   * 4. 遍历子元素, 设置子元素的位置
   *  
   *    初始化一个高度数组 arr = [0, 0, 0, 0, 0];
   *
   *    第一行:
   *      left: 索引值 * (子元素宽度 + 间隔)
   *      top: 0
   *
   *    其他行:
   *      left: 数组中最小值的索引 * (子元素宽 + 间隔)
   *      top: 数组中最小值 + 间隔
   *
   * 5. 更新数组中的最小值, 加上添加的元素的高和间隔
   */

代码参考

$(function() {

    // 1. 获取父元素和子元素, 以及他们的宽高
    var $box = $('.box');
    var $items = $box.children();
    var boxWidth = $box.width();  // 获取父元素的宽度
    var itemWidth = $items.width();  // 获取子元素的宽度
    var columns = 5; // 一行排 5 个元素
    // 2. 计算间隔
    var space = (boxWidth - itemWidth * columns) / (columns - 1);  // 10
    // 3. 遍历排放子元素
    var arr = [ 0, 0, 0, 0, 0 ]; // 初始化数组

    $items.each(function( index, element ) {
      if ( index < columns ) {
        // (1) 先排第一行, 索引值为 0 1 2 3 4的
        $(this).css({
          left: index * ( itemWidth + space ),
          top: 0
        });
        // 将各个盒子高度按顺序更新到数组中
        arr[index] = $(this).height();
      }
      else {
        // (2) 其他行, 找最小列高度 和 最小列索引
        var min = arr[ 0 ];  // 假定最小值是第一列
        var minIndex = 0;
        // 求得最小值和最小值索引
        for ( var i = 0; i < arr.length; i++ ) {
          if ( min > arr[i] ) {
            min = arr[ i ];
            minIndex = i;
          }
        }
        // 设置位置
        $(this).css({
          top: min + space,
          left: minIndex * ( itemWidth + space )
        })
        // 更新数组
        arr[ minIndex ] = $(this).height() + min + space;
      }

    })
    // 求最大列
    var maxHeight = Math.max.apply( null, arr );
    $box.height( maxHeight );
  })

简化版代码参考

$.fn.waterFall = function() {
  // 1. 获取父元素和子元素, 以及他们的宽高
  var $box = $(this);
  var $items = $box.children();
  var boxWidth = $box.width();  // 获取父元素的宽度
  var itemWidth = $items.width();  // 获取子元素的宽度
  var columns = 5; // 一行排 5 个元素

  // 2. 计算间隔
  var space = (boxWidth - itemWidth * columns) / (columns - 1);  // 10
  
  console.log( space );

  // 3. 遍历排放子元素
  var arr = [ 0, 0, 0, 0, 0 ]; // 初始化数组

  $items.each(function( index, element ) {
    // 找最小列高度 和 最小列索引
    var min = arr[ 0 ];  // 假定最小值是第一列
    var minIndex = 0;
    // 求得最小值和最小值索引
    for ( var i = 0; i < arr.length; i++ ) {
      if ( min > arr[i] ) {
        // 更新最小值
        min = arr[ i ];
        minIndex = i;
      }
    }
    // top: 最小值 + 间隙
    // left: 最小值索引 * ( 元素宽度 + 间隙 )
    // 设置位置
    $(this).css({
      top: min + space,
      left: minIndex * ( itemWidth + space )
    })

    // 更新数组
    arr[ minIndex ] = $(this).height() + min + space;
  })
  
  // 求最大列
  var maxHeight = Math.max.apply( null, arr );
  $box.height( maxHeight );
};

瀑布流完整版

需求分析：
1. 页面刚开始，没有任何一张图片。因此需要从通过ajax获取图片
2. 使用模版引擎将获取到的数据渲染到页面
3. 因为图片路径是从服务端获取的，加载需要时间, 渲染时需要设置宽高
4. 点击加载更多, 请求下一页数据, 注意: 加载时，显示"正在加载中..."，并且要求不能重复发送ajax请求
5. 给window注册scroll事件，当触底时，需要动态的加载图片。(规定: 最后一张图片开始显示在屏幕中时, 加载图片)
6. 当服务端返回图片数量为0时，提示用户没有更多数据。

接口文档

//接口说明：瀑布流分页数据
//接口地址：data.php
//请求方式：get
//接口参数：page 当前是第几页    pageSize 当前页需要显示多少条
//返回类型  json
//返回数据：
{
  page: 2,
    items: [
      {path: "./images/1.jpg",text:'', height: 280, width: 232},
      {path: "./images/2.jpg",text:'', height: 164, width: 232},
      ...
    ]
}
      
page   下一页的页码
items  返回当前页的数据
path 图片地址
text 文字
height 图片高度
width 图片宽度

同源与跨域

同源

同源策略的基本概念

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

协议相同
域名相同
端口相同

举例来说，这个网址http://www.example.com/dir/page.html协议是http://，

域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。

http://www.example.com/dir2/other.html：同源

file:///F:/phpStudy/WWW/day01/04-demo/04.html 不同源(协议不同)
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

同源策略的目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

同源策略的限制范围

随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。

1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 无法获得。
3. AJAX 请求在浏览器端有跨域限制

虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域。

跨域

【演示跨域问题.html】

jsonp( 无兼容性问题 )

JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。原理：服务端返回一个定义好的js函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合

script 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件。类似的还有img和link标签

<!--不受同源策略限制的标签-->
<img src="http://www.api.com/1.jpg" alt="">
<link rel="stylesheet" href="http://www.api.com/1.css">
<script src="http://www.api.com/1.js"></script>

jsonp演化过程1

php文件

header("content-type:text/html;charset=utf-8");
echo "alert(1111)";

html文件

<script src="http://www.api.com/testjs.php"></script>

原理：其实src的路径是什么文件不重要，无论引入js文件还是php文件，最后返回给浏览器的都是字符串，因此我们script标签是可以引入一个php文件的。

jsonp演化过程2

php文件

header("content-type:text/html;charset=utf-8");
echo "var a = 118;";

html文件

<script src="http://www.api.com/testjs.php"></script>
<script>
  //a打印出来了118
  console.log(a);
</script>

我们现在做到了一件事情，从不同源的php文件中获取到了数据

缺点：获取数据的script标签必须写在使用的script标签的前面，必须保证先有数据才能对数据进行渲染。

jsonp演化过程3

php代码

header("content-type:text/html;charset=utf-8");
$arr = array(
    "name"=>"zs",
    "age"=>18
);
$result = json_encode($arr);
//这是一段js函数的调用的代码，$result就是我们想要的数据
echo "func($result)";

js代码

<script>
  function func(data) {
    console.log(data);
  }
</script>
<script src="http://www.api.com/testjs.php"></script>

缺点：后端必须知道前端声明的方法的名字，后端才能调用。

jsonp演化过程4

php代码

header("content-type:text/html;charset=utf-8");
$arr = array(
    "name"=>"zs",
    "age"=>18
);
$result = json_encode($arr);
//这是一段js函数的调用的代码，$result就是我们想要的数据
echo $_GET['callback']."($result)";

javascript代码

function fun(data) {
  console.log(data);
}
var button = document.querySelector("button");
button.onclick = function () {
  var script = document.createElement("script");
  script.src = "http://www.api.com/testjs.php?callback=fun";
  document.body.appendChild(script);
}

说白了，jsonp的原理就是借助了script标签 src 请求资源时, 不受同源策略的限制.
在服务端返回一个函数的调用，将数据当前调用函数的实参。
在浏览器端，需要程序要声明一个全局函数，通过形参就可以获取到服务端返回的对应的值

jsonp原理大家需要知道，但不用太过于去纠结这个原理，因为jquery已经帮我们封装好了，我们使用起来非常的方便。

jquery对于jsonp的封装

//使用起来相当的简单，跟普通的get请求没有任何的区别，只需要把dataType固定成jsonp即可。
$.ajax({
  type:"get",
  url:"http://www.Jepson.com/testjs.php",
  dataType:"jsonp",
  data:{
    uname:"Jepson",
    upass:"123456"
  },
  success:function (info) {
    console.log(info);
  }
});

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-07-05，如有侵权请联系 cloudcommunity@tencent.com 删除

php