ajax和jsonp跨域的原理本質詳解

2022-09-20 23:09:13 字數 982 閱讀 5863

為什麼會有跨域問題? - 因為有同源策略

同源策略是瀏覽器的一種安全策略,所謂同源指的是 請求url位址中的 協議, 網域名稱 和 埠 都相同,只要其中之一不相同就是跨域

同源策略主要為了保證瀏覽器的安全性

程式設計客棧在同源策略下,瀏覽器 不允許 ajax跨域獲取伺服器資料

跨域請求:

ajax的基本概念

了解這個概念,首先得先知道同步互動與非同步互動

ajax主要的應用場景:頁面不重新整理,就可以與伺服器進行動態的資料互動

互動的原理

我們所有的互動操作都可以通過這個物件來完成,傳送請求,接受伺服器的資料

ajax的具體應用場景

xmlhttprequest 互動的四個步驟

1,例項化xmlhttprequest 物件

2,想和伺服器進行互動,必須和伺服器開啟乙個連線

3,給伺服器傳送資料,傳送引數資料到伺服器

www.cppcns.com4,接受伺服器返回的資料,伺服器在返回給客戶端的時候會返回一些狀態,可以通過監聽伺服器狀態的改變,來更好的操控整個互動流程

ajax跨域

跨域:假設我訪問 a 站點,後台返回給我乙個頁面,然後我又想在 a 站點的這個頁面去訪問 b 站點的資源,這就是乙個跨域的效果,跨域瀏覽器是有安全限制的

解決跨域的方式:jsonp方式

jsonp 全稱是 json with padding ,是基於 json 格式的為解決跨域請求資源而產生的解決方案。他實現的基本原理是利用了 html 裡 元素標籤,遠端呼叫 json 檔案來實現資料傳遞。如要在 a.com 域下獲取存在 b.com 的 json 資料( getusers.json ):

jsonp解決跨域的本質原理:由於瀏覽器有同源限制,不同站點之間不能相互訪問,但是有時候我們就是想要獲取其他站點的資料,比如加入我們想要獲取一下急速資料www.cppcns.com的天氣預報資料,這肯定跨域了,那麼我們www.cppcns.com該怎麼辦呢?

原理:就是動態建立

jsonp跨域原理

jsonp跨域請求是借助於表單元素的 src 屬性的 跨域 實現的,具體實現如下 1 html頁面 2 服務端 restcontroller public class jsonpcontroller return callback jsonp和ajax並無關係,只是借助了src屬性的 跨域 特性來實...

jsonp的跨域原理

在開發測試中,難免會在不同域下進行跨域操作,出於安全性考慮,瀏覽器中的同源策略阻止從乙個域上載入的指令碼獲取或者操作 另乙個域下的文件屬性,這時需要進行跨域的方式進行解決,如 使用jsonp iframe等 jsonp,即json padding,動態建立script標籤,利用script標籤的sr...

jsonp解決ajax跨域問題

利用jsonp解決ajax跨域問題 至於success裡面的操作可以忽略 某工程下ajax請求 var isvisible true function getlog var startpage data.startpage var endpage data.endpage 拼接 導航 按鈕 和 資料...