簡(jiǎn)單談?wù)刯son跨域

更新時(shí)間：2016年03月13日 10:54:08 投稿：hebedich

本文主要給大家講解了javascript中的json跨域問(wèn)題，以及跨域安全性的解決辦法，總結(jié)了2點(diǎn)，分享給大家，希望大家能夠喜歡。

這一篇文章呢，主要是之前一直聽(tīng)別人講json跨域跨域，但是還是一頭霧水，只知其一，于是一怒之下，翻閱各種資料，如果有不正確的地方，勞煩指正一下^_^

首先，先了解瀏覽器有一個(gè)很重要安全性限制，即為同源策略：不同域的客戶(hù)端腳本在無(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ǔ)充-----------------

您可能感興趣的文章:

json跨域

相關(guān)文章

js日期對(duì)象兼容性的處理方法
本篇文章主要是對(duì)js日期對(duì)象兼容性的處理方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
arcgis for js柵格圖層疊加(Raster Layer)問(wèn)題
這篇文章主要介紹了arcgis for js柵格圖層疊加(Raster Layer)的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-11-11
總結(jié)js中的一些兼容性易錯(cuò)的問(wèn)題
下面小編就為大家分享一篇總結(jié)js中的一些兼容性易錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
微信小程序?qū)崿F(xiàn)banner圖輪播效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)banner圖輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02
JS使用可選鏈操作符 (?.) 進(jìn)行空值檢查的操作
在 JavaScript 中,處理嵌套對(duì)象或數(shù)組時(shí),經(jīng)常會(huì)遇到空值檢查的問(wèn)題,傳統(tǒng)的空值檢查通常比較繁瑣,容易導(dǎo)致代碼冗長(zhǎng)且難以閱讀,ES2020 引入了可選鏈操作符 (?.),極大地簡(jiǎn)化了這些檢查過(guò)程,本文介紹了JS使用可選鏈操作符 (?.) 進(jìn)行空值檢查的操作
2024-12-12
超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt詳解
這篇文章給大家分享了超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt的相關(guān)知識(shí)點(diǎn)，有興趣的朋友參考學(xué)習(xí)下。
2018-06-06
前端根據(jù)后端返回的文本流逐個(gè)展示文本內(nèi)容代碼示例
前端如何根據(jù)后端返回的文本流逐個(gè)展示文本內(nèi)容的實(shí)現(xiàn)步驟,前端調(diào)用特定方法來(lái)獲取文本流,然后通過(guò)處理這些文本流,逐個(gè)在界面上展示文本內(nèi)容,需要的朋友可以參考下
2025-01-01
前端BOM操作常用命令詳解及代碼案例
瀏覽器對(duì)象模型(BOM)是瀏覽器提供的JavaScript操作瀏覽器的API,提供了與網(wǎng)頁(yè)無(wú)關(guān)的瀏覽器功能對(duì)象,這篇文章主要給大家介紹了關(guān)于前端BOM操作常用命令詳解及代碼案例的相關(guān)資料,需要的朋友可以參考下
2024-10-10
小程序?qū)崿F(xiàn)多個(gè)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)多個(gè)選項(xiàng)卡切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
js 閉包深入理解與實(shí)例分析
這篇文章主要介紹了js 閉包,結(jié)合實(shí)例形式深入分析了JS閉包的概念、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03