• jsonp跨域


    /*
    * @CORS跨源资源共享 ==> 使用自定义的HTTP头部让浏览器与服务器进行沟通
    * @Origin头部 ==> 包含请求页面的源信息(协议, 域名和端口)
    * @如: Origin: http://www.nczonline.net
    * @如果服务器认为这个请求是可以接受的就在Access-Control-Allow-Origin头部返回相同的源信息
    */


    /*
    * @JSONP(JOSN with padding) ==> 填充式JSON或参数式JSON, 是应用JSON的一种新方法
    * @JSONP ==> 由两部分组成, 回调函数和数据
    * @1.回调函数 ==> 是响应到来时应该在页面中调用的函数, 回调函数的名字一般的请求中指定
    * @2.数据 ==> 是传入回调函数中的JSON数据
    * @3.JOSNP是通过动态<script>元素来使用, 这样就不受跨域影响
    */

    // 前端使用jq

    $.ajax({
        type: "GET",
        async: false,
        url:"http://taoalan.com/json/alan.php",
        dataType: "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
        success: function(json){
            alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。回调函数名为: '+json.func);
        },
        error: function(){
         alert("fail");
        }
    });

    // 后台http://taoalan.com/json/alan.php文件中

    <?php
    $callback = $_GET["callback"];
    $a = array(
       'code'=>'CA1998',
        'price'=>'6000',
        'tickets'=>20,
        'func'=>$callback,
    );
    $result = json_encode($a);
    echo "flightHandler($result)";
    exit;
    ?>

    // 原生js使用script动态添加

    function loadhandleResponse(){
        var script = document.createElement("script");
        script.src = "http://taoalan.com/json/alan.php?callback=flightHandler";
        document.body.insertBefore(script, document.body.firstChild); 
    }
  • 相关阅读:
    Vue-CLI项目-axios模块前后端交互(类似ajax提交)
    Vue-CLI项目中路由传参
    HTML标签嵌套规则
    POJ1050 To the Max
    POJ2488 A Knight's Journey
    POJ1083 Moving Tables
    洛谷P1265 公路修建
    POJ2236 Wireless Network
    洛谷P1991 无线通讯网
    POJ1018 Communication System
  • 原文地址:https://www.cnblogs.com/alantao/p/7700676.html
Copyright © 2020-2023  润新知