この記事では主に、いくつかの一般的な JavaScript クロスドメイン通信方法を紹介します。まずはJSONPについて説明します。
1.JSONP
JSONP (JSON with Padding) は、主流ブラウザによるクロスドメイン データ アクセスの問題を解決するために使用できる JSON の「使用モード」です。同一オリジン ポリシーにより、一般に、server1.example.com にある Web ページは、HTML の <script> 要素を除き、server1.example.com 以外のサーバーと通信できません。 <script> 要素のこのオープン ポリシーを使用すると、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンは JSONP と呼ばれます。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。 <br />
次にJSONPの具体的な実装を紹介します。 <br />
クロスドメイン js ファイル内のコード (もちろん Web スクリプトのセキュリティ ポリシーに準拠している) であっても、Web ページは無条件に実行される可能性があることがわかっています。リモートサーバーremoteserver.comのルートディレクトリには、次のコードを持つremote.jsファイルがあります:<br />
<span style="color: #3366ff"><strong>alert('私はリモートファイルです');
<br />ローカルサーバー localserver.com の下に次のような jsonp.html ページコードがあります:
<br />
</script>
<!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>
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呼び出しのプロセス全体。
flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });flightHandler 関数に渡されるのは、フライトの基本情報を記述した json です。ページを実行すると、プロンプト ウィンドウが正常に表示され、jsonp 実行プロセス全体が正常に完了します。
2. CORS
CORS (Cross OriginResource Sharing、クロスオリジン リソース共有) には、クロスオリジン XMLHttpRequest が実装されており、サーバーに HTTP リクエストのソース情報を提供します。ヘッダーはブラウザーによって保護されており、アプリケーション コードによって変更することはできません。このアプローチは、外部入力を評価するよりもはるかに安全です。
以前は、ajax は同じソースからのみリクエストを行うことができましたが、現在は XMLHttpRequests レベル 2 を通じて、クロスドメイン リクエストを行うことができます。ページまたはアプリケーションがすでに 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>ここで * は、どのドメインでもサーバーにリクエストを送信できることを意味します。指定したドメイン名を設定することもできます。コードは次のとおりです:
设置好头信息之后,其他域就可以进行请求了。
使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。
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>
以上就是本文的全部内容,希望对大家了解熟悉常见的javascript跨域通信方法有所帮助。

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SublimeText3 Linux new version
SublimeText3 Linux latest version

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool