這次帶給大家ajax和jsonp跨域詳解(附程式碼),實現ajax和jsonp跨域的注意事項有哪些,下面就是實戰案例,一起來看一下。
為什麼會有跨域問題? - 因為有同源策略
同源策略是瀏覽器的一種安全策略,所謂同源指的是請求URL位址中的協定, 網域名稱和連接埠都相同,只要其中之一不相同就是跨域
同源策略主要為了確保瀏覽器的安全性
在同源策略下,瀏覽器不允許Ajax跨網域取得伺服器資料
http://www.example.com/detail.html
跨網域請求:
互動的原理
ajax的具體應用場景
XMLHttpRequest 互動的四個步驟 1,實例化XMLHttpRequest 物件
2,想要互動,必須與伺服器伺服器開啟一個連線
3,傳送資料,傳送參數資料到伺服器
4,接受伺服器傳回的數據,伺服器在傳回至客戶端的時候會傳回一些狀態,可透過監聽伺服器狀態的改變,來更好的操控整個交互流程
ajax跨域跨域:假設我訪問a 站點,後台回傳給我一個頁面,然後我又想在a 網站的這個頁面去存取b 網站的資源,這就是一個跨網域的效果,跨網域瀏覽器是有安全限制的
解決·跨域的方式:jsonp方式
#JSONP 全域是JSON with Padding ,是基於JSON 格式的為解決跨域請求資源而產生的解決方案。他實現的基本原理是利用了 HTML 裡 <script></script> 元素標籤,遠端呼叫 JSON 檔案來實現資料傳遞。如要在a.com 網域下取得存在b.com 的JSON 資料( getUsers.JSON ):
jsonp解決跨網域的本質原理:由於瀏覽器有同源限制,不同網站之間無法互相訪問,但是有時我們就是想要獲取其他站點的數據,例如加入我們想要獲取一下急速數據的天氣預報數據,這肯定跨域了,那麼我們該怎麼辦呢?
原理:就是動態創建