瀑布流、封装Ajax与跨域

一、瀑布流

1、创建图片数组

2、获得外部Div，设置相对定位

3、创建内部Div

4、循环数组拿到每一个图片元素，把他append到内部Div元素中

5、根据页面宽度/内部任何一个div的宽度，获得一行最多放几个div，从而获得外部div的宽度

6、遍历里面的div获得所有的高，将第一行的高添加到hieghtArr中

7、剩余所有行绝对定位

8、获得heightArr中最小的高的div

9、获得最小的高div的下标

10、第二行第一张图片的定位  top是最小高的div的高，left是最小高的div的offseLeft

11、变更高度数组

二、封装Ajax与跨域

因为原生的方式过去麻烦，并且大量重复代码，jQuery的方式虽然简便，但必须引入jQuery框架，而框架中不是所有内容都能用到，这会造成大量无用代码，占用资源，所以我们需要自行封装一个Ajax框架

1、提供创建xhr对象的兼容性函数

      首先创建一个js文件，命名。

 function createXhr(){

              return  window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject()；

}

2、提供发送请求的对外接口

      声明对外发送的接口，命名为ajax

      为接口设置一个json格式的参数接收数据，命名

3、设计并约定对外接口的参数规格

      method    请求发送方式     “get”“post”

      data          发送请求参数         若无参数可以不写

      async        表示同步异步         默认为true

      url              请求发送地址        后台url文件

      success      请求成功回调         成功后自动执行回调函数

      error          请求失败回调         失败后自动执行回调函数

4、实现对外接口中参数处理

      get就拼接地址  post就把formData作为参数传进去

5、实现对外接口中的响应处理

     根据请求方式设置回调函数

6、实现对外接口中发送处理

     get就不传   post就把jsonObj.data传进去

7、设置命名，避免全局函数

     因为js文件中尊在大量全局变量，而全局变量会对文件造成影响，我们可以采用封装，避免内部创建的变量对全局的影响

三、跨域

1、浏览器同源政策

      例如  http：//www.taobao.com/day1/page.html

               协议是http://

               域名是www.taobao.com

                端口是80(默认)

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

       目前如果非同源，共有三种行为受到限制

             1、cookie、LocalStorage和IndexDB无法获取

             2、dom无法获得

             3、AJAX请求不能发送

        但有些时候也会受到同源政策而受到影响

         因此我们要规避掉上述限制的手段，就是跨域

2、JSONP跨域

      JSONP是是服务器与客户端通信最常用的方法

       实际上是利用了script标签引入js文件，并解析执行

       语法：在html中通过script标签，并利用script标签发起跨源请求

                  var script = document.creatElement('script');

                  script.setAttribute("type","text/javascript");

                  script.src="跨源url地址?[前后端约定回调关键词]=[回调函数名]"

                  document.body.appendChild(script);

                  在服务器对应php文件中通过拼接字符串，模拟函数调用，并将要返回的数据通过回调函数参数返回

                  $response = $_GET['前后端约定回调关键词']

                  echo $response."(".json_encode(要返回的数据).")";

                  在html页面中，显示写出回调函数，这样当跨源请求完成后对应回调函数会自动执行