2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

使用Javascript的JSONP原理

javascript作者:丿断蝉

jQuery的JSONP的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--类型:请求方式GET / POST
    网址:请求地址
    async:布尔类型,默认为true表示请求是否为异步,如果为false表示为同步。
    数据类型:返回的数据类型
    JSONP:传递给请求处理程序或页面的,用以获得JSONP回调函数名的参数名(一般默认为:回调)
    jsonpCallback: “?” 自定义的JSONP回调函数名称,默认为jQuery的自动生成的随机函数名,也可以写,jQuery的会自动为你处理数据
    成功:调用成功执行的函数
    错误:异常处理函数-->
    <body>
    </body>
    <script type="text/javascript">
        $.ajax({
            url:'index.php',
            type:'get',
            dataType:'jsonp',
            //jsonp:'JSON_CALLBACK',
            jsonpCallback:'JSON_CALLBACK',
            success:function(data){
                console.log(data)
            }
        })
    </script>
</html>

 

原生jsonp方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--首先JSON是一种基于文本的数据交换方式,叫做或者描述数据格式-->
    <!--当一个|网页在请求的JavaScript文件时则不受是否跨域的影响,凡是拥有” SRC”这个属性的标签都拥有跨域的能力,-->
    <!--比如<script>、<img>、<iframe>-->
    <!--所以我们这里运用了脚本标签的跨域能力,让它用一个回调函数包裹着一段JSON格式的数据,-->
    <!--当该数据返回到前端页面的时候,再我们这个执行就函数可以把数据读取出来-->
    <!--前端代码-->
    <!--jsonp.html-->
    <body>
        <button onclick="jsonpServer('jsonp.php')">JSONP</button>
    </body>
    <script>
        function jsonpServer(url) {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", url);
            document.body.appendChild(script);
        }   
        function JSON_CALLBACK(data) {
            console.log(data);
        }
    </script>
</html>

 

本文来源于网络:查看 >
« 上一篇:Javascript中的应用和呼叫继承
» 下一篇:sessionStorage的,localStorage的和饼干
评论
点击刷新
评论
相关博文
×添加代码片段