IT工程師數位筆記本

文章出處

在使用JQuery的Ajax從服務器請求數據或者向服務器發送數據時常常會遇到跨域無法請求的錯誤,常用的解決辦法就是在Ajax中使用JSONP。基于安全性考慮,瀏覽器會存在同源策略,然而<script/>標簽卻具有跨域訪問數據的能力,這就是JSONP工作的基本原理。有關同源策略以及什么是JSONP,可以參考園子里的這篇文章http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

在Node.js中實現JSONP非常簡單,通過下面的代碼我們從服務器返回并運行一個JavaScript函數,這個JavaScript函數已經在調用方提前被定義好了,于是當它被返回的時候就自動執行了。

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;

代碼中必須規定從服務器返回數據的類型,代碼res.type('text/javascript')被加在返回的數據之前用于告訴瀏覽器這是一段JavaScript代碼。

前端頁面通過JQuery調用:

<!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>

運行代碼,點擊按鈕,在瀏覽器的console面板總我們可以看到從遠程服務器返回的json對象。

當然,如果使用express,則可以直接使用下面的代碼:

router.get('/getinfo',function (req,res,next) {
 var _data = { email: 'example@163.com', name: 'jaxu' };
 res.type('application/json');
 res.jsonp(_data);
});

參考express的文檔http://www.expressjs.com.cn/4x/api.html#res.jsonp

文章列表