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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
js漂浮广告实现代码
Aug 15 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
对vue里函数的调用顺序介绍
Mar 17 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
vue中template的三种写法示例
Oct 21 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
77A一级收信机修理记
2021/03/02 无线电
PHP MSSQL 存储过程的方法
2008/12/24 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
强制设为首页代码
2006/06/19 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
开学典礼决心书
2014/03/11 职场文书
项目经理聘任书
2014/03/29 职场文书
初一语文教学反思
2016/03/03 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
详解Redis主从复制实践
2021/05/19 Redis
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python