这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了常见的 javascript 跨域通信方法
本文主要介绍几种常见的 javascript 跨域通信方法。首先讲解一下 JSONP。 1、JSONP JSONP(JSON with Padding) 是 JSON 的一种 "使用模式",可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而 html 的 下面我们来介绍下 JSONP 的具体实现。 我们知道,哪怕跨域 js 文件中的代码(当然指符合 web 脚本安全策略的),web 页面也是可以无条件执行的。远程服务器 remoteserver.com 根目录下有个 remote.js 文件代码如下: alert('我是远程文件'); 本地服务器 localserver.com 下有个 jsonp.html 页面代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script type="text/javascript" src="http://remoteserver.com/remote.js">
- </script>
- </head>
- <body>
- </body>
- </html>
毫无疑问,页面将会弹出一个提示窗体,显示跨域调用成功。
现在我们在 jsonp.html 页面定义一个函数,然后在远程 remote.js 中传入数据进行调用。jsonp.html 页面代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script type="text/javascript">
- var localHandler = function(data) {
- alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
- };
- </script>
- <script type="text/javascript" src="http://remoteserver.com/remote.js">
- </script>
- </head>
- <body>
- </body>
- </html>
remote.js 文件代码如下: localHandler({"result":"我是远程 js 带来的数据"}); 成功运行,看来跨域远程获取数据的目的实现了,但是又一个问题出现了,我怎么让远程 js 知道它应该调用的本地函数叫什么名字呢?这时我们就需要将服务端提供的 js 脚本动态生成就行了,调用者可用通过传参告诉服务端自己需要什么函数,jsonp.html 的代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script type="text/javascript">
- // 得到航班信息查询结果后的回调函数
- var flightHandler = function(data) {
- alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
- };
- // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
- var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
- // 创建script标签,设置其属性
- var script = document.createElement('script');
- script.setAttribute('src', url);
- // 把script标签加入head,此时调用开始
- document.getElementsByTagName('head')[0].appendChild(script);
- </script>
- </head>
- <body>
- </body>
- </html>
这次的代码变化比较大,不再直接把远程 js 文件写死,而是编码实现动态查询,而这也正是 jsonp 客户端实现的核心部分,本例中的重点也就在于如何完成 jsonp 调用的全过程。 我们看到调用的 url 中传递了一个 code 参数,告诉服务器我要查的是 CA1998 次航班的信息,而 callback 参数则告诉服务器,我的本地回调函数叫做 flightHandler,所以请把查询结果传入这个函数中进行调用。这个叫做 flightResult.aspx 的页面生成了一段这样的代码提供给 jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串):
- flightHandler({
- "code": "CA1998",
- "price": 1780,
- "tickets": 5
- });
传递给 flightHandler 函数的是一个 json,它描述了航班的基本信息。运行一下页面,成功弹出提示窗口,jsonp 的执行全过程顺利完成! 但是 JSONP 存在一点问题,就是由远程服务端负责包装 json 数据,并调用命名函数,这种方式存在安全隐患,在使用 JSONP 时,必须完全信任服务端所提供的数据,恶意脚本就可以直接接管我们的应用。所以接下来我们要介绍一种别的方式,来避免这种安全隐患。 2、CORSCORS(Cross OriginResource Sharing, 跨源资源共享) 实现了跨源 XMLHttpRequests, 跨源 HTTP 请求包括一个 Origin 头部,它为服务器提供 HTTP 请求的源信息。头部由浏览器保护,不能被应用程序代码更改。这种方式远比评估外部输入的方式安全。 以前的 ajax 只能同源请求,现在通过 XMLHttpRequests 二级,可以进行跨域请求。假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回 "源不匹配" 的错误,"跨域" 也就以此由来。 利用 CORS,http://www.test2.com 只需添加一个标头,就可以允许来自 http://www.test1.com 的请求。php 代码如下:
- header("Access-Comtrol-Allow-Origin:*");<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
其中 * 表示允许任何域向我们的服务端提交请求。也可以设置指定的域名,代码如下:
- header("Access-Control-Allow-Origin:http://www.test2.com");
设置好头信息之后,其他域就可以进行请求了。 使用 "跨域资源共享" 的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种 "跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。 xhr.open('GET', 'http://www.test2.com'); 接下来介绍另外一种实时通信方式: 3、Cross-document messaging 跨文档信息通信。使用这个功能,只要获取到网页所在窗口对象的实例,不仅同原的 web 网页可以互相通信,也可以实现跨域通信。要想接受从其他窗口发送来的信息,必须对窗口对象的 onmessage 事件进行监听,其他窗口可以通过 postmessage 方法来传递数据,该方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何 js 对象,第二个参数为接收消息的对象窗口的 url 地址。 下面进行试验,主页面 index.html 代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <script type="text/javascript">
- function sendIt() {
- document.getElementById("otherPage").contentWindow.postMessage( //向子窗口发出请求
- document.getElementById("message").value, //值
- "http://127.0.0.1:8020" //目标域
- )
- }
- </script>
- <body>
- <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html"
- id="otherPage" width="" height="">
- </iframe>
- <br />
- <br />
- <input type="text" name="message" id="message" value="" />
- <input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();"
- />
- </body>
- </html>
窗口所引用页面 other.html 代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <script type="text/javascript">
- window.addEventListener("message",
- function(event) { //通过onmessage监听
- //将从父窗口传来的数据展现出来
- document.getElementById("content").innerHTML += event.data + "<br>";
- },
- false);
- </script>
- </head>
- <body>
- 信息来自于另外一个域
- <div id="content">
- </div>
- </body>
- </html>
试验结果如下:
可以看到在 81 端口服务器中的 index.html 和 8020 端口的服务器中的 other.html 进行的通信。 完整代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <script type="text/javascript">
- function sendIt() {
- document.getElementById("otherPage").contentWindow.postMessage( //向子窗口发出请求
- document.getElementById("message").value, //值
- "http://127.0.0.1:8020" //目标域
- )
- }
- </script>
- <body>
- <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html"
- id="otherPage" width="" height="">
- </iframe>
- <br />
- <br />
- <input type="text" name="message" id="message" value="" />
- <input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();"
- />
- </body>
- </html>
CrossDocumentMessaging_index.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <script type="text/javascript">
- window.addEventListener("message",
- function(event) { //通过onmessage监听
- //将从父窗口传来的数据展现出来
- document.getElementById("content").innerHTML += event.data + "<br>";
- },
- false);
- </script>
- </head>
- <body>
- 信息来自于另外一个域
- <div id="content">
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0409/267804.html