利用jsonp實現跨域請求

時間 2019-11-12

標籤利用 jsonp 實現請求欄目 JSON 简体版

原文原文鏈接

　　同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。javascript

　　因爲同源策略，咱們在使用ajax請求資源時不能跨域請求，也就是說必須是同一個域名，協議，端口。但咱們在開發的時候常常會須要請求到其餘服務器（跨域）的數據，其中一種方法就是jsonp。html

　　另外提一下，通常都是使用json這種數據格式來傳遞數據，由於javascript原生支持json格式，因此使用起來很方便。不要把json和jsonp混淆了，他們根本不是一個次元的東西！！！好比說兩個中國人進行對話，json就是漢語（具體內容），而jsonp就是兩我的交流的方式（用嘴）。java

什麼是jsonp？　jquery

　　咱們都知道script標籤是能夠跨域請求的，例如咱們引入jquery.js的時候常常使用cdn上的資源，並無把jquery.js這個文件真正地下載到本身的服務器上。那麼利用script能夠跨域請求的特性，咱們就能請求其餘服務器的資源。這種技術也就是所謂的jsonp。多說無益，下面是一個簡單的實例，看了以後相信你就能對jsonp的原理有了理解。　　ajax

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

<script>
    var demo1 = function (data) {
        alert("我是後臺經過jsonp傳來的數據：" + data.name);
    }
</script>
<script src="http://遠程服務器域名或ip地址/jsonp/jsonp.js"></script>  <!--這裏爲了保護個人服務器不受攻擊，就不放出個人服務器地址啦，哈哈哈-->
</body>
</html>

請求的服務器下面有對應的jsonp.js（名字本身起，不必定是jsonp.js）這個文件，裏面的代碼以下：json

demo1({"name": "lin"}); /*在遠程服務器上的js代碼，也就是說該服務器上的數據咱們均可以傳入函數，那麼html執行的時候也就獲取到了這些遠程數據*/

　 html文件渲染以下，可見遠程服務器的數據已經被請求過來：跨域

　　工做流程解析：咱們先在html定義了demo1這個函數，而後引入遠程jsonp.js文件，該js文件執行html定義的demo1函數（執行時傳入的參數就是想要傳遞的數據）。這樣html也就變相的獲取到了遠程服務器的數據。瀏覽器

　　 總結：script標籤也就是一個簡單的get請求，服務器處理該get請求，返回一個函數，傳入該函數的參數也就是客戶端但願得到的數據。其實不僅是script能夠跨域請求，只要有src屬性的標籤均可以藉助一樣的原理進行跨域請求，例如img, iframe安全

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。