借助node实战JSONP
2016-05-15 23:52
549 查看
一、前言: |
1、协议相同;
2、域名相同;
3、端口相同。
但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限制,其中有一方法就是JSONP。
JSONP的基本思想:就是通过<script>的src,向服务器请求数据,且这不受同源策略限制(img和iframe的src也是如此);然后服务器将相应的数据放入指定的函数回调名中,返回给前端。
这,就实现了跨域请求信息。
如下图所示:
了解了JSONP的大体思路,接下来,我们借助node来搭建一个简单的服务器,与前端一步步实现JSONP带来的跨域请求之旅吧。
二、搭建node server: |
So,你得对node有一定认识以及开发环境。(可参见“初探nodeJS”)。
接下来,我们就编写一个简单的node服务器吧。
首先,我们需要引入http模块,因为是基于http请求的嘛。然后就是用其创建一个http服务器,如监听的是8080端口。
如下:
'use strict'; //通过require将http库包含到程序中 var http = require('http'); //创建新的HTTP服务器 var server = http.createServer(); //通过request事件来响应request请求 server.on('request',function(req, res){ res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); res.end('Hell World\n'); }); //监听8080端口 server.listen('8080'); //用于提示我们服务器启动成功 console.log('Server running!');
接着,因为我们要对使用JSONP的请求与正常请求区分,所以,后台得判断处理—通过解析url字符串,假设这里我们是通过带有’/jsonp’的路径名来判断。
如下:
'use strict'; //通过require将http库包含到程序中 var http = require('http'); //引入url模块解析url字符串 var url = require('url'); //创建新的HTTP服务器 var server = http.createServer(); //通过request事件来响应request请求 server.on('request',function(req, res){ var urlPath = url.parse(req.url).pathname; //如果urlPath为'jsonp',就认定该请求为携带jsonp方法的http请求 if(urlPath === '/jsonp'){ res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'}); var data = { "name": "Monkey" }; data = JSON.stringify(data); //假设我们定义的回调函数名为test var callback = 'test'+'('+data+');'; res.end(callback); } else{ res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); res.end('Hell World\n'); } }); //监听8080端口 server.listen('8080'); //用于提示我们服务器启动成功 console.log('Server running!');
在上面的代码中19行,有个缺点就是,我们将回调函数的名字规定死了,当我们判断请求为JSONP时,只能往前端传入test,这样显然不合理。
所以,我们得借助于querystring 这个模块,来处理query字符串。
如下:
'use strict'; //通过require将http库包含到程序中 var http = require('http'); //引入url模块解析url字符串 var url = require('url'); //引入querystring模块处理query字符串 var querystring = require('querystring'); //创建新的HTTP服务器 var server = http.createServer(); //通过request事件来响应request请求 server.on('request',function(req, res){ var urlPath = url.parse(req.url).pathname; var qs = querystring.parse(req.url.split('?')[1]); if(urlPath === '/jsonp' && qs.callback){ res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'}); var data = { "name": "Monkey" }; data = JSON.stringify(data); var callback = qs.callback+'('+data+');'; res.end(callback); } else{ res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); res.end('Hell World\n'); } }); //监听8080端口 server.listen('8080'); //用于提示我们服务器启动成功 console.log('Server running!');
这样,我们就将一个我们需要的服务器搭建好了。
服务器有了,接下来,就是前端跨域请求了。
三、JSONP跨域请求之旅: |
所以,代码可以如下:
<!DOCTYPE html> <head> <title>jsonp</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> function test(data){ alert(data.name); }; </script> <script src="http://127.0.0.1:8080/jsonp?callback=test"></script> </body> </html>
好了,前后端都编码完毕,接下来,我们就看看效果吧。
首先启动node服务器,如下:
注:我将我们搭建的服务器server.js放在D:/JSONP中
接下来,运行上面所写的html代码,可以发现请求成功,并执行test方法。
但,我们一进来,就得跨域请求,是否有点不妥,所以可以动态创建script元素,并指定相应请求,任由我们所为。
如下:
//动态创建script标签,并请求 function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.src = src; document.body.appendChild(script); }; //如:在onload后,跨域请求 window.onload = function(){ addScriptTag('http://127.0.0.1:8080/jsonp?callback=monkey'); }; //回调的方法,且必须为全局方法,不然会报错 function monkey(data){ alert(data); };
JSONP还需要注意的就是,回调函数的方法必须是全局的,不然会报错的,因为是通过script的src请求的嘛,请求成功后立即执行。
相关文章推荐
- Nodejs学习路线图
- 深入浅出Node.js(六):Buffer那些事儿
- LinkNode 温度报警器视频(2016-05-15)
- 为什么在Nodes of the cluster页面没有显示所有的node?
- node.js开发之多人博客
- nodejs q模块
- nodejs及npm命令
- NodeJS学习
- Nodejs 内容
- Hadoop的nodemanager老是启动就挂掉解决方法以及如何查看hadoop日志
- ubuntu 15.10 搭建 node.js 环境
- node.js简介
- node+Express开发
- [LintCode] Swap Two Nodes in Linked List 交换链表中的两个结点
- nodejs后台文件上传模块connect-multiparty
- Google Cloud宣布加入NodeJS基金会
- Node.js + Web Socket 打造即时聊天程序嗨聊
- 启动namenode失败:FATAL error
- 《nodejs开发指南》微博实例常见错误汇总express4.x.x+jade
- hadoop2.4.1启动datanode启动不了