JSONP實現Ajax跨域
阿新 • • 發佈：2017-05-23
images cnblogs log 方式 clas 一個 nbsp submit har 同源策略，它是由Netscape提出的一個著名的安全策略。
現在所有支持JavaScript 的瀏覽器都會使用這個策略。
所謂同源是指，域名，協議，端口相同。
當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面
當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，
即檢查是否同源，只有和百度同源的腳本才會被執行。
如果非同源，那麽在請求數據時，瀏覽器會在控制臺中報一個異常，提示拒絕訪問。
而標簽帶有src的可以突破同源策略。例如<img> <sccript> <Iframe>標簽。
JSONP兩大機制是：
- 1：瀏覽器有同源策略，采用script即可將數據發送過去，但拿回數據不正確
- 2：dataType=‘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="
#采用 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跨域