1.同源策略
- 同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域
- 同源策略主要为了保证浏览器的安全性
- 在同源策略下，浏览器不允许Ajax跨域获取服务器数据
图解：
跨域.png
2.资源异步加载
<script type="text/javascript" async
src="http://tom.com/data.php?flag=1"></script>
3.jsonp的原理分析
html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
/*
hello就是回调函数
*/
function hello(data){
console.log(data);
}
var script = document.createElement('script');
script.src = 'http://tom.com/data.php?_cb=hello&username=zhangsan&password=123';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
</script>
</head>
<body>
</body>
</html>
后台php页面：
<?php
$data = 'ddd';
echo 'hello($data)';
?>
注意：在js中的函数必须挂载到window对象的下面，否者会访问不到。
这就是jsonp的本质：动态创建script标签，然后通过它的src属性发送
跨域请求，然后服务器端响应的数据格式为【函数调用（foo(实参)）】，
所以在发送请求之前必须先声明一个函数，并且函数的名字与参数中传递的
名字要一致。这里声明的函数是由服务器响应的内容（实际就是一段
js代码-函数调用）来调用据格式为【函数的调用hello()】
4.jQuery使用jsonp 获取数据
$.ajax({
type:'get',
url:'http://tom.com/json.php',
dataType:'jsonp',
data:{},
jsonp:'cb', //改变jsonp的名字
jsonpCallback:'abc'//返回回调函数的名字
success:function(data){
console.log(data);
},
error:function(data){
console.log(data);
}
})
<?php
$cb=$_GET[callback];
$arr=array("username"=>"zhangsan");
echo $cb.'('.json_encode($arr).')';
?>
封装jsonp
function ajax(obj){
// jsonp仅仅支持get请求
var defaults = {
url : '#',
dataType : 'jsonp',
jsonp : 'callback',
data : {},
success:function(data){console.log(data);}
}
for(var key in obj){
defaults[key] = obj[key];
}
// 这里是默认的回调函数名称
// expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
if(defaults.jsonpCallback){
cbName = defaults.jsonpCallback;
}
// 这里就是回调函数，调用方式：服务器响应内容来调用
// 向window对象中添加了一个方法，方法名称是变量cbName的值
window[cbName] = function(data){
defaults.success(data);//这里success的data是实参
}
var param = '';
for(var attr in defaults.data){
param += attr + '=' + defaults.data[attr] + '&';
}
if(param){
param = param.substring(0,param.length-1);
param = '&' + param;
}
var script = document.createElement('script');
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
// abc({"username":"zhangsan","password":"123"})
}
