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