Node.js返回JSONP详解


Posted in Javascript onMay 18, 2016

在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP。基于安全性考虑,浏览器会存在同源策略,然而<script/>标签却具有跨域访问数据的能力,这就是JSONP工作的基本原理。有关同源策略以及什么是JSONP。

在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对象。

Node.js返回JSONP详解

以上这篇Node.js返回JSONP详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
图解JavaScript中的this关键字
May 28 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
noty ? jQuery通知插件全面解析
May 18 #Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 #Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 #Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 #Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 #Javascript
深入理解JQuery中的事件与动画
May 18 #Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
解析smarty模板中类似for的功能实现
2013/06/18 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
layui使用label标签的方法
2019/09/14 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
js实现无缝轮播图
2020/03/09 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
解决python selenium3启动不了firefox的问题
2018/10/13 Python
如何利用python 读取配置文件
2021/01/06 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
七夕活动策划方案
2014/08/16 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
初中语文教学研修日志
2015/11/13 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
mysql 获取时间方式
2022/03/20 MySQL