JSONP原理小記

2022-05-31 15:27:10 字數 503 閱讀 7947

大家都知道jsonp(json with padding引數式json)是跨域傳輸資料的方法,jq等很多類庫都封裝了jsonp的方法,但是他的原理是怎樣的呢?下面舉個我認為最淺顯的栗子,大家看過了都會明白原理!

jsonp的原理,概括點說,就是動態插入元素,當然元素引用的js檔案是伺服器傳過來的,他與

元素一樣可以不受限制地從其他域載入資源。

栗子:

伺服器傳過來的js檔案栗子:

alertmessage()

載入到伺服器傳過來的js檔案後,解析,執行函式alertmessage!

彈出提示框:姓名:james,性別:male,職位:manager

1、定義乙個呼叫跨域資料的函式 function fn(date);

2、獲取資料時,動態插入標籤,其src屬性為請求位址;

3、伺服器返回js檔案,其**執行函式fn,並提供引數,即fn(response),此處,response就是跨域呼叫的資料!

jsonp原理詳解

jsonp json with padding 是 json 的一種 使用模式 可以讓網頁從別的網域名稱 那獲取資料,即跨域讀取資料。為什麼我們從不同的域 訪問資料需要乙個特殊的技術 jsonp 呢?這是因為同源策略。所謂同源是指,網域名稱,協議,埠相同。所謂 同源策略 簡單的說就是基於安全考慮,當...

Jsonp 原理簡述

瀏覽器因為安全問題而有乙個同源策略,不允許跨域請求資料。但是 js 指令碼資源和資源還是被允許跨域請求的。在 web 開發中,遇到要跨域請求 json 資料時,可以用 jsonp 的方式來繞過瀏覽器的同源策略。現在,已經有很多任務具將 jsonp 封裝,如 jquery vue 等等。那麼封裝起來的...

ajax工作原理,Jsonp原理

ajax工作原理是 相當於在使用者和伺服器之間加了 個中間層 ajax引擎 使使用者操作與伺服器響應非同步化。對於使用者請求ajax引擎會做一些資料驗證和資料處理,不是所有請求都提交給伺服器,當需要從伺服器讀取新資料時由ajax引擎代為向伺服器提交請求。ajax最大優點就是不重新整理整個頁面的前提下...