AJAX跨域

博客介绍了同源策略及跨域概念,列举了如 http://www.example.com/detail.html 调用不同协议、域名、端口的 URL 为跨域情况。还给出了 jsonp、document.domain+iframe 等跨域解决方法,重点阐述了 JSONP 原理,包括静态 script 标签跨域请求、动态创建 script 标签,并用 jquery 演示 JSONP 获取跨域数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

同源策略是从安全性的角度考虑浏览器的,所谓的同源是指请求的URL地址中的协议、域名、端口都相同,只要有其中一个不相同就是跨域。
比如:
http://www.example.com/detail.html
调用http://api.example.com/detail.html (api 域名不同)
调用https://www.example.com/detail.html (https 协议不同)
调用http://www.example.com:8080/detail.html (:8080端口不同)
解决方法:

  1. jsonp
  2. document.domain+iframe
  3. location.hash+iframe
  4. window.name+iframe
  5. window.postMessage
  6. flash等第三方插件

JSONP原理

静态script标签的src属性进行跨域请求

<script /*async*/ type="text/javascript" src="http://tweb.com/data.php?flag=1">
<script type="text/javascript">
        /*
        script标签里面的async属性表示异步加载资源,默认情况下是同步加载

        这种方式存在的两个主要的问题:
        1、必须保证加载的顺序
        2、不方便通过程序传递参数
        */
        console.log(data);
        console.log(data.username);
        console.log(data.password);
    </script>

动态创建script标签

jsonp的本质:动态创建script标签,然后通过他的src属性发送跨域请求,然后服务器端响应的数据格式为【函数调用(foo(实参))】,所以在发送请求之前必须先声明一个函数,并且函数的名字与参数中传递的名字要一致,这里声明的函数也是由服务器响应的内容来调用。

<script type="text/javascript">
        /* 
        hello就是回调函数
        这就是jsonp的本质:动态创建script标签,然后通过他的src属性发送跨域请求,然后服务器端响应的数据格式为【函数调用(foo(实参))】
        所以在发送请求之前必须先声明一个函数,并且函数的名字与参数中传递的名字要一致,这里声明的函数也是由服务器响应的内容(实际上就是一段js代码)来调用
         */
        var script = document.createElement('script');
        script.src = 'http://tweb.com/data.php?callback=hello&username=zhangsan&password=123456';
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
        function hello(data) {
            console.log(data);
        }

jquery演示JSONP获取跨域的数据

<script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $.ajax({
                    type: 'get',
                    url: 'http://tweb.com/jsonp.php',
                    dataType: 'jsonp',
                    jsonp: 'cb', //jsonp属性作用自定义参数名字callback=abc 名字指的是等号前面的键,后端根据键获取方法名
                    // jquery获取的参数名默认callback
                    jsonpCallback: 'abc',// 这个属性的作用就是自定义回调函数的名字callback=abc 指的是等号后边的值
                    data: {},
                    success: function (data) {
                        console.log(data.username);
                        console.log(data.password);
                    },
                    error: function (data) {
                        console.dir(data);
                        console.log('error');
                    }

                })
            })

        })
    </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值