在使用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. AndroidAnnotations(Code Diet)android快速开发框架

    最近用了一款很不错的android快速开发框架,1000行的代码瞬间变成几百行,不用你会后悔的 特点: (1) 依赖注入:包括view,extras,系统服务,资源等等(2) 简单的线程模型,通过an ...

  2. 对rxandroid的简单理解

    最近发现这个rxandroid挺火的,我就研究了一下,还真的挺不错. 首先在说之前可能很多人会和我刚刚学习的时候一样有很多疑问,如: 1:rxandroid是什么东西? 2:rxandroid能干嘛? ...

  3. java-并发-线程

    浏览以下内容前,请点击并阅读 声明 软件的并发是指同时做多件事情,java平台一开始就支持并发编程,java编程语言以及类库含有对并发最基本的支持,从5.0版本开始,java平台开始包含一些高并发的A ...

  4. 4.3 多线程进阶篇<中>（GCD）

    更正:队列名称的作用的图中,箭头标注的有些问题,已修正 本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书” 本文源码 Demo 详见 Gith ...

  5. Jaunt登陆索尼PSVR，为其提供大量VR视频

    索尼PS VR自从推出就广受用户青睐,当然不仅仅是其低于高端VR头显的价格,还在于PS VR提供的丰富游戏内容.近日,国外视频网站Jaunt还专门为PSVR推出了专版APP,为其提供超过 150 个沉 ...

  6. 顺序表(SeqList)

    ---恢复内容开始--- 数据结构在上周结课,接下来就是为期几周的上机实验,说是实验课我感觉还不如不上.几乎每个人都是按着老师的要求把书上的代码打一遍,变都不变.一遍以后连自己打的什么都不知道. 与其 ...

  7. 使用maven搭建ssh框架

    首先搭建sturts2框架,配置pom文件: <properties> <!-- 文件拷贝时的编码 --> <project.build.sourceEncoding&g ...

  8. tcpdump

    tcpdump tcp -i eth1 -t -s -c and dst port ! and src net -w ./target.cap (1)tcp: ip icmp arp rarp 和 t ...

  9. java项目启动后,数据库字段生成 user_name带下划线这种形式的

    hibernate 5.0 版本以上去掉了 hibernate.naming-strategy = org.hibernate.cfg.ImprovedNamingStrategy  这个属性,如果非 ...

  10. springmvc2 一个控制器写多个方法（非注解方式）

    出处:http://blog.csdn.net/xuewenke/article/details/23895999 springmvc2 一个控制器写多个方法(非注解方式) 分类: spring 20 ...