异域传值与JSONP详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zhoulib__/article/details/98207141

异域传值：就是两个域名、端口中有一个不同的网页，之间互相传值
ajax异步刷新是通过获取别的网页的信息来对自己的页面进行加载，但是只能在本地进行传值，不能对其它域名里的数据进行获取，这样就会很麻烦所以出现了异域传值，这样做也可以提高安全性，一个网页通过另一个网页留下的接口，来获取另一个网页的数据。

jsonp类型的数据可以实现异域传值，一般都是通过jQuery封装好的$.ajax()来传值；
我对$.ajax()理解了一下重现封装

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button>点我</button>
		<script type="text/javascript" src="../jquery-2.1.0.js" ></script>
		<script src="ajaxscript1.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("button").click(function(){
					ajax({
						url:"http://changshi.com/lianjie.php",
						dataType:"jsonp",
						data:{name:"张山"},
						jsonp:"cb",
						success:function(data){
							console.log(data);
						}
					})
				})
			})
		</script>
	</body>
</html>

// ajaxscript1.js
function ajax(obj){ // 获取传进来的对象
	var defaults = {
		type:"get",
		url:"#",
		data:{},
		dataType:"jsonp", // 数据类型
		jsonp:"callback", // 
		jsoncallback:"",
		async:true,
		success:function(data){
			
		}
	}; // 默认的对象
	for(var k in obj){  // 给默认对象赋值
		defaults[k] = obj[k];
	}
	var parm = "";
	for(var k in defaults.data){   // 拼接
		parm += k +"=" + defaults.data[k] + "&"; 
	}
	parm.substring(0,parm.length-1);
	var m = "2.1.1"
	var cbid = 'jQuery' + ((m + Math.random()).replace(/\D/g,"")) + "_" + new Date().getTime();
	if(defaults.jsoncallback==""){
		defaults.jsoncallback = cbid
	}
//	console.log(defaults.jsoncallback);
	defaults.url = defaults.url + "?" + defaults.jsonp + "=" + defaults.jsoncallback + "&" + parm;
    var script = document.createElement("script");
    script.src = defaults.url;
    document.head.appendChild(script);
    var cbal = defaults.jsoncallback;
    console.log(cbal);
    window[cbal] = function(data){  // 回调函数
    	defaults.success(data);
    }
}

<?php
// lianjie.php
$cb = $_GET['cb'];  // 获取提交到url上的cb方法
$name = $_GET['name'];
echo $cb."('$name')"; // 将 cb("张山"); // 返回页面
?>

异域传值只支持get提交方式，只有回调函数执行结束后值，才可以被网页获取到

这种方式的衍生过程:

静态的script的src连接网页
动态的script的src连接网页
jsonp类型的数据进行传输
其中静态的页面传输，可以直接获取到异域页面的数据。但是动态的页面，必须要通过函数来获取内容，之后就出现了回调函数

ajax异域传值