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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
jquery分页对象使用示例
Apr 01 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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
php简单的留言板与回复功能具体实现
2014/02/19 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python解析最简单的验证码
2016/01/07 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python 字符串只保留汉字的方法
2018/11/16 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
30年同学聚会感言
2014/01/30 职场文书
四年级科学教学反思
2014/02/10 职场文书
教师党员公开承诺书
2014/03/25 职场文书
新年联欢会主持词
2014/03/27 职场文书
中职生自荐信范文
2014/06/15 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
关于倡议书的范文
2015/04/29 职场文书
禁毒心得体会范文
2016/01/15 职场文书
合同补充协议书
2016/03/24 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python
MySQL数据库查询之多表查询总结
2022/08/05 MySQL