zoukankan      html  css  js  c++  java
  • Ajax跨域访问

    Ajax跨域访问

    ​ Ajax跨域,简单来说就是一个网站调用另一个网站提供的数据。但是因为存在浏览器的“同源策略”,并不能直接实现。同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。跨域实现有以下方式:

    1.jsonp

    ​ jsonp(填充式JSON或参数式JSON)是应用JSON的一种新方法,是被包含在函数调用中的JSON。可在$.ajax方法中设置dataType:jsonp

    ​ 前台HTML页面:

    <body>
        <script type="text/javascript">
            $.ajax({
            url:'http://www.a67.com/jsonp.php',
            type:'get',//jsonp方式必须使用get方式
            dataType:'jsonp',//返回值类型必须设置为jsonp
            jsonp:'fn',//jsonp跨域的传参,是一个随机数
            success:function(msg){
                alert(msg.id+" "+msg.name);
            }
        })
        </script>
    </body>

    ​ 后台PHP程序:

    <?php
    // 接收跨域的随机数
    $fn = $_GET['fn'];
    // 定义返回值
    $arr = array('id'=>101,'name'=>'zs');
    // 输出返回值
    $str = json_encode($arr);
    echo $fn."($str)";

    2.cors

    ​ 使用cors策略,Cross-Origin Resource Sharing 跨域资源共享

    ​ 前台HTML页面:


    <body>
    <script type="text/javascript">
    $.ajax({
    url:'http://www.a67.com/cors.php',
    type:'post',//类型使用get post均可
    dataType:'text',//返回值类型就是一般的text
    success:function(msg){
    alert(msg);
    }
    })
    </script>
    </body>

    ​ 后台PHP程序:

    <?php
    // 设置http://www.alishow.com网站下的所有程序都能访问当前页面
    header('Access-Control-Allow-Origin:http://www.alishow.com');
    
    // header('Access-Control-Allow-Origin:http://www.alishow.com,http://www.ajax.com.cn');
    
    // 设置所有网站都可以访问当前页面
    // header('Access-Control-Allow-Origin:*');
    
    // 设置POST和GET访问方式均可
    header('Access-Control-Allow-Methods:POST,GET');
    
    echo '123';
  • 相关阅读:
    jQuery同步Ajax带来的UI线程阻塞问题及解决办法
    jQuery的deferred对象详解
    原生js,jquery ajax请求以及jsonp的调用
    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
    js判断手机或Pc端登陆.并跳转到相应的页面
    移动端touch事件封装
    坦然面对:应对前端疲劳
    webpack2 项目
    PPK提供的浏览器类型及版本检测方法
    2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
  • 原文地址:https://www.cnblogs.com/Jianxq12/p/7639399.html
Copyright © 2011-2022 走看看