用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"}
});