先来说一下大家所熟知的技术: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) { var topic_id = req.params.tid; var cbStr = req.query.theCallbackFunction; if (cbStr != "" && typeof cbStr != "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:
<script src="http://domainB.com/users?theCallbackFunction=callback1"></script>
jsonp的好处显而易见,可以跨域,对于前段可以自由地访问;对于后台可以自由地被前端访问。
但是jsonp并不能因为这个优点就被滥用,后台需要考虑对自己数据的权限控制,而不能随便地被其他域的前端所访问。