简单谈谈json跨域

 更新时间:2016年03月13日 10:54:08   投稿:hebedich  
本文主要给大家讲解了javascript中的json跨域问题,以及跨域安全性的解决办法,总结了2点,分享给大家,希望大家能够喜欢。

这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^

首先,先了解浏览器有一个很重要安全性限制,即为同源策略:不同域的客户端脚本在无明确授权的情况下不能读些对方资源。跨域也就是不同源~

简单的说,只要协议,端口,域名有一个不同,即为跨域!

然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。

解决方法:

1.使用jsonp解决跨域 :(仅适用于GET请求)

实现原理:<script>  标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。
所以 JSONP 的理念就是,我和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。非常巧合的一点(其实并不是),JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。

使用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',   //主要是这里和原来的json改变了!
    jsonp: 'jsoncallback', 
 })

2.使用HTML5的window.postMessage方法来跨域传送数据   (只兼容IE8+、FireFox、Chrome、Opera等浏览器)

window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源。

------------暂且先介绍这2种解决方法……其实还有很多其他的,之后再一一补充-----------------

相关文章

  • js日期对象兼容性的处理方法

    js日期对象兼容性的处理方法

    本篇文章主要是对js日期对象兼容性的处理方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • arcgis for js栅格图层叠加(Raster Layer)问题

    arcgis for js栅格图层叠加(Raster Layer)问题

    这篇文章主要介绍了arcgis for js栅格图层叠加(Raster Layer)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • 总结js中的一些兼容性易错的问题

    总结js中的一些兼容性易错的问题

    下面小编就为大家分享一篇总结js中的一些兼容性易错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 微信小程序实现banner图轮播效果

    微信小程序实现banner图轮播效果

    这篇文章主要为大家详细介绍了微信小程序实现banner图轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • JS使用可选链操作符 (?.) 进行空值检查的操作

    JS使用可选链操作符 (?.) 进行空值检查的操作

    在 JavaScript 中,处理嵌套对象或数组时,经常会遇到空值检查的问题,传统的空值检查通常比较繁琐,容易导致代码冗长且难以阅读,ES2020 引入了可选链操作符 (?.),极大地简化了这些检查过程,本文介绍了JS使用可选链操作符 (?.) 进行空值检查的操作
    2024-12-12
  • 超出JavaScript安全整数限制的数字计算BigInt详解

    超出JavaScript安全整数限制的数字计算BigInt详解

    这篇文章给大家分享了超出JavaScript安全整数限制的数字计算BigInt的相关知识点,有兴趣的朋友参考学习下。
    2018-06-06
  • 前端根据后端返回的文本流逐个展示文本内容代码示例

    前端根据后端返回的文本流逐个展示文本内容代码示例

    前端如何根据后端返回的文本流逐个展示文本内容的实现步骤,前端调用特定方法来获取文本流,然后通过处理这些文本流,逐个在界面上展示文本内容,需要的朋友可以参考下
    2025-01-01
  • 前端BOM操作常用命令详解及代码案例

    前端BOM操作常用命令详解及代码案例

    浏览器对象模型(BOM)是浏览器提供的JavaScript操作浏览器的API,提供了与网页无关的浏览器功能对象,这篇文章主要给大家介绍了关于前端BOM操作常用命令详解及代码案例的相关资料,需要的朋友可以参考下
    2024-10-10
  • 小程序实现多个选项卡切换

    小程序实现多个选项卡切换

    这篇文章主要为大家详细介绍了小程序实现多个选项卡切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • js 闭包深入理解与实例分析

    js 闭包深入理解与实例分析

    这篇文章主要介绍了js 闭包,结合实例形式深入分析了JS闭包的概念、原理、使用方法与操作注意事项,需要的朋友可以参考下
    2020-03-03

最新评论