瀑布流、封装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页面中，显示写出回调函数，这样当跨源请求完成后对应回调函数会自动执行

瀑布流、封装Ajax与跨域

猜你喜欢