簡(jiǎn)單談?wù)刯son跨域
這一篇文章呢,主要是之前一直聽(tīng)別人講json跨域跨域,但是還是一頭霧水,只知其一,于是一怒之下,翻閱各種資料,如果有不正確的地方,勞煩指正一下^_^
首先,先了解瀏覽器有一個(gè)很重要安全性限制,即為同源策略:不同域的客戶端腳本在無(wú)明確授權(quán)的情況下不能讀些對(duì)方資源。跨域也就是不同源~
簡(jiǎn)單的說(shuō),只要協(xié)議,端口,域名有一個(gè)不同,即為跨域!
然而,當(dāng)進(jìn)行一些比較深入的前端編程的時(shí)候,不可避免地需要進(jìn)行跨域操作,這時(shí)候“同源策略”就顯得過(guò)于苛刻。
解決方法:
1.使用jsonp解決跨域 :(僅適用于GET請(qǐng)求)
實(shí)現(xiàn)原理:<script> 標(biāo)簽是不受同源策略的限制的,它可以載入任意地方的 JavaScript 文件,而并不要求同源。
所以 JSONP 的理念就是,我和服務(wù)端約定好一個(gè)函數(shù)名,當(dāng)我請(qǐng)求文件的時(shí)候,服務(wù)端返回一段 JavaScript。這段 JavaScript 調(diào)用了我們約定好的函數(shù),并且將數(shù)據(jù)當(dāng)做參數(shù)傳入。非常巧合的一點(diǎn)(其實(shí)并不是),JSON 的數(shù)據(jù)格式和 JavaScript 語(yǔ)言里對(duì)象的格式正好相同。所以在我們約定的函數(shù)里面可以直接使用這個(gè)對(duì)象。
使用JavaScript代碼解決
var eleScript = document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = "http://example2.com/getinfo.php"; document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
使用jquery解決
$.ajax({ url: http://跨域的dns/document!searchJSONResult.action, type: "GET", dataType: 'jsonp', //主要是這里和原來(lái)的json改變了! jsonp: 'jsoncallback', })
2.使用HTML5的window.postMessage方法來(lái)跨域傳送數(shù)據(jù) (只兼容IE8+、FireFox、Chrome、Opera等瀏覽器)
window.postMessage(message,targetOrigin) 方法是html5新引進(jìn)的特性,可以使用它來(lái)向其它的window對(duì)象發(fā)送消息,無(wú)論這個(gè)window對(duì)象是屬于同源或不同源。
------------暫且先介紹這2種解決方法……其實(shí)還有很多其他的,之后再一一補(bǔ)充-----------------
- getJSON跨域SyntaxError問(wèn)題分析
- JS不能跨域借助jquery獲取IP地址的方法
- js跨域問(wèn)題淺析及解決方法優(yōu)缺點(diǎn)對(duì)比
- 使用jsonp完美解決跨域問(wèn)題
- 5種處理js跨域問(wèn)題方法匯總
- AngularJS iframe跨域打開(kāi)內(nèi)容時(shí)報(bào)錯(cuò)誤的解決辦法
- js跨域請(qǐng)求的5中解決方式
- Jsonp post 跨域方案
- javascript跨域方法、原理以及出現(xiàn)問(wèn)題解決方法(詳解)
- js實(shí)現(xiàn)跨域的幾種方法匯總(圖片ping、JSONP和CORS)
- AJAX實(shí)現(xiàn)跨域的三種方法(代理,JSONP,XHR2)
- JS跨域交互(jQuery+php)之jsonp使用心得
相關(guān)文章
javascript實(shí)現(xiàn)密碼驗(yàn)證
這篇文章主要介紹了javascript密碼驗(yàn)證的實(shí)現(xiàn)方法,過(guò)程很簡(jiǎn)單具有一定的參考價(jià)值,適合初學(xué)者學(xué)習(xí)研究,感興趣的小伙伴們可以參考一下2015-11-11uniapp發(fā)送formdata表單請(qǐng)求2種方法(全網(wǎng)最簡(jiǎn)單方法)
這篇文章主要給大家介紹了關(guān)于uniapp發(fā)送formdata表單請(qǐng)求2種方法的相關(guān)資料,本文介紹的方法應(yīng)該是全網(wǎng)最簡(jiǎn)單方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09uniapp?手機(jī)驗(yàn)證碼輸入框?qū)崿F(xiàn)代碼(隨機(jī)數(shù)、倒計(jì)時(shí)、隱藏手機(jī)號(hào)碼中間四位)可以直接使用
這篇文章主要介紹了uniapp?手機(jī)驗(yàn)證碼輸入框(隨機(jī)數(shù)、倒計(jì)時(shí)、隱藏手機(jī)號(hào)碼中間四位),實(shí)現(xiàn)思路通過(guò)創(chuàng)建六個(gè)正方形的view,然后創(chuàng)建一個(gè)數(shù)字input,最大輸入長(zhǎng)度為六位(根據(jù)驗(yàn)證碼的長(zhǎng)度),再將input隱藏掉,獲取到的值分別放到六個(gè)view中,需要的朋友可以參考下2023-02-02js以分隔符分隔數(shù)組中的元素并轉(zhuǎn)換為字符串的方法
下面小編就為大家?guī)?lái)一篇js以分隔符分隔數(shù)組中的元素并轉(zhuǎn)換為字符串的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11JavaScript監(jiān)聽(tīng)鍵盤(pán)事件代碼實(shí)現(xiàn)
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)鍵盤(pán)事件代碼實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06JavaScript 實(shí)現(xiàn)拖拽效果組件功能(兼容移動(dòng)端)
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)拖拽效果組件功能(兼容移動(dòng)端),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11bootstrap datetimepicker日期插件使用方法
這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01