首先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
结果如图