2019-01-09 11:19阅读: 220评论: 0推荐: 0

Javascript的jsonp原理

Javascript的jsonp原理
 
首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式
当一个网页在请求JavaScript文件时则不受是否跨域的影响,凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>
所以我们这里运用了script标签的跨域能力,让它用一个callback函数包裹着一段JSON格式的数据,当该数据返回到前端页面的时候,我们再执行这个函数就可以把数据读取出来
前端代码
jsonp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
    <head>
        <meta charset="UTF-8">
        <title>Wsscat's jsonp</title>
    </head>
    <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>

  

后端代码
jsonp.php
1
2
3
4
5
<?php
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>

  

jQuery的jsonp方法
 
type:请求方式 GET/POST
url:请求地址
async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步。
dataType:返回的数据类型
jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success:调用成功执行的函数
error:异常处理函数
js代码
1
2
3
4
5
6
7
8
9
10
$.ajax({
            url:'index.php',
            type:'get',
            dataType:'jsonp',
            //jsonp:'JSON_CALLBACK',
            jsonpCallback:'JSON_CALLBACK',
            success:function(data){
                console.log(data)
            }
        })
php代码
1
2
3
4
5
<?php
    $data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
    $data = "JSON_CALLBACK(" . $data . ")";
    echo $data;
?>

  

 

本文作者:Mahmud(مەھمۇد)

本文链接:https://www.cnblogs.com/mahmud/p/10243234.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Mahmud(مەھمۇد)  阅读(220)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.

Not available