4.单向跨域技术 ---JSONP技术
JSONP技术比较简单,其主要原理主要是利用script标签的特性。
script标签和image标签一样,它们都具有src属性,而且这个属性是可跨域的。
因为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 id="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.所请求数据的站点必须是可信任的,如果返回的数据段中注入的有恶意的代码,危害较大,且难以发现。
以上所述就是本文的全部内容了,希望大家能够喜欢。









