JSONP跨域

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：不一樣源（端口不一樣）

---

參考文章

• https://developer.mozilla.org...
• http://www.ruanyifeng.com/blo...

---
同源政策規定，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')`)

服務器收到這個請求之後，會將數據放在回調函數的參數位置返回。這時只要瀏覽器定義了對應的回調函數，該函數就會當即被調用。