php+ajax+jsonp跨域相关笔记（一）
1.虽然别人封装的库不仅考虑的内容更多，功能也更强大，但是自己封装是因为想知道原理，了解一点原理就是自己学习阶段封装库的目的。
2.jquery的ajax功能方法
◆$.get(url,data,callback,type);，url表示发送路由地址，data表示传递的参数（json对象）,callback表示请求发送完毕后的回调函数（可以从中获取服务器端返回的值），type表示返回的数据类型，type取值：xml、 html、script、json、text、 _default【 $.get("1.php",{name:"熊猫",age:12},function(value){
},"json")
】，但是参数的顺序是可以替换，但最好不要替换，内部没有做很多的逻辑判断，擅自替换会导致意外发生，$(url,callback,data,datatype)是可以【
$.get("1.phh",function(value){
},{name:"熊猫",age:12},"json");
】，data部分的数据无法进行传递了，虽然没有报错，但是达不到预期的结果了，所以请严格按照$.get(url,data,callback,type);书写。
◆$.post(url,data,callback,type);和$.get一样，区别在于，一个发送post请求一个发送get请求。
◆$.ajax({
url:'1.php',//请求的url地址
type:'post',//默认是get，可以指定get、post
dataType:'json',//数据类型取值：xml、 html、script、json、text、jsonp、 _default
success:function(value){
},//请求成功后的回调函数
data:{name:"熊猫",age:12},//传递的url参数（可以写js对象）
beforeSend:function(ajax){
//return false; 会取消本次请求
},//发送请求之前调用的匿名函数，可以使用return false;来阻止本次请求，一般用户验证用户的数据是否填了或合格，也可以用来添加其它请求头
error:function(msg){
}//请求失败之后会调用
});，
3.推荐一个jquery在线查询手册，一个中国人写的：http://hemin.cn/jq/。
4.php中判断一个数组中是否存在这个元素的方法
◆in_array($element,$arr);，第一个参数是元素，第二个参数是数组，如果存在就返回true，反之返回false。
5.jquery的动画延时方法
◆delay(2000)，表示后面的动画或者行为延时2000毫秒。
6.jquery中的动画都有回调函数，都是动画执行完毕后，就会执行回调函数。
7.异步刷新实现页面瀑布流
◆页面的内容宽度一样，高度层次错落，称之为瀑布流
8.给jquery写插件
◆使用原型的方式【
◇$.outMsg=function(){}
◇直接给jquery对象扩展方法，可以使用$或jquery单词来调用
◇$.fn.outMsg=function(){
//这么做是为了用于区分jquery的dom对象和js的dom对象
var $_this=this;
$_this.css("background-color","yellow");//这里的this代表jquety的dom元素伪数组对象，也就是你通过$(selector)获取到的jquery的dom元素伪数组对象
//为了实现链式书写
return $_this;
}
◇给通过$或者jquery根据选择器（$(selector)）获取到的dom元素对象（伪数组）扩展方法
】
◆使用jquery方法的方式【
◇$.extend({
outMsg:function(){
}
})
◇上面这种原理是内部通过循环遍历取出对象的属性，然后再使用原型的方式给jquery对象扩展方法，其调用方式是：$.outMsg();//是使用$符号或者jquery单词来调用的。
◇$.fn.extend({
outMsg:function(){
//这么做是为了用于区分jquery的dom对象和js的dom对象
var $_this=this;
$_this.css("background-color","yellow");//这里的this代表jquety元素伪数组对象，也就是你通过$(selector)获取到的jquery元素伪数组对象
//为了实现链式书写
return $_this;
}
})
◇上面这种方式原理也是内部通过循环遍历取出对象的属性，然后再使用原型的方式来给通过jquery选择器获取到的dom元素对象（伪数组）扩展方法，其调用方式有点不同：$(seletor).outMsg();//是给通过jquery获取到的dom元素对象来调用的。
】
◆jquery插件命名一般会遵守如下规范【
◇jquery.插件名.js
◇插件中的方法一般插件名是一致
◇遵守规范后，在使用的时候一眼就看出来了
◇
◇
】
9.php中通过count函数来后去数组的长度
◆count($arr);//数组没有length属性，所以只能使用count来获取数组长度
◆
10.页面瀑布流的原理（瀑布流的算法）
◆获取指定父容器的宽度，及子容器的宽度（子容器宽度都是一样的）。
◆用父容器的宽度除以子容器的宽度然后向下取整，得到父容器一行能够放下多少个子容器
◆然后获取父容器中子容器的外边距，（父容器宽度-子容器宽度*一行能放下的个数）/（一行能放下的个数-1）
◆之后定义一个新高度数组，这个数组中装的都是新的一行子容器距离父容器（0,0）点的y轴上的距离
◆设置子容器的坐标的手法是，先遍历每个子元素，然后通过for循环对新高度数组进行判断，获取y轴上距离父容器最近的那个元素距离的新高度数组的元素及新高度数组的索引。
◆在遍历子元素中，给每一个子元素设置css样式，top属性则为y轴上距离父容器最近的那个元素的高度，left属性值则为对应的新高度数组索引*（子元素宽度+子容器的外边距）
◆然后更新一下那个y轴上距离父容器最近的那个元素的新高度数组的元素的值，值等于（新高度数组元素之前的值+子容器的真正高度+子容器的外边距)，这样每次使用for循环对新高度数组进行判断时都是新的数据
◆最后获取新高度数组中最大的那个值，然后设置父容器的高度为获取到的最大的那个值，这样就能准确的即时更新数据了，比如滚动条拉到什么位置就向后台请求获取新数据。
◆
11.iframe标签
◆（<iframe src="url"></iframe>）,可以嵌入别的网站的地址，如果你设置了高度宽度铺满整个页面，那时就会像真的一样了。
◆获取iframe对象，然后通过iframe对象获取iframe嵌入的网页的window对象，然后通过window对象可以获取document对象，再通过document对象就能够操作dom了。
◆所以很多钓鱼网站基本可以通过iframe来实现了，貌似是在真的网站中登陆，实际上在你输入用户名和密码之后，你的信息就已经被钓鱼网站获取到了，并且还是明文，而且是在你没有登陆的时候，因为钓鱼网站可以通过iframe标签获取到你操作的那个网页的dom对象，获取到dom对象之后就能够获取表单中的信息了。
★上面种种原因暴露出了网站的安全问题，为了解决这种问题，所以浏览器规定了ajax不允许跨域访问（发送请求），并且同时规定了网页也不能使用iframe进行跨域获取dom对象，于是以上的问题得到了简单的解决。
11.ajax中的同源及跨域
◆跨域
【
◇从一个网站的页面中去请求另外的网站，使用iframe标签，出于安全性考虑，浏览器的开发厂商已经禁止了这种行为
☆但是如果你的浏览器有问题或者你不使用浏览器，那么还是可以进行跨域的。
◇html标签中的src属性和href属性是支持跨域的。
◇
◇
】
◆同源
【
◇同源的策略是为了安全。
◇不同源也能发送请求的话，那么弄个死循环发送请求，那别人的网站的性能会出现问题，并且使用iframe标签嵌套别人的网站并且可以获取别人的网站中网页的dom对象，那么就会造成钓鱼网站的泛滥。
◇
◇
◇
】
◆
◆
12.解决不能跨域的问题方式
◆原生js的jsonp：原理是利用html标签的src属性支持跨域的特性，来使用script标签的src属性实现跨域，src属性的值也可以是一个url，并且还可以传递参数，但href和src属性发送请求都属于get请求方式，jsonp真正的使用方式一般是传递方法来实现跨域请求并获取数据的【
//前端网页
<script type="text/javascript">
function getData(data){
console.log(data);
}
</script>
<script type="text/javascript" src="url?callback=getData"></script>
//非同源的后端
<?php
echo $_GET["callback"].'('.'"数据在这里"'.')';
?>
】，其实jsonp需要与非同源的后端有约定才能实现跨域获取数据，否则只能实现跨域请求而无法实现跨域请求并获取数据，不光可以传递方法，只要约定好了，可以传递任何字符串，对方也可以返回一个js脚本库给你，原理【
◇利用src属性支持跨域
◇使用script标签
◇通过src属性的url发送get请求并且传递方法
◇服务器端获取get请求的参数并且拼接成一个调用方法的字符串（顺便传递数据字符串到方法中）
◇页面在写方法的时候可以调用方法中的形参，在页面获取到服务器端返回的字符串后，就会即时的去调用这个方法，方法被调用的时候会传递服务器端传递过来的数据到方法中去。
】。
◆jquery中的jsonp：【
//前端页面
function getData(data){
console.log(data);
}
$.ajax({
url:'01.php';
type:'get';
dataType:'jsonp';//返回类型是jsonp
jsonpCallback:'getData';//自己已经定义的函数名称
success:function(data){
console.log(data);//使用ajax的jsonp时不需要你额外定义函数了，就算你定义了也不会去执行那个函数，它只会执行success函数，返回值可以在success函数中获取
}
});
//非同源的后端
<?php
echo $_GET["callback"].'('.'"数据在这里"'.')';
?>
】
◆
◆
2.jquery的ajax功能方法
◆$.get(url,data,callback,type);，url表示发送路由地址，data表示传递的参数（json对象）,callback表示请求发送完毕后的回调函数（可以从中获取服务器端返回的值），type表示返回的数据类型，type取值：xml、 html、script、json、text、 _default【 $.get("1.php",{name:"熊猫",age:12},function(value){
},"json")
】，但是参数的顺序是可以替换，但最好不要替换，内部没有做很多的逻辑判断，擅自替换会导致意外发生，$(url,callback,data,datatype)是可以【
$.get("1.phh",function(value){
},{name:"熊猫",age:12},"json");
】，data部分的数据无法进行传递了，虽然没有报错，但是达不到预期的结果了，所以请严格按照$.get(url,data,callback,type);书写。
◆$.post(url,data,callback,type);和$.get一样，区别在于，一个发送post请求一个发送get请求。
◆$.ajax({
url:'1.php',//请求的url地址
type:'post',//默认是get，可以指定get、post
dataType:'json',//数据类型取值：xml、 html、script、json、text、jsonp、 _default
success:function(value){
},//请求成功后的回调函数
data:{name:"熊猫",age:12},//传递的url参数（可以写js对象）
beforeSend:function(ajax){
//return false; 会取消本次请求
},//发送请求之前调用的匿名函数，可以使用return false;来阻止本次请求，一般用户验证用户的数据是否填了或合格，也可以用来添加其它请求头
error:function(msg){
}//请求失败之后会调用
});，
3.推荐一个jquery在线查询手册，一个中国人写的：http://hemin.cn/jq/。
4.php中判断一个数组中是否存在这个元素的方法
◆in_array($element,$arr);，第一个参数是元素，第二个参数是数组，如果存在就返回true，反之返回false。
5.jquery的动画延时方法
◆delay(2000)，表示后面的动画或者行为延时2000毫秒。
6.jquery中的动画都有回调函数，都是动画执行完毕后，就会执行回调函数。
7.异步刷新实现页面瀑布流
◆页面的内容宽度一样，高度层次错落，称之为瀑布流
8.给jquery写插件
◆使用原型的方式【
◇$.outMsg=function(){}
◇直接给jquery对象扩展方法，可以使用$或jquery单词来调用
◇$.fn.outMsg=function(){
//这么做是为了用于区分jquery的dom对象和js的dom对象
var $_this=this;
$_this.css("background-color","yellow");//这里的this代表jquety的dom元素伪数组对象，也就是你通过$(selector)获取到的jquery的dom元素伪数组对象
//为了实现链式书写
return $_this;
}
◇给通过$或者jquery根据选择器（$(selector)）获取到的dom元素对象（伪数组）扩展方法
】
◆使用jquery方法的方式【
◇$.extend({
outMsg:function(){
}
})
◇上面这种原理是内部通过循环遍历取出对象的属性，然后再使用原型的方式给jquery对象扩展方法，其调用方式是：$.outMsg();//是使用$符号或者jquery单词来调用的。
◇$.fn.extend({
outMsg:function(){
//这么做是为了用于区分jquery的dom对象和js的dom对象
var $_this=this;
$_this.css("background-color","yellow");//这里的this代表jquety元素伪数组对象，也就是你通过$(selector)获取到的jquery元素伪数组对象
//为了实现链式书写
return $_this;
}
})
◇上面这种方式原理也是内部通过循环遍历取出对象的属性，然后再使用原型的方式来给通过jquery选择器获取到的dom元素对象（伪数组）扩展方法，其调用方式有点不同：$(seletor).outMsg();//是给通过jquery获取到的dom元素对象来调用的。
】
◆jquery插件命名一般会遵守如下规范【
◇jquery.插件名.js
◇插件中的方法一般插件名是一致
◇遵守规范后，在使用的时候一眼就看出来了
◇
◇
】
9.php中通过count函数来后去数组的长度
◆count($arr);//数组没有length属性，所以只能使用count来获取数组长度
◆
10.页面瀑布流的原理（瀑布流的算法）
◆获取指定父容器的宽度，及子容器的宽度（子容器宽度都是一样的）。
◆用父容器的宽度除以子容器的宽度然后向下取整，得到父容器一行能够放下多少个子容器
◆然后获取父容器中子容器的外边距，（父容器宽度-子容器宽度*一行能放下的个数）/（一行能放下的个数-1）
◆之后定义一个新高度数组，这个数组中装的都是新的一行子容器距离父容器（0,0）点的y轴上的距离
◆设置子容器的坐标的手法是，先遍历每个子元素，然后通过for循环对新高度数组进行判断，获取y轴上距离父容器最近的那个元素距离的新高度数组的元素及新高度数组的索引。
◆在遍历子元素中，给每一个子元素设置css样式，top属性则为y轴上距离父容器最近的那个元素的高度，left属性值则为对应的新高度数组索引*（子元素宽度+子容器的外边距）
◆然后更新一下那个y轴上距离父容器最近的那个元素的新高度数组的元素的值，值等于（新高度数组元素之前的值+子容器的真正高度+子容器的外边距)，这样每次使用for循环对新高度数组进行判断时都是新的数据
◆最后获取新高度数组中最大的那个值，然后设置父容器的高度为获取到的最大的那个值，这样就能准确的即时更新数据了，比如滚动条拉到什么位置就向后台请求获取新数据。
◆
11.iframe标签
◆（<iframe src="url"></iframe>）,可以嵌入别的网站的地址，如果你设置了高度宽度铺满整个页面，那时就会像真的一样了。
◆获取iframe对象，然后通过iframe对象获取iframe嵌入的网页的window对象，然后通过window对象可以获取document对象，再通过document对象就能够操作dom了。
◆所以很多钓鱼网站基本可以通过iframe来实现了，貌似是在真的网站中登陆，实际上在你输入用户名和密码之后，你的信息就已经被钓鱼网站获取到了，并且还是明文，而且是在你没有登陆的时候，因为钓鱼网站可以通过iframe标签获取到你操作的那个网页的dom对象，获取到dom对象之后就能够获取表单中的信息了。
★上面种种原因暴露出了网站的安全问题，为了解决这种问题，所以浏览器规定了ajax不允许跨域访问（发送请求），并且同时规定了网页也不能使用iframe进行跨域获取dom对象，于是以上的问题得到了简单的解决。
11.ajax中的同源及跨域
◆跨域
【
◇从一个网站的页面中去请求另外的网站，使用iframe标签，出于安全性考虑，浏览器的开发厂商已经禁止了这种行为
☆但是如果你的浏览器有问题或者你不使用浏览器，那么还是可以进行跨域的。
◇html标签中的src属性和href属性是支持跨域的。
◇
◇
】
◆同源
【
◇同源的策略是为了安全。
◇不同源也能发送请求的话，那么弄个死循环发送请求，那别人的网站的性能会出现问题，并且使用iframe标签嵌套别人的网站并且可以获取别人的网站中网页的dom对象，那么就会造成钓鱼网站的泛滥。
◇
◇
◇
】
◆
◆
12.解决不能跨域的问题方式
◆原生js的jsonp：原理是利用html标签的src属性支持跨域的特性，来使用script标签的src属性实现跨域，src属性的值也可以是一个url，并且还可以传递参数，但href和src属性发送请求都属于get请求方式，jsonp真正的使用方式一般是传递方法来实现跨域请求并获取数据的【
//前端网页
<script type="text/javascript">
function getData(data){
console.log(data);
}
</script>
<script type="text/javascript" src="url?callback=getData"></script>
//非同源的后端
<?php
echo $_GET["callback"].'('.'"数据在这里"'.')';
?>
】，其实jsonp需要与非同源的后端有约定才能实现跨域获取数据，否则只能实现跨域请求而无法实现跨域请求并获取数据，不光可以传递方法，只要约定好了，可以传递任何字符串，对方也可以返回一个js脚本库给你，原理【
◇利用src属性支持跨域
◇使用script标签
◇通过src属性的url发送get请求并且传递方法
◇服务器端获取get请求的参数并且拼接成一个调用方法的字符串（顺便传递数据字符串到方法中）
◇页面在写方法的时候可以调用方法中的形参，在页面获取到服务器端返回的字符串后，就会即时的去调用这个方法，方法被调用的时候会传递服务器端传递过来的数据到方法中去。
】。
◆jquery中的jsonp：【
//前端页面
function getData(data){
console.log(data);
}
$.ajax({
url:'01.php';
type:'get';
dataType:'jsonp';//返回类型是jsonp
jsonpCallback:'getData';//自己已经定义的函数名称
success:function(data){
console.log(data);//使用ajax的jsonp时不需要你额外定义函数了，就算你定义了也不会去执行那个函数，它只会执行success函数，返回值可以在success函数中获取
}
});
//非同源的后端
<?php
echo $_GET["callback"].'('.'"数据在这里"'.')';
?>
】
◆
◆
