JSONP
讀這篇文章須要5分鐘javascript
我的總結:html
jsonp:java
ajax不能跨域可是js是能夠跨域的，web
因此若是.html的某個本地script標籤中有個函數，ajax
而另外一個來自遠程的script src='remote.js'裏面寫的是運行這個函數，並傳入參數。json
那麼這個函數就能夠被運行了。跨域
將src屬性變成請求而不是寫死，就能夠動態處理函數的調用。安全
ajax是不能跨域的:服務器
可是script標籤能夠跨域app
remote.js:
alert('我是遠程文件');
一、咱們知道，哪怕跨域js文件中的代碼（固然指符合web腳本安全策略的），web頁面也是能夠無條件執行的::
local:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
二、如今咱們在jsonp.html頁面定義一個函數，而後在遠程remote.js中傳入數據進行調用：
local:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函數，能夠被跨域的remote.js文件調用，遠程js帶來的數據是：' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
remote.js:
localHandler({"result":"我是遠程js帶來的數據"});
三、聰明的開發者很容易想到，只要服務端提供的js腳本是動態生成的就好了唄，這樣調用者能夠傳一個參數過去告訴服務端 「我想要一段調用XXX函數的js代碼，請你返回給我」，因而服務器就能夠按照客戶端的需求來生成js腳本並響應了:
local:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var flightHandler = function(data){
alert('你查詢的航班結果是：票價 ' + data.price + ' 元，' + '餘票 ' + data.tickets + ' 張。');
};
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
此次的代碼變化比較大，再也不直接把遠程js文件寫死，而是編碼實現動態查詢，而這也正是jsonp客戶端實現的核心部分，本例中的重點也就在於如何完成jsonp調用的全過程。
咱們看到調用的url中傳遞了一個code參數，告訴服務器我要查的是CA1998次航班的信息，而callback參數則告訴服務器，個人本地回調函數叫作flightHandler，因此請把查詢結果傳入這個函數中進行調用。
OK，服務器很聰明，這個叫作flightResult.aspx的頁面生成了一段這樣的代碼提供給jsonp.html
remote.js:
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
四、到這裏爲止的話，相信你已經可以理解jsonp的客戶端實現原理了吧？剩下的就是如何把代碼封裝一下，以便於與用戶界面交互，從而實現屢次和重複調用:
JSONP stands for JSON with Padding. Requesting a file from another domain can cause problems, due to cross-domain policy. Requesting an external script from another domain does not have this problem. JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.
https://en.wikipedia.org/wiki/JSONP
-
每一个你不满意的现在，都有一个你没有努力的曾经。