www.qjdy.com-奇迹赌场 > 佳美特设计 > 或者同一域名

原标题:或者同一域名

浏览次数:128 时间:2019-07-14

是因为js同源战术的影响,当在某一域名下诉求其余域名,也许同一域名,不相同端口下的url时,就能化为不被允许的跨域诉求。
那那个时候一般怎么消除吧,对此新手光头作者稍作了整治:
1.JavaScript
   在原生js(没有jQuery和ajax支持)的情状下,平时客户端代码是那样的(小编假使是在localhost:8080的端口下的

<script>
  var xhr = new XMLHttpRequest();
  xhr.open("get", "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(null);
</script>

封存,浏览器展开

图片 1

浏览器很暴虐的给你弹出一个同源限制的一无所长,意思正是你不也许跨域乞求url的数量。
那正是说,我先选择第一种政策,运用html中的script标签,插入js脚本:
(1)通过script标签援用,写死你要求的src的url地址,比如:

<script>
var callbackfunction = function(data) {
  console.log('我是跨域请求来的数据-->'   data.name);
};
</script>
<script src="http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js?callback=callbackfunction"></script> 

这边自个儿定义贰个callbackfunction的函数,然后用script标签的src属性跨域央浼数据,那么,test.js的开始和结果通过约定,供给写成那样:
callbackfunction({"name":"wwwwwwwwwwww"}); 保存,打开index.html并刷新:

图片 2

(2)你也能够动态的投入script标签,让html分析的时候,动态的加载script脚本,并呼吁远端数据:

<script>
var callbackfunction = function(data) {
  console.log('我是跨域请求来的数据-->'   data.name);
};
var script = document.createElement('script'),
  body = document.getElementsByTagName('body');

script.src = 'http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js?callback=callbackfunction';
body[0].appendChild(script);
</script>

结果和上边一样。

 图片 3

2.jQuery中的$.ajax()

   设想,当您想要使用jQuery央浼跨域数据的时候,比方(还是刚刚的index.html):

<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
  $.get('http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js',function(data){
    console.log(data);
  })
})
</script>

浏览器依然残暴的报错,因为您那个url是差别的域名下的。

那就是说既然jQuery封装了ajax方法,大家为什么而不是,人家封装好了,你绝不,岂不是找罪受么,代码如下:

<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
  $.ajax({
    async: false,
    type: "GET",
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'callbackfunction',
    url: "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js",
    data: "",
    timeout: 3000,
    contentType: "application/json;utf-8",
    success: function(msg) {
      console.log(msg);
    }
  });
})
</script>

图片 4

当您作了那般多挑逗职业之后,浏览器很舒畅的提交了反应,表示它很爽,重临给了您一个目的,里面是远端分歧域名下test.js中的数据。
3.postMessage iframe

   postMessage是HTML5中新追加的效果,例如本人在地方域名下,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>testa</title>
</head>
<script>
window.onload = function() {
  document.getElementById('ifr').contentWindow.postMessage('我是要经过传递的数据', 'http://i2.mediapower.mobi/adpower/vm/Bora/testb.html');
};
</script>
<body>
  <iframe id="ifr" src="http://i2.mediapower.mobi/adpower/vm/Bora/testb.html"></iframe>
</body>
</html>

那时候,小编远端的testb.html里面包车型客车开始和结果应该是那般:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>testb</title>
</head>
<script>
window.addEventListener('message', function(event) {
  // 通过origin属性判断消息来源地址
  if (event.origin === 'http://192.168.1.152:8080') {
    alert(event.data); 
  }
}, false);
</script>
<body>
123
</body>
</html>

保留代码,打开本地testa.html,访谈远端的testb.html

图片 5

小结了弹指间,jQuery依然要命的好用的,基本上js能干的事务,jQuery都能可怜快速并且连忙的达成,当然,原生js也能一蹴而就广大作业,而HTML5的新功效也特别有力,这两种情势,笔者也许首荐jQuery。

如上正是为大家大饱眼福的3种常用的js跨域诉求数据的措施,希望对我们的求学抱有帮忙。

您恐怕感兴趣的小说:

  • Javascript跨域诉求的4种减轻措施
  • Javascript 跨域访问化解方案
  • JS跨域总计
  • 5种处理js跨域难点方法汇总
  • AJAX javascript的跨域采访实行
  • Javascript实现跨域后台装置阻碍的办法详解

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:或者同一域名

关键词: PT电子游戏

上一篇:我并没有添加错误信息存放位置的方法

下一篇:没有了