Ajax——跨域访问

Posted 站错队了同志

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax——跨域访问相关的知识,希望对你有一定的参考价值。

同源

  • 基本概念:同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。
//同一域名下,允许通讯
http://www.a.com/a.js
http://www.a.com/b.js
//同一域名下不同文件夹,允许通讯
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
//同一域名,不同端口,不允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
//同一域名,不同协议,不允许
http://www.a.com/a.js
https://www.a.com/b.js
//域名和域名对应ip,不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
//主域相同,子域不同,不允许
http://www.a.com/a.js
http://script.a.com/b.js
//同一域名,不同二级域名(同上),不允许
http://www.a.com/a.js
http://a.com/b.js
//不同域名,不允许
http://www.cnblogs.com/a.js
http://www.a.com/b.js

跨域

  • 跨域是十分危险的
  • iframe标签src属性可以获取外部网站的dom对象
  • 跨域又可以被利用,从别的网站接收一些十分有用的数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: yellow;
        }
    </style>
</head>
<body>
<h1>我是内部</h1>
<input type="text" value="123">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: green;
        }
    </style>
</head>
<body>
<h1>我是外部</h1>
<iframe src="15-inner.html"></iframe>
<script>
    var iframe = document.querySelector(\'iframe\');
    var innerDocument = iframe.contentWindow.document;
    console.log(innerDocument);
</script>
</body>
</html>

核心思想

  • 因为浏览器禁止跨域访问,但是可以通过src属性进行跨域
  • 在script标签的src属性中添加一个js文件地址,可以实现跨域,但是是写死的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--应该是域名加...全路径,如果要跨域访问的话-->
<script src="js/myjs.js"></script>
</body>
</html>
//myjs.js
function say(str) {
    alert(str);
}

say(\'hello\');
  • 在script标签的scr属性中添加一个php地址,页面加载会自动发送一个get请求,这就写活了
  • 取数据:服务端获取get请求传递的参数,然后再返回回去,并且再利用字符串拼接把json数据传递过去,这时候是一个函数名+实参的形式传递给了页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function say(data) {
        console.log(data);
        console.log(data.name);//wq
        console.log(data.age);//17
    }
</script>
<!--发送了一个get请求-->
<script src="files/07.php?callback=say"></script>

</body>
</html>
<?php
  $str=\'{name:"wq",age:17}\';
  echo $_GET[\'callback\'].\'(\'.$str.\')\';
?>
  • jquery中异步方法已经帮我们封装好了一个jsonpCallback,可以将callback=jsonpCallback拼接到url中,post除外
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input type="button" value="ajax发送jsonp">
<script src="js/jquery.min.js"></script>
<script>
    function say(data) {
        console.log(data);
    }

    $(function () {
        $(\'input\').click(function () {
            $.ajax({
                url: \'files/08.php\',
                dataType: \'jsonp\',
                type:\'post\',
                success: function (data) {
                    console.log(data);
                },
                jsonpCallback: \'say\'
            });
        });
    });
</script>
</body>
</html>
<?php
  $str=\'{name:"wq",age:17}\';
  echo $_GET[\'callback\'].\'(\'.$str.\')\';
?>
//{name: "wq", age: 17}
//{name: "wq", age: 17}

返回两行数据,可以发现,jsonpCallback参数是say,有一个就是调用了say方法,一个是success成功以后打印的传输数据

 

以上是关于Ajax——跨域访问的主要内容,如果未能解决你的问题,请参考以下文章

win10的Edge不支持AJAX跨域访问吗?

ajax跨域访问数据

什么叫ajax跨域访问

跨域访问方法介绍--使用片段识别符传值

Ajax的问题(跨域)

JQuery+ajax+jsonp 跨域访问