下面小編就為大家?guī)?lái)一篇Node.js返回JSONP詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
在使用JQuery的Ajax從服務(wù)器請(qǐng)求數(shù)據(jù)或者向服務(wù)器發(fā)送數(shù)據(jù)時(shí)常常會(huì)遇到跨域無(wú)法請(qǐng)求的錯(cuò)誤，常用的解決辦法就是在Ajax中使用JSONP?；诎踩钥紤]，瀏覽器會(huì)存在同源策略，然而<script/>標(biāo)簽卻具有跨域訪問(wèn)數(shù)據(jù)的能力，這就是JSONP工作的基本原理。有關(guān)同源策略以及什么是JSONP。
在Node.js中實(shí)現(xiàn)JSONP非常簡(jiǎn)單，通過(guò)下面的代碼我們從服務(wù)器返回并運(yùn)行一個(gè)JavaScript函數(shù)，這個(gè)JavaScript函數(shù)已經(jīng)在調(diào)用方提前被定義好了，于是當(dāng)它被返回的時(shí)候就自動(dòng)執(zhí)行了。
var express = require('express');
var router = express.Router();
router.get('/getinfo', function(req, res, next) {
var _callback = req.query.callback;
var _data = { email: 'example@163.com', name: 'jaxu' };
if (_callback){
res.type('text/javascript');
res.send(_callback + '(' + JSON.stringify(_data) + ')');
}
else{
res.json(_data);
}
});
module.exports = router;
代碼中必須規(guī)定從服務(wù)器返回?cái)?shù)據(jù)的類型，代碼res.type('text/javascript')被加在返回的數(shù)據(jù)之前用于告訴瀏覽器這是一段JavaScript代碼。
前端頁(yè)面通過(guò)JQuery調(diào)用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp test</title>
<script src="/bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
<input type="button" value="click" id="btn">
<script type="text/javascript">
$(function(){
$('#btn').on('click', function(){
$.get('http://anothersite/api/getinfo', function(d){
console.log(d);
}, 'jsonp');
});
});
</script>
</body>
</html>
運(yùn)行代碼，點(diǎn)擊按鈕，在瀏覽器的console面板總我們可以看到從遠(yuǎn)程服務(wù)器返回的json對(duì)象。
以上這篇Node.js返回JSONP詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試