同源策略:
1.是指浏览器的一种安全策略,所谓的同源是指请求的url地址中的协议、域名、端口都相同只要其中之一不相同就是跨域。
2.同源策略主要是为了保证浏览器的安全性
3.在同源策略下,浏览器不允许ajax跨域获取服务器数据
但是跨域请求只能使用个体请求方式,目前提供get跨域请求
为了解决ajax不能跨域的问题,我们有如下方法:
1.jsonp:实现ajax跨域请求数据
2.document.hash+iframe
3.window.name+iframe
4.window.postMessage
5.第三方插件解决跨域flash
跨域请求数据的方法
静态的script标签的src属性进行跨域请求数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://tom.com/data.php" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
console.log(data);
console.log(data.name);
console.log(data.pwd);
</script>
</head>
<body>
</body>
</html>
php代码
<?php
$arr=array('name'=>'zhangsan','pwd'=>'123456');
$cb=$_GET['_cb'];
$name=$_GET['name'];
$pwd=$_GET['pwd'];
echo $cb.'({"username":"'.$name.'","pwd":"'.$pwd.'"})';
?>
动态创建的script标签的src属性进行跨域请求数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" async>
var script=document.createElement('script');
script.src='http://tom.com/data.php';
var head=document.getElementsByTagName('head')[0];
head.appendChild(script);
function foo(data){
console.log(data);
}
</script>
</head>
<body>
</body>
</html>
php代码
<?php
$arr=array('name'=>'zhangsan','pwd'=>'123456');
$cb=$_GET['_cb'];
$name=$_GET['name'];
$pwd=$_GET['pwd'];
echo $cb.'({"username":"'.$name.'","pwd":"'.$pwd.'"})';
?>
jsonp与jQuery的使用
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$.ajax({
type:"get",
url:"http://tom.com/jsonp.php",
dataType:'jsonp', // 实现跨域请求
//callback=jQuery21109469809573287793_1564657482777({"username":"lisi","pwd":"123"})
jsonp:'cb',//
// jsonp属性的作用就是自定义参数名字(callback=abc),这里的名字cb指的是等号的前面的
// 后端根据这个键 获取方法名, jquery的默认参数名称是callback
jsonpCallback:'abc',// 改变默认的回调函数的名称 ==>abc
success:function(data){
console.log(data);
},
error:function(){
console.log('error');
}
})
})
})
</script>
</head>
<body>
<input type="button" value="点击" id="btn" />
</body>
</html>
php代码
<?php
$arr=array("username"=>"lisi","pwd"=>"123");
$cb=$_GET['cb'];
echo $cb.'('.json_encode($arr).')';
?>