javascript跨域访问的方法.docx
版权申诉
13 浏览量
2022-11-26
19:09:42
上传
评论
收藏 16KB DOCX 举报
javascript 跨域访问的方法
javascript 跨域访问是 web 开发者经常遇到的问题，什么是跨域，一个
域上加载的脚本获取或操作另一个域上的文档属性，下面将列出三种实现
javascript 跨域方法:
基于 iframe 实现跨域
基于 iframe 实现的跨域要求两个域具有 aa.xx.com,bb.xx.com 这种特
点，也就是两个页面必须属于一个基础域（例如都是 xxx.com，或是
xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是 80），这
样在两个页面中同时添加 document.domain，就可以实现父页面调用子页面的函
数，代码如下：
页面一：
Html 代码
document.domain = "xx.com"; function aa(){ alert("p"); }
要解决跨域的问题，我们可以使用以下几种方法：
一、通过 jsonp 跨域在 js 中，我们直接用 XMLHttpRequest 请求不同域上
的数据时，是不可以的。但是，在页面上引入不同域上的 js 脚本文件却是可以
的，jsonp 正是利用这个特性来实现的。比如，有个 a.html 页面，它里面的代码
需要利用 ajax 获取一个不同域上的 json 数据，假设这个 json 数据那么 a.html 中
的代码就可以这样：我们看到获取数据的地址后面还有一个 callback 参数，按惯
例是用这个参数名，但是你用其他的也一样。当然如果获取数据的 jsonp 地址页面
不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。因为是当
做一个 js 文件来引入的，所以返回的必须是一个能执行的 js 文件，所以这个页面
的 php 代码可能是这样的:最终那个页面输出的结果是:
所以通过得到的 js 文件，就是我们之前定义的 dosomething 函数,并且它
的参数就是我们需要的 json 数据，这样我们就跨域获得了我们需要的数据。这样
jsonp 的原理就很清楚了，通过 script 标签引入一个 js 文件，这个 js 文件载入
成功后会执行我们在 url 参数中指定的函数，并且会把我们需要的 json 数据作为
参数传入。所以 jsonp 是需要服务器端的页面进行相应的配合的。
知道 jsonp 跨域的原理后我们就可以用 js 动态生成 script 标签来进行跨
域操作了，而不用特意的手动的书写那些 script 标签。如果你的页面使用
jquery，那么通过它封装的方法就能很方便的来进行 jsonp 操作了。原理是一样
的，只不过我们不需要手动的插入 script 标签以及定义回掉函数。jquery 会自动
资源评论
