首頁 > web前端 > js教程 > Jsonp的原理以及簡單實現的方法

Jsonp的原理以及簡單實現的方法

一个新手
發布: 2017-09-27 10:19:16
原創
2352 人瀏覽過


功能

Jsonp是json的一种使用模式,用来解决主流浏览器的跨域数据访问的问题.因为同源策略,页面是无法直接与其他不同源的页面沟通的.利用Script元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
登入後複製

同源:指協議,域名,連接埠相同.當瀏覽器的頁面執行一個腳本時會檢查這個腳本是屬於哪個頁面的,只有和這個頁面同源的腳本才會執行,否則控制台會報錯.

原理

在客戶端用Script標籤,取得Jsonp格式的資料(用JSONP 抓到的資料不是JSON,而是任意的JavaScript,用JavaScript 直譯器執行而不是用JSON 解析器解析),同時執行一個jsonp的callback函數,要執行這個callback函數,就要在客戶端先定義這個callback函數。

簡單實作

這是我找到的一個比較簡單的實作:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Top Customers with Callback</title></head><body>
    <p id="pCustomers">
    </p>
    <script type="text/javascript">
        function onCustomerLoaded(result, methodName) {
            var html = &#39;<ul>&#39;;            for (var i = 0; i < result.length; i++) {
                html += &#39;<li>&#39; + result[i] + &#39;</li>&#39;;
            }
            html += &#39;</ul>&#39;;
            document.getElementById(&#39;pCustomers&#39;).innerHTML = html;
        }    </script>    <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script></body></html>
登入後複製

例如客戶想造訪http://www.yiwuku.com/myService.aspx? jsonp=callbackFunction
假設客戶期望回傳JSON資料:[“customername1”,”customername2”]
那麼真正回傳到客戶端的Script Tags: callbackFunction([“customername1”,”customername2”])

############# #####

以上是Jsonp的原理以及簡單實現的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板