標籤：append 簡單 建立 結果 接收 拒絕訪問 move 頁面 是的
同源策略，它是由Netscape提出的一個著名的安全性原則。現在所有支援JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，網域名稱，協議，連接埠相同。當一個瀏覽器的兩個tab頁中分別開啟來 百度和Google的頁面當瀏覽器的百度tab頁執行一個指令碼的時候會檢查這個指令碼是屬於哪個頁面的，即檢查是否同源，只有和百度同源的指令碼才會被執行。如果非同源，那麼在請求資料時，瀏覽器會在控制台中報一個異常，提示拒絕訪問。而標籤帶有src的可以突破同源策略。例如<img> <sccript> <Iframe>標籤。JSONP兩大機制是：例子（1）：
<head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="content"></div> <input type="button" value="發送1" onclick="submitJsonp1();"> <input type="button" value="發送2" onclick="submitJsonp2();"> <input type="button" value="發送3" onclick="submitJsonp3();"> <script src="/static/jquery-3.2.0.js"></script> <script> function submitJsonp1(){ $.ajax({ url:‘/ajax3.html‘, type:‘GET‘, data:{nid:2}, success:function (arg) { $(‘#content‘).html(arg); } }) }
#採用 submitJsonp1，由於我的url是同源，則發送資料接收資料都可正確
結果：
例子（2）：若為不同源情況，新建立sunkai project 將連接埠改為9000
<input type="button" value="發送2" onclick="submitJsonp2();"> <input type="button" value="發送3" onclick="submitJsonp3();"> <script src="/static/jquery-3.2.0.js"></script> <script> function submitJsonp1(){ $.ajax({ url:‘/ajax3.html‘, type:‘GET‘, data:{nid:2}, success:function (arg) { $(‘#content‘).html(arg); } }) } function submitJsonp2() { var tag = document.createElement(‘script‘); tag.src = ‘http://127.0.0.1:9000/xiaokai.html‘; document.head.appendChild(tag); document.head.removeChild(tag); } function func(arg) { $(‘#content‘).html(arg); }
#採用 submitJsonp2，這裡的關鍵就是func()聯絡了兩個不同源網頁
結果 （發送二）：
例子三（和例子二做對比）：
function submitJsonp3() { $.ajax({ url:‘http://127.0.0.1:9000/xiaokai.html‘, type:‘GET‘, dataType:‘jsonp‘ }) } function func(arg) { $(‘#content‘).html(arg); }
這裡的重點就是dataType:‘jsonp‘，雖然都是Ajax發送，但是jsonp內部封裝一種方式，使之簡單。
結果：
結論：JSONP是一種方式，隨機產生script塊，添加到<head>裡面再移除掉，==》可以和其他網站互動。
JSONP實現Ajax跨域
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
