ajax之跨域请求-- JSONP（四）

跨域的产生：

当我们所请求的地址，与我们不满足同源策略（即同协议、同域名、同端口），就会产生跨域

比如：在http://localhost:8080/index.html 请求以下地址
http://localhoster:8080/index.html //不同域名，产生跨域
https://localhost:8080/index.html //不同协议，产生跨域
http://localhost:8081/index.html //不同端口，产生跨域
http://localhost:8080/index.html //同一协议、同一域名、同一端口、不同文件、不产生跨域

JSONP（Json width Padding）的概念：

概念： 使用script标签作为ajax传输的技术
使用script的原因： script标签的不受同源策略影响

简单理解jsonp的实现原理：

1、在资源加载进来之前定义好一个callback，接收一个参数（这个参数就是我们的数据），在callback中是我们要做的事情
2、当我们需要数据的时候，动态生成script标签加载对应远程文件资源，并将我们要执行的函数，函数名传给后端。
3、数据加载进来之后，会做为前面前定义好的函数的参数，且执行这个函数

例子

要求1：有一个btn 按钮，需要在点击这个按钮之后，再来加载相应的数据

//-------------js文件------------------------------
<script>
	function callback(data){  //定义一个函数，参数为我们要获取的数据
		console.log(data)
	}
</script>
<script>
	btn.onclick = function(){
		var Oscript = document.createElement('script');
		Oscript.src = 'a.php'  //  a.php：即要加载的数据地址
		document.body.appendChild(Oscript)
	}
</script>


//-------------一个简单的php文件，暂时命名为a.php
<?php
//定义一组数据
$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');

//输出一个函数，并把json格式的数据包含在个函数中
echo 'callback('.json_encode($arr1).');';  

要求2：有btn1 、btn2连个按钮，点击不同的按钮对数据做不同的操作

//----------js文件------------------
<script>
	function fn1(data){  //定义一个函数，参数为我们要获取的数据
		console.log(data) 
	}
	function fn2(data){
		alert(data) 
	}
</script>
<script>
	btn1.onclick = function(){
		var Oscript = document.createElement('script');
		Oscript.src = 'a.php?callback=fn1'  //  callback是要传给后端的参数，fn12为我们要执行的函数
		document.body.appendChild(Oscript)
	}
	btn2.onclick = function(){
		var Oscript = document.createElement('script');
		Oscript.src = 'a.php?callback=fn2'  //  将要执行的函数传给后端
		document.body.appendChild(Oscript)
	}
</script>

//----------php文件------------------
<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';  //判断是否有传参数，默认为num
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1';

//定义arr1 和arr2 两组数据
$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee');

if ($t == 'num') { //如果是num 的话，就返回arr 中的数据，否则返回arr2中的数据
	$data = json_encode($arr1);
} else {
	$data = json_encode($arr2);
}

//动态输出callback，并把相应的数据包含在个函数中，这样前端直接传
echo $callback.'('.$data.');';  

使用这种方式处理跨域需要满足以下条件

1、用户运行JS运行，否则网站就取不到数据
2、所获取的数据内容必须是合法的javascript代码