前端跨域访问技术jsonp

前端之家收集整理的这篇文章主要介绍了前端跨域访问技术jsonp前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先来说一下大家所熟知的技术:ajax和json。

ajax是前端访问后台数据的一种重要形式,其为区域刷新页面和单页面web应该提供了基础。但是ajax却因为浏览器的安全限制而受到了跨域的限制。所以网站页面上的ajax请求只能访问本网站所在域的后台接口。

而json不仅是js中对象的体现形式,也是后台返回数据的一种重要形式。

现在来说jsonp,jsonp类似于ajax,可以由网页网页向后台发起请求,后台返回json形式的数据,区别在于jsonp可以跨域


现在我们来看一下Ext中调用jsonp的方法

Ext.data.JsonP.request({
url:'http://cnodejs.org/topic/jsonpDetail',callbackKey:'theCallbackFunction',//params:params,success:function(data){
console.log(data);
}
})

以下是nodejs的后台代码

exports.jsonpDetail=function(req,res,next){
vartopic_id=req.params.tid;
varcbStr=req.query.theCallbackFunction;
if(cbStr!=""&&typeofcbStr!="undefined"){
console.log(cbStr+'('+JSON.stringify(retutnJson)+')')
res.writeHead(200,{"Content-Type":"text/javascript"});
res.write(cbStr+'('+JSON.stringify(retutnJson)+')');
res.end();
}else{
res.send(retutnJson);
}
}

结合前后台我们再来看:

theCallbackFunction传递了回调方法名,其实jsonp的核心思想就是回调的时候调用一个回调函数,回调函数可带有后台生成的各种数据,其实相当于动态加载了一段js:

<scriptsrc="http://domainB.com/users?theCallbackFunction=callback1"></script>


jsonp的好处显而易见,可以跨域,对于前段可以自由地访问;对于后台可以自由地被前端访问。

但是jsonp并不能因为这个优点就被滥用,后台需要考虑对自己数据的权限控制,而不能随便地被其他域的前端所访问。

猜你在找的Json相关文章