jsonp的简单实现

首先jsonp和json和ajax都没有太大的关系，


json是一种数据格式，AJAX主要依靠XMLHttpRequest对象向服务器发送请求，获取数据，

 

而jsonp是开发者为了绕过同源策略而动态创建的一段js代码，

 

首先我们来看一段代码

<script src="json.txt"></script>

json.txt里面的代码：

alert(0)

那么这段代码是否会执行，还是报错，答案是肯定的，会执行

javascript文件的后缀不一定必须是.js可以是任意的，

简单来说jsonp就是先声明一个函数，然后动态创建一段javascript代码然后执行它，

先写一个简单的例子

打开百度的官网，F12点击network

 

 

输入123后打开最后一个结果

网址应该是https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=cbFun&wd=123

其中cbFun就是回调函数

我们写一个简答的实现

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <script>
        function cbFun(data){
            document.getElementById('container').innerHTML=JSON.stringify(data);
        }
        var scriptElement=document.createElement('script');
        scriptElement.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=cbFun&wd=123';
        document.body.appendChild(scriptElement);
    </script>
</body>
</html>

 

这样我们就简单的实现了jsonp

结果如图

 

posted on 2017-08-01 20:25  -韩帅  阅读(187)  评论(0)  编辑  收藏  举报

导航