Maison >interface Web >js tutoriel >Méthodes de communication javascript inter-domaines communes_compétences javascript
Méthodes de communication javascript inter-domaines communes_compétences javascript
- WBOYoriginal
- 2016-05-16 15:22:231587parcourir
Cet article présente principalement plusieurs méthodes de communication inter-domaines JavaScript courantes. Expliquez d’abord JSONP.
1.JSONP
JSONP (JSON with Padding) est un « mode d'utilisation » de JSON qui peut être utilisé pour résoudre le problème de l'accès aux données inter-domaines par les navigateurs grand public. En raison de la politique de même origine, de manière générale, les pages Web situées sur server1.example.com ne peuvent pas communiquer avec des serveurs autres que server1.example.com, à l'exception de l'élément HTML 3f1c4e4b6b16bbbd69b2ee476dc4f83a Grâce à cette politique ouverte de l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a, les pages Web peuvent obtenir des données JSON générées dynamiquement à partir d'autres sources, et ce modèle d'utilisation est appelé JSONP. Les données capturées avec JSONP ne sont pas du JSON, mais du JavaScript arbitraire, qui est exécuté avec un interpréteur JavaScript au lieu d'être analysé avec un analyseur JSON.
Nous présenterons ensuite l'implémentation spécifique de JSONP.
Nous savons que même si le code est présent dans le fichier js inter-domaines (qui est bien entendu conforme à la politique de sécurité des scripts Web), la page Web peut être exécutée sans condition. Il existe un fichier remote.js dans le répertoire racine du serveur distant remoteserver.com avec le code suivant :
alert('Je suis un fichier distant');
Le serveur local localserver.com a un code de page jsonp.html comme suit :
<!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>
Il ne fait aucun doute qu'une fenêtre d'invite apparaîtra sur la page, indiquant que l'appel inter-domaines a réussi.
Maintenant, nous définissons une fonction sur la page jsonp.html, puis l'appelons en transmettant des données dans Remote.js distant. Le code de la page jsonp.html est le suivant :
<!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>
Le code du fichier remote.js est le suivant :
localHandler({"result": "Je suis les données apportées par Remote JS"});
Après une exécution réussie, il semble que l'objectif de l'acquisition de données à distance inter-domaines ait été atteint, mais une autre question se pose : comment faire connaître au js distant le nom de la fonction locale qu'il doit appeler ? A ce stade, il suffit de générer dynamiquement le script js fourni par le serveur. L'appelant peut indiquer au serveur de quelles fonctions il a besoin en passant des paramètres. Le code de jsonp.html est le suivant :
.
<!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>
Cette fois, le code a beaucoup changé. Il n'écrit plus directement le fichier js distant, mais des codes pour implémenter la requête dynamique. C'est également la partie centrale de l'implémentation du client jsonp. L'accent est mis dans cet exemple sur la façon de terminer. l'ensemble du processus d'appel jsonp.
Nous voyons qu'un paramètre de code est passé dans l'URL appelante, indiquant au serveur que ce que je veux vérifier, ce sont les informations du vol CA1998, et le paramètre de rappel indique au serveur que ma fonction de rappel locale s'appelle FlightHandler, veuillez donc transmettre la requête aboutit à cet appel de fonction. Cette page appelée flightResult.aspx génère un morceau de code comme celui-ci et le fournit à jsonp.html (l'implémentation côté serveur ne sera pas démontrée ici. Cela n'a rien à voir avec le langage que vous choisissez. En dernière analyse, c'est juste épisser des cordes) :
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
Ce qui est transmis à la fonction FlightHandler est un json, qui décrit les informations de base du vol. Exécutez la page, une fenêtre d'invite apparaîtra avec succès et l'ensemble du processus d'exécution de jsonp est terminé avec succès !
Cependant, il y a un problème avec JSONP. Le serveur distant est responsable de l'empaquetage des données json et de l'appel de la fonction nommée. Lorsque vous utilisez JSONP, vous devez faire entièrement confiance aux données fournies par le serveur. prenez en charge notre candidature. Nous présenterons donc ensuite une autre façon d’éviter ce risque de sécurité.
2. CORS
CORS (Cross OriginResource Sharing, partage de ressources cross-origin) implémente les requêtes HTTP cross-origins incluent un en-tête Origin, qui fournit au serveur les informations source de la requête HTTP. L'en-tête est protégé par le navigateur et ne peut pas être modifié par le code de l'application. Cette approche est bien plus sûre que l’évaluation des apports externes.
Dans le passé, ajax ne pouvait effectuer des requêtes qu'à partir de la même source, mais désormais, grâce au niveau deux de XMLHttpRequests, des requêtes inter-domaines peuvent être effectuées. Supposons que notre page ou application soit déjà sur http://www.test1.com et que nous prévoyions de demander l'extraction de données à partir de http://www.test2.com. Dans des circonstances normales, si nous utilisons directement AJAX pour demander, la demande échouera et le navigateur renverra également une erreur « incompatibilité de source », d'où vient « inter-domaine ».
Grâce à CORS, http://www.test2.com peut simplement ajouter un en-tête pour autoriser les requêtes provenant de http://www.test1.com. Le code php est le suivant :
header("Access-Comtrol-Allow-Origin:*");<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
Où * signifie que n'importe quel domaine est autorisé à soumettre des requêtes à notre serveur. Vous pouvez également définir un nom de domaine spécifié, le code est le suivant :
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>
以上就是本文的全部内容，希望对大家了解熟悉常见的javascript跨域通信方法有所帮助。
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript