常见的javascript跨域通信方法

本文主要介绍几种常见的javascript跨域通信方法。先说JSONP。1.JSONPJSONP(带Padding的JSON)是JSON的一种“使用模式”，可以用来解决主流浏览器的跨域数据访问问题。一般来说，由于同源策略，除了HTML脚本元素，位于server1.example.com的网页无法与server1.example.com以外的服务器进行通信。有了脚本元素的这种开放策略，网页就可以获得其他来源动态生成的JSON数据，这种使用模式叫做JSONP。JSONP捕获的数据不是JSON，而是任意的JavaScript，由JavaScript文字翻译器执行，而不是JSON解析器。下面介绍JSONP的具体实现。我们知道，即使跨域js文件中的代码(这当然符合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/XHTML 1/DTD/XHTML L1-transition . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title/title script type=' text/JavaScript ' src=' http 3360http://remote server.com/remote . js '/script/head dy

现在我们在jsonp.html页面中定义一个函数，然后在remote.js中传入数据进行调用。Jsonp.html页面代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML L1/DTD/XHTML L1-transition . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title/title script type=' text/JavaScript ' var local handler=function(data){ alert '(我是本地函数，可以由跨域远程js调用。};/script script type=' text/JavaScript ' src=' http :http://remote server.com/remote . js '/script/head body/html remote . js文件代码如下：localhhandler({ ' result ' : '我是remote js带来的数据' })；运行成功，似乎达到了跨域远程获取数据的目的，但又出现了另一个问题。如何让远程js知道它应该调用的本地函数的名称？此时，我们需要动态生成服务器提供的js脚本。调用者可以通过传递参数告诉服务器他需要什么函数。jsonp.html法典如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-transition . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title/title script type=' text/JavaScript '/回调函数var flight handler=function(data){ alert '(您查询的航班结果为：票价为' data.price '。);};//提供jsonp服务的url地址(不管是什么类型的地址，最终生成的返回值都是一个javascript代码)。var URL=' http://Flightquery.com/jsonp/Flightresult . aspx？代码=ca 1998 callback=flight handler '；//创建一个脚本标记并设置其属性var script=document . create element(' script ')；script.setAttribute('src '，URL)；//将脚本标记添加到head，然后调用开始document . getelementsbytagname(' head ')[0]。appendchild(脚本)；/script /head body /body /html这次，代码变化很大。它不是直接写死远程js文件，而是编码实现动态查询，这是jsonp客户端实现的核心部分。在这个例子中，重点是如何完成jsonp调用的整个过程。我们看到调用的url中传递了一个代码参数，告诉服务器我要检查航班CA1998的信息，而回调参数告诉服务器我的本地回调函数叫做flightHandler，所以请将查询结果传入这个函数进行调用。这个名为flightResult.aspx的页面生成了一段这样的代码，并提供给了jsonp.html(这里不演示服务器的实现，它与你选择的语言无关，但毕竟是一个拼接的字符串):

flight handler({ ' code ' : ' ca 1998 '，' price': 1780，' tickets ' : 5 })；传递给flightHandler函数的是一个json，它描述了飞行的基本信息。运行页面，成功弹出提示窗口。jsonp执行的全过程成功完成！但是jsonP有一个问题，就是远程服务器负责封装JSON数据，调用命名函数，存在安全隐患。使用JSONP时，我们必须完全信任服务器提供的数据，恶意脚本可以直接接管我们的应用。所以接下来，我们将介绍另一种避免这种安全隐患的方法。2.corscrs (cross Origin资源共享)实现了跨源XMLHttpRequests，其中包含一个Origin头，为服务器提供HTTP请求的源信息。标题受浏览器保护，不能被应用程序代码更改。这种方法远比评估外部输入安全。过去，ajax只能从同一个源请求，但现在它可以通过第二层的XMLHttpRequests进行跨域请求。假设我们的页面或应用程序已经在http://www.test1.com，我们打算请求从http://www.test2.com提取数据。一般我们直接用AJAX请求，会失败，浏览器也会返回“源不匹配”的错误，这也是“跨域”的来源。对于CORS，http://www.test2.com只需要添加一个报头，就可以接受来自http://www.test1.com的请求。Php代码如下：

标题('访问-控制-允许-原始： * ')；span style=' font-family : Arial，Helvetica，无衬线；背景-颜色： rgb(255，255，255)；'/span其中*表示允许任何域向我们的服务器提交请求。您也可以使用以下代码设置指定的域名：

标头('访问控制-允许-原始：http://www。测试2。com’)；设置好头信息之后，其他域就可以进行请求了。使用'跨域资源共享'的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种'跨域。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样xhr.open('GET '，' http://www.test2.com ')；接下来介绍另外一种实时通信方式：3、跨文档消息传递跨文档信息通信。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同原的网网页可以互相通信，也可以实现跨域通信。要想接受从其他窗口发送来的信息，必须对窗口对象的onmessage事件进行监听，其他窗口可以通过邮件方法来传递数据，该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何射流研究…对象，第二个参数为接收消息的对象窗口的全球资源定位器(统一资源定位符)地址。下面进行试验，主页面index.html代码如下：

！DOCTYPE html html head meta charset=' utf-8 ' title/title/head script type=' text/JavaScript '函数sendIt(){ document。getelementbyid('其他页面').内容窗口postMessage(//向子窗口发出请求文件。getelementbyid(' message ').值，//值'http://127.0.0.1:8020'//目标域)}/脚本正文iframe src=' http :3358127。0 .0 .1:8020/test2/JS/jstest/跨文档-消息传递/其他。html ' id=' other page ' width=' height=' '/iframe br/br/input type=' text ' name=' message ' id=' message ' value=' '/input type=' button ' name=' id=' value='发送跨域消息onclick=' SendIt()；'//正文/html窗口所引用页面other.html代码如下：

！DOCTYPE html html head meta charset=' utf-8 ' title/title script type=' text/JAVAScript ' window。addeventlistener(' message '，function(event){//通过onmessage监听//将从父窗口传来的数据展现出来文件。getelementbyid(' content ').innerHTML=event.data ' br}，false)；/脚本/头体信息来自于另外一个域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 '函数sendIt(){ document。getelementbyid('其他页面').内容窗口postMessage(//向子窗口发出请求文件。getelementbyid(' message ').值，//值'http://127.0.0.1:8020'//目标域)}/脚本正文iframe src=' http :3358127。0 .0 .1:8020/test2/JS/jstest/跨文档-消息传递/其他。html ' id=' other page ' width=' height=' '/iframe br/br/input type=' text ' name=' message ' id=' message ' value=' '/input type=' button ' name=' id=' value='发送跨域消息onclick=' SendIt()；'//body/HTMl cross document messaging _ index。超文本标记语言

！DOCTYPE html html head meta charset=' utf-8 ' title/title script type=' text/JAVAScript ' window。addeventlistener(' message '，function(event){//通过onmessage监听//将从父窗口传来的数据展现出来文件。getelementbyid(' content ').innerHTML=event.data ' br}，false)；/脚本/头体信息来自于另外一个域div id='content' /div /body/html以上就是本文的全部内容，希望对大家了解熟悉常见的爪哇岛描述语言跨域通信方法有所帮助。