在使用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

Node.js返回JSONP的更多相关文章

  1. Node.js 返回 JSON 数据

    Node.js 返回 JSON 数据 request.end([data[, encoding]][, callback]) var http = require('http'); const log ...

  2. Node.js返回JSON

    在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<scri ...

  3. Node.js初探之实现能向前台返回东西的简单服务器

    nodejs nodejs文件就是一个简单的js文件. 在shell中运行 Step 1. 打开终端,进入这个js文件所在目#录 Step 2. 用 'node 文件名.js' 命令运行它即可. 用n ...

  4. Node.js 使用jQuery取得Nodejs http服务端返回的JSON数组示例

    server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...

  5. Node.js 使用jQuery取得Nodejs http服务端返回的JSON对象示例

    server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...

  6. node.js通过回调函数获取异步函数的返回结果

    html文件代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 前端使用node.js+express+mockjs+mysql实现简单服务端,2种方式模拟数据返回

    今天,我教大家来搭建一个简单服务端 参考文章: https://www.jianshu.com/p/cb89d9ac635e https://www.cnblogs.com/jj-notes/p/66 ...

  8. node.js连接本地数据库及json返回数据

    新建一个文件夹node.js,目录下打开命令初始化一下 cnpm init 然后下载express框架 cnpm install express --save 接着下载数据库的依赖 cnpm inst ...

  9. 了不起的Node.js读书笔记

    原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 第二章 Js概览 基于GoogleV8引擎 Object.keys(o) 数组方法:遍历forEach.过滤filter ...

随机推荐

  1. 一些VS2013的使用技巧

    作者:h46incon的Blog 1. Peek View 可以在不新建TAB的情况下快速查看.编辑一个函数的代码. 用法:在光标移至某个函数下,按下alt+F12. 然后在Peek窗口里可以继续按a ...

  2. SilverLight CheckBox 控件 DataContext属性与DataContextChanged事件

    当CheckBox对象创建时,会触发一次DataContextChanged事件,默认值待定,销毁时不会触发,代码修改DataContext时也会触发

  3. pair的使用

    #include<iostream> #include<cmath> #include<cstdio> #include<algorithm> #inc ...

  4. 基于redis的点赞功能设计

    前言 点赞其实是一个很有意思的功能.基本的设计思路有大致两种, 一种自然是用mysql等 数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回m ...

  5. Leetcode Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  6. 一些ES5的操作数组的方法

    在ES5规范中新增了不少操作数组的方法,特此罗列一下以备使用 1. forEach循环 有点类似jQuery的each循环 [12,23,36,4,5].forEach(function(v,k){ ...

  7. 浅谈SQL Transaction在请求中断后的行锁表锁

    最近在维护Web Service接口时,由于数据数据量达到千万级别,接口调用不时出现错误让人不胜烦恼,经过性能测试查出瓶颈在数据库数据处理上,可着实忙了一番.相信众多程序猿和DBA都会头痛性能的问题, ...

  8. OpenGL Insights 阅读有感 - Tile Based架构下的性能调校 翻译

    Performance Tunning for Tile-Based Architecture Tile-Based架构下的性能调校 by Bruce Merry GameKnife译 译序 在大概1 ...

  9. keepalived 原主上线时vip漂移情况

    1. 设置为MASTER,BACKUP 优先级相同 的情况: master端的keepalived起来就会获取到vip变成主. 2. 设置为BACKUP,BACKUP 一个优先级高一个优先级低 的情况 ...

  10. python将图片转换为Framebuffer裸数据格式(终端显示图片)

    要在ubuntu终端显示图片或者在板子的LCD显示图片,Framebuffer是一个简单易用的接口,直接写入像素信息即可. 但普通的图片带有头部信息或者编码格式不同,直接送入Framebuffer是显 ...