javascript
jQuery(三) javascript跨域问题(JSONP解决)
加油~ ??
--WH
一、什么是javascript跨域問題?
域:服務器域名,唯一標識(協議,域名,端口)必須保證一致,說明域相同
跨域:在一個服務器上,去訪問另一個服務器上,并且得到另一個服務器返回回來的值,這就是javascript跨域,其實簡單點,之前我們做的ajax,都是在同域中訪問,現在只是訪問的服務器變成了另外的,不是同一臺了。僅此而已。但是這樣一變,之前的代碼就不能用了。
?
?
二、解決javascript跨域問題
解決該問題,有很多種方式,我百度了一下,好像這就屬于前端的范疇了,所以我決定研究一下JSONP的這種解決方案即可,留一篇我百度到的博文,詳細講解了其他的解決方案,僅供參考。
js中幾種實用的跨域方法原理
2.1、javascript跨域處理(JSONP)
原理圖
可能初次看這張圖不是很理解,其實很簡單,跟著我的思路理清楚即可。
左邊tomcat1服務器中有一個頁面需要請求右邊tomcat2服務器中的GetDataServlet,GetDataServlet就模擬用來返回json數據給tomcat1(跨域),這就是跨域問題。
tomcat1中編寫請求目標地址,http://localhost:80/web/getData?callback=showData? 后面會解釋為什么呆callback這個參數。showData這個方法是用來接收返回回來的數據所做的一些處理的方法,? 在tomcat2這邊,提供數據的GetDataServlet首先獲取請求參數,也就是那個回調方法的方法名稱。然后生成要發送回去的json數據,最后就是通知tomcat1執行回調方法(為什么可以通知?這就是前面帶callback這個回調方法名稱的參數的作用,因為獲取到了tomcat1中的回調方法名稱,所以就可以通過該名稱去通知tomcat1去執行回調方法。)
所以總的步驟就是4步,按照原理圖上得步驟,一步步執行,然后獲取到返回數據。注意,如果獲取數據的jsonp地址頁面不是你自己能控制的,就得按照提供數據的那一方的規定格式來操作了,這里只是模擬一下這個過程。講解原理。
?
操作:
<!-- 需要將函數存在 調用之前,從而保存函數存在--><script type="text/javascript">function showData(data){alert(data.success); }</script><script type="text/javascript" src="http://localhost/web/getData?callback=showData"></script> js跨域處理
提供數據端
?
這里只是模擬一下這種解決方案,實際開發中遇到問題,采用這種思路即可。
2.2、jQuery跨域處理
2.2.1、使用$.getJSON();
原理圖
這里唯一要解釋的就是,匿名回調方法的使用。
操作:
<script type="text/javascript">$.getJSON("http://localhost/web/getData?callback=?",function(data){alert(data.success)}); $.getJSON操作
提供數據端還是不變的。
?
2.2.2、使用$.ajax()也能解決跨域問題。這里不做多陳述,具體可以查看文檔進行操作。
?
?
三、總結
這一章節圖比較多,代碼比較少,主要把這個跨域問題講解清楚了,解決跨域問題還有其他很多種方式,有興趣可以自行百度。
?
總結
以上是生活随笔為你收集整理的jQuery(三) javascript跨域问题(JSONP解决)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Spring Boot + Shiro
- 下一篇: 无线WIFI路由器设置方法和故障处理 无