jsonp實作原理解析-js教程-PHP中文網

jsonp實作原理解析

PHP中文网

發布： 2017-06-21 13:29:52

原創

6825 人瀏覽過

一. jsonp實作原理是利用script標籤可以取得不同來源資源的特點，來達到跨域存取某個資源的目的。具體行為如下：

建立一個script標籤，將請求位址寫入它的src屬性，將這個script外鏈插入head標籤中；
宣告一個回呼函數callback，函數名稱和請求位址中的一致；
#請求位址的內容是一個以json物件為參數的執行函數callback;

#當script資源載入時，callback開始執行，將json資料輸出。
jsonp其實就是json padding，而在json資料外包裹它的那個函數，就是padding。

###

// 简单的mock jsonpvar mockJsonp = function(url) {var ele = document.createElement('script');var head = document.getElementsByTagName('head')[0];
    ele.src = url;
    head.appendChild(ele);
}
mockJsonp('./index.js');function callback(data){
    console.log(data);
}// index.jscallback("name": "xxx", "age": "20");

登入後複製

######二. jq中的ajax請求資料格式為jsonp時，會發生以下操作：先建構一個script標籤，然後註冊一個onload的回調，最後將建構好的script標籤insert進去；insert完成之後，會觸發onload回調，其中又將前面插入的script標籤去掉了。其中的程式碼 callback( 200, "success" ) 其實就是觸發 ajax 的jsonp成功時的success回呼函數，callback函數其實是 done 函數。 ######三. jsonp跨域只能是get請求，jq在封裝jsonp跨域時，不論我們指定的是get還是post，他統一換成了get請求。 ######四. 其他跨域方式############cors（Cross-Origin Resource Sharing）跨域資源共享，伺服器端設定Access-Control-Allow-Origin，如果瀏覽器偵測到對應的設置，就會允許存取；############修改document.domain，將子網域和主域的document.domain設為同一個主域；#### ########window.name，每個頁面都對window.name有讀寫的權限，window.name持久存在在一個視窗載入過的所有頁面中；######## ####window.postMessage#########

以上是jsonp實作原理解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！