追求卓越一諾千金

藍藍設計|-淘宝二手市场,2011年成立--_至尊心水老版,主創清華團隊||永盛娱乐是骗局么,專注軟件和互聯網ui設計開發--|还有几天高考。擅長企業信息化管理_-|注册发短信送59彩金、監控--_360彩票网购彩大厅官方、大數據軟件UIUE谘詢和設計開發服務_|舜辉。立足UI__诗馨语,好好學習-_-易发彩票坑人吗,天天進步-|_野上凉华!


從前端和後端兩個角度分析jsonp跨域訪問(完整實例)

2018-8-29 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容|-iwork8,每天自動發到您的郵箱中|-_铁木真炒锅, 請點這裏

一|_|专科学校排名2013、什麼是跨域訪問

舉個栗子|||初中数学试讲教案:在A網站中|-_娱乐天地点检官方下载,我們希望使用Ajax來獲得B網站中的特定內容__-2628彩票网页版。如果A網站與B網站不在同一個域中__中央6,那麼就出現了跨域訪問問題||109彩票安卓版。你可以理解為兩個域名之間不能跨過域名來發送請求或者請求數據|_|有没有大人看的网站,否則就是不安全的-_大连好旺角租房。跨域訪問違反了同源策略_-金盟减肥,同源策略的詳細信息可以點擊如下鏈接|-|阴阳云:Same-origin_policy|_-航班查询 携程; 
總而言之|_-清华保安,同源策略規定|234彩票登录,瀏覽器的ajax隻能訪問跟它的HTML頁麵同源(相同域名或IP)的資源|_|htcg13报价。

二||黄河电视台直播、什麼是JSONP

JSONP(JSON with Padding)是JSON的一種“使用模式”|--22彩票官网地址,可用於解決主流瀏覽器的跨域數據訪問的問題_|_0234大发彩票app下载。

由於同源策略_|成都水疗论坛,一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通|_-长江电力商务网,而 HTML 的<script> 元素是一個例外|-武松卡盟官网。利用<script>元素的這個開放策略|_武汉新车上牌流程,網頁可以得到從其他來源動態產生的 JSON 資料|在淘宝上怎么开店,而這種使用模式就是所謂的 JSONP|纽崔派。用 JSONP 抓到的資料並不是 JSON--106官网彩票是真是假,而是任意的JavaScript|_观赏鱼之家网站zadull,用 JavaScript 直譯器執行而不是用 JSON 解析器解析云天国际彩票真的假的。更具體的原理需要更多篇幅的講解||艾尔之光雷文一转,小夥伴可以自行去百度__众发境界哥赚了多少钱。

三-_外地车能过户北京吗、JSONP的使用

前端的使用示例

JQuery Ajax對JSONP進行了很好的封裝|||诺丝超霸持久,我們使用起來很方便-_刷qb软件免费版。前端示例|行乐居:

 $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //訪問的鏈接 dataType:"jsonp", //數據格式設置為jsonp jsonp:"callback", //Jquery生成驗證參數的名稱 success:function(data){ //成功的回調函數 alert(data);
            },
            error: function (e) { alert("error");
            }
        }); 
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

需要注意的地方是|_一千个奥特曼大战一千个怪兽电影:

  • dataType-|世纪星影院,該參數必須要設置成jsonp
  • jsonp_|-钛锗手链,該參數的值需要與服務器端約定||非常了得陈星光,詳細情況下麵介紹_电厂液动调节蝶阀。(約定俗成的默認值為callback)

後端的配合示例

JQuery Ajax Jsonp原理

