日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

    歡迎訪問 生活随笔!

    生活随笔

    當前位置: 首頁 > 前端技术 > javascript >内容正文

    javascript

    jQuery(三) javascript跨域问题(JSONP解决)

    發布時間:2023/12/31 javascript 33 豆豆
    生活随笔 收集整理的這篇文章主要介紹了 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解决)的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。