用jQuery AJAX发出JSONP请求实现跨域获取数据

JSONP全称是"JSON with Padding",我的理解就是"填充JSON"的意思.
填充到哪里?就是填充到JS函数调用时的参数里.
可见JSONP的本质就是带有JSON数据的JS函数调用,它是一句合法的JS代码.
JSONP能经过AJAX跨域请求的原理(前提)是:
浏览器不会拦截跨域输出的JS代码,就像<script>标签能跨域加载JS脚本那样.

下面以jQuery的$.ajax函数为例说明:

先用PHP开2个不一样域的HTTP服务:
php -S 127.0.0.1:8080 -t /home/eechen/www1
php -S 127.0.0.2:8080 -t /home/eechen/www2
而后是 127.0.0.1:8080 AJAX跨域请求 127.0.0.2:8080 的JSONP数据.

http://127.0.0.2:8080/jsonp.php 内容:

<?php
header('Content-Type: application/javascript'); //建议指定响应头为JS代码
echo $_GET['callback'].'('.json_encode(array('Server'=>'PHP')).')';

http://127.0.0.1:8080 经过AJAX发出JSONP请求:
 

$.ajax({
	type: "GET", //JSONP只能经过GET方式发出请求
	url: "http://127.0.0.2:8080/jsonp.php",
	data: {name:"ele", pass:"123"},
	dataType: "jsonp"
	// 发出的GET请求 http://127.0.0.2:8080/jsonp.php?callback=jQuery112400641287495426539_1477561917569&name=ele&pass=123&_=1477561917570
	// 返回的JSONP数据 jQuery112400641287495426539_1477561917569({"Server":"PHP"})
}).done(function(data){
	console.log(data); //data即为获取到的JSON对象{"Server":"PHP"}
});