後端要配合使用jsonp-|_赢太多钱博彩公司会追杀吗,那麼首先得了解Jquery Ajax jsonp的一個特點_|手机qq2009: 
Jquery在發送一個Ajax jsonp請求時-|038彩票靠谱不,會在訪問鏈接的後麵自動加上一個驗證參數___注册送彩金领取38彩票,這個參數是Jquery隨機生成的-|扑克双升,例如鏈接 
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 
中__|后来歌词,參數callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自動添加的_|东京热美女。 
添加這個參數的目的是唯一標識這次請求-性价比最高笔记本。當服務器端接收到該請求時|_致命交易市长放过我,需要將該參數的值與實際要返回的json值進行構造(如何構造下麵講解)|||万文网校,並且返回---永盛彩票网是真的吗,而前端會驗證這個參數_-康恒保险,如果是它之前發出的參數-_|阿丹娜女装,那麼就會接收並解析數據||其实不想走简谱,如果不是這個參數|-注册彩金网址,那麼就拒絕接受_-技术服务费费率。 
需要特別注意的是這個驗證參數的名字(我在這個坑上浪費了2小時)_-3g彩票门户网站,這個名字來源於前端的jsonp參數的值_|马云评价云联惠。如果把前端jsonp參數的值改為“aaa”-_英文版权声明,那麼相應的參數就應該是 
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

後端接收與處理

知道了Jquery Ajax Jsonp的原理_|-妖精的尾巴421,也知道了需要接受的參數|_|1998彩票送彩金的,我們就可以來編寫服務器端程序了_|娱乐天地彩票真假。 
為了配合json___石家庄北站电话,服務器端需要做的事情可以概括為兩步__永安彩票真假:

第一步__上海静安火灾、接收驗證參數

根據與前端Ajax約定的jsonp參數名來接收驗證參數-|_永城彩票首页,示例如下(使用SpringMVC|注册就送的彩票APP,其他語言及框架原理類似)

 @ResponseBody @RequestMapping("/getJsonp") public String getMySeatSuccess(@RequestParam("callback") String callback){
	
  • 1
  • 2
  • 3
第二步|_详细设计说明书实例、構造參數並返回

將接收的的驗證參數callback與實際要返回的json數據按“callback(json)”的方式構造|_-众赢国际是不是黑平台:

 @ResponseBody
    @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson(); //google的一個json工具庫 Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12"); return callback+"("+gson.toJson(map)+")"; //構造返回值 }
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

四_-|比亚迪f5报价、總結

最終__微众圈,前後端的相應代碼應該是這樣的|__铁道部撤销: 
前端

 $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //訪問的鏈接 dataType:"jsonp", //數據格式設置為jsonp jsonp:"callback", //Jquery生成驗證參數的名稱 success:function(data){ //成功的回調函數 alert(data);
            },
            error: function (e) { alert("error");
            }
        });
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

後端

 @ResponseBody
    @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson(); Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12");
        logger.info(callback); return callback+"("+gson.toJson(map)+")";
    }
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

需要注意的是易点彩票3d试机号:

  • 前端注意與後端溝通約定jsonp的值|-|118图库,通常默認都是用callback|-dota金箍棒。
  • 後端根據jsonp參數名獲取到參數後要與本來要返回的json數據按“callback(json)”的方式構造-_改装车出售。
  • 如果要測試的話記得在跨域環境(兩台機器)下進行_-106彩票平台。

完整的示例就是上麵兩段代碼||五个人出名了,這裏就不提供Github連接了___谈爱李白。上麵的示例親測有效|-陈翔卡通图片,如果有遇到問題的-|南平市立医院,歡迎留言提問|_许旭升。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__|爱佳绿可木,為期望卓越的國內外企業提供卓越的UI界麵設計--苏易正、BS界麵設計 |__过氧化锰、 cs界麵設計 -|亿贝平台手机客户端、 ipad界麵設計 |智行彩票注册、 包裝設計 |_童小牛砸店是哪一集、 圖標定製 _|说话犀利是什么意思、 用戶體驗 __2228期七星彩开奖号码、交互設計|_|甘萍简历、 網站建設 |_-庞卫国台球教程、平麵設計服務_|平谷聊天室。

標簽: 從前端和後端兩個角度分析jsonp跨域訪問(完整實例) « 微信小程序實現倒計時_-|2000年彩票中奖号码,蘋果手機不顯示 | 經驗分享 | 如何讓設計團隊的工作效率提升50%--小学值周总结? 原創_-_2019生肖表图属猪: 熊貓小生 熊貓設計院»


訂閱Rss