郑州Web前端开发教程之JavaScript跨域实现方法
JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。那么如何解决跨域问题呢?通过了解接下来的郑州Web前端开发教程你会找到比较好的方法。
在此之前,我们首先要了解为什么需要跨域。跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。简单来说,跨域的作用就是让你能访问不是一个域的文件。
要解决跨域问题,我们可以使用以下几种方法:
一、通过jsonp跨域(实际上是动态创建script标签)
jsonp(json with Padding)是资料格式json的一种“使用模式”,可以让网页从别的网域要资料。jsonp也叫填充式json,是应用json的一种新方法,只不过是被包含在函数调用中的json。jsonp由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的json数据。
jsonp跨域实现原理:不同的域可以传输JS文件
服务器的data.php
本地HTML
或者使用jQuery
输出结果:
二、通过document.domain+ iframe (只有在主域相同的时候才能使用该方法)
两个不同域的a.html和b.html
在www.a.com/a.html中:
在www.script.a.com/b.html中:
解决办法:在两个页面都插入document.domain,这样就能访问iframe里window对象的各种属性。
三、使用window.name来进行跨域
原理:在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限
同一目录下的a.html和b.html
a.html
b.html
a.html页面载入后3秒,跳转到了b.html页面,弹出“页面a设置的值”
跨域:在b.html里设置window.name,a.html就能访问这个值了。
四、使用HTML5的window.postMessage方法来跨域传送数据
不同域的a.html和b.html
a. Html
b. Html
五、利用CORS
CORS是自定义HTTP头部,使浏览器和服务器对比,从而决定请求和响应是否应该进行。
IE8使用XDR对象实现CORS,和XHR类似用法
现代浏览器使用普通的XMLHttpRequest对象请求就行。
当然,实现JavaScript跨域的方法还有图片Ping、利用flash等,想了解的同学可以自行查询或者关注后期“千锋郑州校区”微信公众号发的的文章。跨域是前端最重要的面试题之一,掌握它你就比别人多了一个优势,如果你想参加专业的培训班,建议你来千锋郑州Web前端培训两周免费试听体验之后再决定!
相关推荐HOT
更多>>大数据培训学习什么,你了解多少
大数据培训学习什么?你了解多少?随着互联网技术的不断发展,大数据技术开始走进人们的视野,并成为现阶段吃香的技术能力之一。那么熟练掌握大...详情>>
2023-03-16 15:16:01云计算培训怎么样?可靠吗
云计算培训怎么样?可靠吗?靠不靠谱要看你什么要求了,因人而异。但如果你是想通过培训机构快速掌握好技能,然后进入行业,这个一般都没有问题...详情>>
2023-03-07 14:51:00java编程工资多少?主要学哪些内容
java编程工资多少?主要学哪些内容?java程序员的月收入在6000-20000不等,在一线城市有工作经验的java程序员的薪资收入会高一些,在二三线城市...详情>>
2023-02-24 14:56:07it工程培训机构,云计算难学吗
下面给小伙伴们列举一个学习大纲参考: 第一阶段: 零基础入门 1、计算机基础 2、Raid设置与网络服务基础 3、网络基础 第...详情>>
2022-12-01 17:48:04