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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
js模糊查询实例分享
Dec 26 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 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
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP的引用详解
2015/02/22 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python入门教程之基本算术运算符
2020/11/13 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
物业管理专业自荐信
2014/07/01 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android