zoukankan      html  css  js  c++  java
  • 初步了解关于js跨域问题

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?),或者是js获取在页面内的不同域的框架中的数据(iframe),ifame在不同域下的js通信。

    跨域的表现主要有:协议不同,主机名不同,端口号不同

    比如

    http://www.abc.com和https://www.abc.com属于协议不同

    http://www.abc.com和http://qqq.abc.com属于主机名不同

    http://www.abc.com和http://www.abc.com:80属于端口号不同

    而http://www.abc.com和http://www.abc.com/list.html是属于同域下的

    第一种解决跨域问题的方法是:通过jsonp

    在js中,我们直接通过XMLHttpRequest请求不同域的数据是不可以的,jsonp通过引入js脚本的方式解决了这个问题,比如假设需要在a.html中通过ajax获取不同域上的json数据,假设这个json数据就在http://www.abc.com/data.php,那么可以通过以js文件的形式引入

    a.html

    <script>

    function dosomething(jsondata) {

    //这里处理获得的json数据

    }

    </script>

    <script src="http://www.abc.com/data.php?callback=dosomething"></script>

    这里的获取数据的地址后还有callback参数是惯用参数名,因为是当做js文件引入的,那么返回的也应该是js文件,所以在这个页面的php中应该是这样的

    <?php

      $callback = $_GET('callback');//得到回调函数名

      $data = array('a','b','c');//传递的数据

      echo $callback.'('.json_encode($data).')';//输出

    ?>

    输出:dosomething(['a','b','c'])

    因此我们可以很清楚地知道,dosomething函数就是通过http://www.abc.com/data.php?callback=dosomething返回的js文件,dosomething函数的参数是返回的json数据,这样我们就得到了跨域的数据

    所以通过jsonp的方法解决跨域问题的思路是,通过script标签引入一个js文件,这个js文件载入成功后会执行url参数中指定的函数,并且会把获取的json数据当做参数传入,所以jsonp是需要服务器端页面的配合的。

    jQuery可以很方便地封装jsonp

    <script>

     $.getJSON("http://www.abc.com/data.php?callback=?",function(){

      //处理JSON数据

    });

    </script>

    jquery会自动生成一个全局函数来代替callback=?的?,与js实现的原理是一致的,之后获取到数据后,全局函数又会自动销毁,相当于一个临时代理函数的功能,

    $getJSON方法可以自动判断是否跨域,如果不跨域,则按普通的ajax方法,如果跨域,就通过异步加载调用js文件来调用jsonp的回调函数。

    二、document.domain

    这个方法说到底就是将两个域设置成相同的域名,比如,可以把http://www.a.com和http://a.com设成相同的域名即可,但是这个设置是有条件限制的,document.domain只能设置成自身或更高一级的父域,比如b.c.a.com可以设成、b.c.a.com、c.a.com、a.com都是可以的,但是设成d.b.c.a.com是不可以的,因为这是b.c.a.com的子域,同样,设成d.com也是不可以的,因为已经是不同域了。

    而且document.domain只适用于不同的子域之间的框架间的交互,如果要通过ajax方法进行跨域获取数据的话,可以在本页面设置一个隐藏的iframe来进行代理,将ifame载入跟需要获取数据的那个页面相同的域的页面,然后通过iframe获取数据,而js也可以正常的操作这个iframe,再通过document.domain方法去获取iframe里的数据就可以了。

    举个例子:

    在http://a.html里设置主域,

    <script>

      document.domain="a.html";//设置成主域

      function test(){

        alert("document.getElementById('iframe').contentWindow");

      }

    </script>

    <body>

    //载入需要获取页面的数据

      <iframe id="iframe" src="http://b.com/data.html" onload="test()" ></iframe>

    </body>

  • 相关阅读:
    [BZOJ1666][Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏
    [BZOJ1692][Usaco2007 Dec]队列变换
    [BZOJ1599][Usaco2008 Oct]笨重的石子
    [BZOJ1603][Usaco2008 Oct]打谷机
    [BZOJ1614][Usaco2007 Jan]Telephone Lines架设电话线
    [BZOJ1617][Usaco2008 Mar]River Crossing渡河问题
    [BZOJ1612][Usaco2008 Jan]Cow Contest奶牛的比赛
    [BZOJ1600][Usaco2008 Oct]建造栅栏
    [BZOJ1230][Usaco2008 Nov]lites 开关灯
    hdu 2199 Can you solve this equation? 二分
  • 原文地址:https://www.cnblogs.com/zhangyanjie/p/6619160.html
Copyright © 2011-2022 走看看