JSONP的運用
1.瀏覽器的同源戰略
- 同源戰略限定了從同一個源加載的文檔或劇本怎樣與來自另一個源的資本舉行交互。這是一個用於斷絕潛伏歹意文件的主要平安機制。
2.一個源的定義
假如兩個頁面的協定，端口和域名都雷同，則兩個頁面具有雷同的源，這就是同源。http://www.example.com/dir/page.html這個網址，協定是http://，域名是www.example.com，端口是80（默許端口能夠省略）。它的同源狀況以下。
-
http://www.example.com/dir2/other.html：同源 -
http://example.com/dir/other.html：差別源（域名差別） -
http://v2.www.example.com/dir/other.html：差別源（域名差別） -
http://www.example.com:81/dir/other.html：差別源（端口差別）
參考文章
—
同源政策規定，AJAX要求只能發給同源的網址，不然就報錯。
3.JSONP完成跨域接見數據
JSONP(JSON with Padding)是JSON的一種“運用形式”
因為同源戰略，一般來說位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個破例。
ajax要求受同源戰略影響，不允許舉行跨域要求
而script標籤src屬性中的鏈接卻能夠接見跨域的js劇本，應用這個特徵，服務端不再返回JSON花樣的數據，而是返回一段挪用某個函數的js代碼，在src中舉行了挪用，如許完成了跨域。
JSONP是服務器與客戶端跨源通訊的經常使用要領。最大特性就是簡樸實用，老式瀏覽器悉數支撐，服務器革新異常小。
JSONP的基本思想是，動態建立一個<script>元素，script元素髮送要求不熟同源政策的限定，只能發送get要求。服務器收到要求后，將數據放在一個指定名字的回調函數里傳返來。
<script>//SRL server rendered javascript
button.addEventListener('click', (e) => {
//動態建立script
var script = document.createElement('script')
let functionName='blog1'+parseInt(Math.random()*100000,10)
//callback
window[functionName]=function(result){
if(result==='success'){
amount.innerText=amount.innerText-1
}else{}
}
//發送要求
script.src = 'http://feile.com/pay?callback='+functionName
document.body.appendChild(script)
script.onload = function (e) {
// debugger
e.currentTarget.remove()
delete window[functionName]
}
script.onerror = function (e) {
alert('fail')
e.currentTarget.remove()
delete window[functionName]
}
})
</script>
上面的代碼經由過程動態建立增加script元素，向服務器發送要求，查詢字符串必須有callback參數，用來指定回調函數的名字。
response.write(`${query.callback}.call(undefined,'success')`)服務器收到這個要求今後，會將數據放在回調函數的參數位置返回。這時候只需瀏覽器定義了對應的回調函數，該函數就會立即被挪用。
