因为script标签返回的都是js代码,且该js代码会自动执行。所以,如果我们请求返回的数据也是类似一段js代码的形式,岂不是就可以实现在脚本加载完毕后自动执行。
如果我们的请求,返回的数据是 callback + '(' + json + ')'; 这种形式的数据, 那么在脚本加载完毕之后也就能自动执行callback()函数了.
4.1.客户端写法
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <button>请求数据</button> </body> <script> window.onload=function(){ var button=document.getElementById("ibutton"); function callback(data){ //处理data } button.onclick=function(){ var script=document.createElement("script"); script="http://www.sasd.com/json/?callbak=callback"; document.body.insertBefore(script,document.body.firstChild);//加载脚本 } } </script> </html>
1.客户端将回调函数名写入<Script>脚本的url参数中。
2.script加载的时候会发送跨域请求。
4.2.服务器端
1.通过url得到函数名,命名为callback
2.将请求的数据作为函数的参数格式转化json格式,命名为。
3.将返回结果拼接为 callback+"("+json+")"; --------返回的就是填充式的数据,这段数据在脚本中会自动执行。
4.返回数据.
4.3.JSONP技术的缺点
1.因为是通过url传参数,所以请求只能是get类型的。
2.<script>目前只有onload属性事件,onerror还没有统一化,如果加载脚本出错,客户端很难得到反馈。
3.所请求数据的站点必须是可信任的,如果返回的数据段中注入的有恶意的代码,危害较大,且难以发现。