1、理解jsonp

什麼是跨域？

簡單的來說，出於安全方面的考慮，頁面中的JavaScript無法訪問其他伺服器上的資料，即“同源策略”。而跨域就是通過某些手段來繞過同源策略限制，實現不同伺服器之間通訊的效果。

具體策略限制情況可看下錶：

什麼是JSONP？

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式，而JSONP（JSON with Padding）則是JSON 的一種“使用模式”，通過這種模式可以實現資料的跨域獲取。 

JSONP跨域的原理

在同源策略下，在某個伺服器下的頁面是無法獲取到該伺服器以外的資料的，但img、iframe、script等標籤是個例外，這些標籤可以通過src屬性請求到其他伺服器上的資料。利用script標籤的開放策略，我們可以實現跨域請求資料，當然，也需要服務端的配合。當我們正常地請求一個JSON資料的時候，服務端返回的是一串JSON型別的資料，而我們使用JSONP模式來請求資料的時候，服務端返回的是一段可執行的JavaScript程式碼。

最簡單的例子：

檔案目錄就兩個檔案：

下面演示用mm.html來載入test.txt檔案中的資料。test.txt模擬跨域要取的資料檔案，mm.html模擬現在要渲染的頁面。

 test.txt中的資料格式為：

fun(
	{
		"result" : [
			{
				"xingming":"小明",
				"nianling" : 12,
				"sex" : "男"
			},
			{
				"xingming":"小紅",
				"nianling" : 13,
				"sex" : "女"
			},
			{
				"xingming":"小綠",
				"nianling" : 9,
				"sex" : "女"
			}
		]
	}
);

mm.html中程式碼為：

	<script type="text/javascript">
	function fun (data) {
		console.log(data)
	}
	</script>
	<script type="text/javascript" src="test.txt"></script>

控制檯能顯示獲取到的資料：

。。。。。。。。。。。。。最簡單的例子完工，我表述不清，大家可以自行復制程式碼執行理解下。。。。。。。

 2、把js原生封裝成了一個通用元件

程式碼如下：

		function myjsonp(URL,callback,callbackname){
			//給系統中建立一個全域性變數，叫做callbackname，指向callback函式
			//定義
			window[callbackname] = callback;
			//建立一個script節點
			var oscript = document.createElement("script");
			//和image不一樣，設定src並不會發出HTTP請求 
			oscript.src = URL;
			oscript.type = "text/javascript";
			//script標籤的請求是在上樹的時候發出，請求的是一個函式的執行語句
			document.head.appendChild(oscript);
			//為了不汙染頁面，瞬間把script拿掉
			document.head.removeChild(oscript);
		}


		//使用
		myjsonp("http://sclub.jd.com/productpage/p-1217508-s-0-t-3-p-1.html?callback=abcdefg",function(data){
			console.log(data);
		},"abcdefg");

3、jquery中jsonp的用法 

		$.ajax("test.txt",{
			//JSON跨域的時候要寫一個dataType，注意不是type而是dataType
			"dataType" : "jsonp",
			//要定義的函式名字，因為JSONP不缺執行，缺定義
			"jsonpCallback" : "fun",
			//資訊回來之後執行的事情
			"success" : function(data){
				console.log(data);  //這裡得到了請求的資料
			}
		});

test.txt格式為：

fun(
	{
		"result" : [
			{
				"xingming":"小明",
				"nianling" : 12,
				"sex" : "男"
			},
			{
				"xingming":"小紅",
				"nianling" : 13,
				"sex" : "女"
			},
			{
				"xingming":"小綠",
				"nianling" : 9,
				"sex" : "女"
			}
		]
	}
);

最後一種就是jq封裝好的jsonp（但是這個請求走了瀏覽器控制面板的network的xhr，感興趣的可以看下jq原始碼，看他是如何封裝的），之前講的原理懂得了，這個jq的jsonp的用法記住就好了。