JS、Jquery里面的jsonp

参考个人博客：http://www.zhuzhuman.com/nav-1/type-1/article/20.html
      我们平常使用ajax从前端发起请求获取数据，一般请求的地址都是和当前网页是同源的，即不能进行跨域请求，（跨域：主域名、子域名、端口号其中有一个不同就属于跨域）；
      Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
      虽然普通ajax不能跨域，但是script标签是可以跨域引用的，即JS可以跨域使用。因此：
      jsonp实现跨域请求数据的原理：jsonp允许服务器在后台生成一段js代码(回调函数)，将数据写进回调函数里，然后返回给页面，页面接收回调函数后在页面执行，可获取到数据。注：因此，jsonp返回给页面的不是数据本身，而是回调函数，数据可从回调函数中获取。

举例：

1. jquery写法：
   第一种写法：ajax

<script type="text/javascript">
	// 前端通过jquery发起ajax请求
	$.ajax({
		type : "GET", // 获取方式，好像jsonp不支持post...
		url : "http://127.0.0.1/jsonp/jsonp.php", // 请求的地址
		async:false, // 同步
		dataType : "jsonp", // 数据类型，必须是jsonp，这样才能进行跨域操作
		data : "", // 传给后台的数据，可省略。
		jsonp : "callback", // 用于指定回调函数，可为任意名字，但是必须和后台用GET获取用的名字保持一致。
		jsonpCallback : "myCallBack", // 自定义回调函数名，可省略，默认jq会自动随机生成函数名传给后台。
		success : function (data) { // 请求成功时执行的函数，其中data就是后台数据。
			console.log(data); 
		},
		error : function (e) {
			console.log("e");
		}
	})
</script>

第二种写法: get请求

<script type="text/javascript">
	$.getJSON('http://127.0.0.1/jsonp/jsonp.php?callback=?',function (data) {
		console.log(data);
	}); // ?后面的callback=?用来标识是jsonp请求。其中callback必须和后台get获取数据时用的名字一样。
</script>

2.原生JS实现jsonp

function jsonp(options) {
	// 请求参数设置
	options = options || {};
	// 创建js标签用于执行jsonp
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    // 给window绑定和callback参数值相同的函数，用于获数据
    var _callback = options.callback;
    window[_callback] = function (data) {
    	// 形参data 用于接收后台返回的 callback函数 的实参(数据)
    	// 获取数据成功后清除jsonp的js
    	oHead.removeChild(oScript);
    	// 清除加载超时的定时函数(加载成功，超时函数不用执行了)
    	clearTimeout(oScript.timer);
    	// 清除回调函数
    	window[_callback] = null;
    	// 执行请求成功的回调函数，把callback里的参数再传给succeed函数。succeed 函数里面执行对数据的操作
    	options.success && options.success(data);
    }
    // js发起请求，请求成功后返回的代码是让 callback 执行的，而且实参就是后台数据
    var url = options.url.indexOf('?') > -1 ? options.url + '&callback=' + options.callback : options.url + '?callback=' + options.callback;
    if(options.data) {
    	for(var k in options.data) {
    		url += '&' + k + '=' + options.data[k];
		}
    }
    oScript.src = url;
    oHead.appendChild(oScript);
    // 超时函数，请求超时走error逻辑
    if (options.timeout) {
    	oScript.timer = setTimeout(function() {
    		// 错误后清除回调函数
    		window[_callback] = null;
    		oHead.removeChild(oScript);
    		// 执行error函数
    		options.error && options.error({ message: "超时" });
    	}, options.timeout * 1000);
    }
};

// 测试执行
var params = {
	url: 'http://127.0.0.1/jsonp/jsonp.php',
	callback: 'getback',
	timeout: 10,
	data: {
		param1: 'a',
		param2: 'b'
	},
	success: function(data) {
		console.log(data);
	},
	error: function(e) {
		console.log(e);
	}	
}; // 其他参数配置可根据需求添加
jsonp(params);

3. 后台文件jsonp.php写法

<?php
	// 要返回的数据
	$data = '{
		"shuju1" : "1",
		"shuju2" : "2",
		"shuju3" : "3",
		"shuju4" : "4",
		"shuju5" : "5"
	}';

	// 获取请求传过来的值，用于定义要返回的回调函数名，
	$callback = $_GET['callback']; // 中括号里的'callback'，必须和前端ajax里的的jsonp:"callback",中jsonp的值名字一样

	// 将回调函数名和数据拼接成函数的形式。数据以入参的形式传入。
	echo $callback . "(" . $data . ")";
?>