前端跨域访问技术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并不能因为这个优点就被滥用，后台需要考虑对自己数据的权限控制，而不能随便地被其他域的前端所访问。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!