他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)JSONP跨域请求实例详解
来源：易贤网&& 阅读：255 次&&日期： 14:46:47
温馨提示：易贤网小编为您整理了“JSONP跨域请求实例详解”,方便广大网友查阅！
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的&script& 元素是一个例外。利用 &script& 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
跨域请求的方式有很多种：
2.document.domain
3.window.name
5.XDomainRequest (IE8+)
6.XMLHTTPRequest (Firefox3.5+)
7.postMessage (HTML5)
8.后台代理
它们有各自的优缺点，返回的数据格式也各不同，应根据需求慎重选择。比如iframe返回html片段就比较适合，费老劲用它返回JSON就得不偿失了。这篇开始我将打造一个实用的跨域请求工具Sjax。使用script请求的最大缺点，挑战是错误处理。比如404错误，它不象XMLHTTPRequest能准确的返回状态码404。我把这个放在最后一篇。
本系列主要描述以上列举的方式4，即通过script返回JSON格式数据数据。这种方式现在称为JSONP。JSON是目前前后台沟通使用最流行，也最广泛的格式之一。相对于早期的AJAX返回XML（AJAX中的X就是XML），JSON显得更轻量级，没有多余的Tag标记，解析也是原生的。XML返回到前端后先转成文档，通过DOM API一层层的解析。解析DOM是开销比较大的，尤其在早期的IE版本中（IE6/7/8），core js与dom沟通的代价是很大的。
JSONP的实现思路很简单
1.前端创建script标记，设置src，添加到head中（你可以往body中添加）
2.后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据
3.回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）
Sjax.load(
url, // 跨越请求的URL
success, // 回调函数，必须定义一个形参，用于接收后台返回的全局变量jsonp （约定后台返回如jsonp = {...}结构）
timestamp, // 传true会加一个时间戳，防止缓存，默认不加
&!DOCTYPE HTML&
&meta charset="utf-8"&&
&title&sjax_0.1.js by snandy&/title&
&script src="http://files.cnblogs.com/snandy/sjax_0.1.js"&&/script&
&p id="p1" style="background:"&&/p&
&input type="button" value="Get Name" onclick="clk()"/&
&script type="text/javascript"&
function clk(){
Sjax.load(
'http://files.cnblogs.com/snandy/jsonp.js',&
function(){
document.getElementById('p1').innerHTML = 'Hi, ' + jsonp.
这个html实现一个最简单的前后台交互功能，点击按钮“Get Name”，获取到name后显示在段落P上。
clk函数中调用Sjax.load方法，Sjax中的S指script。之前我的Ajax系列中使用的Ajax命名，这里就使用了Sjax。
请求的后台url是jsonp.js，它返回如下
jsonp = {name:'jack'};
因为是测试，这里使用最简单的方式实现。请求的后台其实不必是js文件，可以是php，java等任何后台语言，它们可能会连接数据库进行一系列的业务查询。总之它最后返回的结构必须变量jsonp，这个变量就是一个js对象，至于有多复杂则无需关注。
以上所述是小编给大家介绍的JSONP跨域请求实例详解，希望对大家有所帮助
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址：
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读 & & &
&&& &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
非常惭愧，还记得2016年那人生中第一次面试，被问到有没用过ajax？你怎么解决跨域问题时，我回答没用过。。不知道的时候，面试官那一脸茫然，对于当时以为js只是做个轮播图，做点小动画的我来说，ajax、跨域什么的就如同一道难以逾越的高墙一般。。
在后来的实习中终于接触到并且运用起了ajax，跨域也解决过，不过是后端同事解决的（现在才知道那应该就是CORS了吧），所以jsonp到底是啥，每次搜索完看了一下就放弃了。
本文内容浅显，适合人群：1.不懂什么是跨域2.不想自己弄两个不同域名进行跨域测试的童鞋
什么是跨域
我的理解是，当用户对不同协议或不同端口或不同域名的资源进行访问时，就是跨域。
为什么会造成跨域
罪魁祸首：同源策略
同源定义：即同一域，即相同协议&相同端口&相同域名&相同子域名
同源策略规定：XHR对象只能访问与包含它的页面位于同一域中的资源，有利于预防一些恶意行为。
怎么解决跨域
解决办法有很多，CORS、iframe、h5新特性postMessage等，而比较简单的方法就是今天着重介绍的jsonp。
解决依据：尽管不能访问非本域的动态资源，但是类似js文件、样式、图片等静态资源是可以访问的！就是通过这个“漏洞”来解决跨域问题。用&script&标签中的src来写入跨域数据的url，这样就能绕过同源策略了。。“老师，他作弊！”
简单介绍jsonp
JSONP，JSON with Padding的简写，这个全称对jsonp的理解还是有一定的帮助的。填充式JSON或者说是参数式JSON。JSONP的语法和JSON很像，简单来说就是在JSON外部用一个函数包裹着。JSONP基本语法如下：
callback({ "name": "kwan" , "msg": "获取成功" });
JSONP两部分组成：回调函数和里面的数据。回调函数是当响应到来时，应该在页面中调用的函数，一般是在发送过去的请求中指定。
JSONP原理：刚才的解决依据可知，JSONP原理就是动态插入带有跨域url的&script&标签，然后调用回调函数，把我们需要的json数据作为参数传入，通过一些逻辑把数据显示在页面上。
原理看千遍，一写又不会
我想说这个JSONP我看了很多次，参考过不同的文章，原理都会背了，结果自己写一个出来，傻眼。。
网上有很多文章，良心一点的会配有些代码解释，然而对小白来说，要自己down个WAMP什么的服务器集成软件或者自己搭个服务器，再弄两个不同源的html才能进行模拟跨域，这真的。。。。好麻烦。。
终于，看到了一篇文章，一个通过调用api接口来模拟跨域请求数据的DEMO，实在感谢啊！这才是我所要的好吗！（链接在本文最后）
JSONP跨域小实践
你再怎么懂原理，再怎么会JSONP基本语法，不真正执行一下你其实还是懵逼。当然，我认为我还是需要模拟不同源的跨域请求才对真正弄懂跨域有一定好处。
下面展示的代码源于那篇文章，需求是输入歌名，点击搜索后，跨域请求API接口，返回数据后，显示专辑名在页面。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&JSONP&/title&
&input type="text" id="song" name=""&
&input type="button" id="song_search" value="歌曲搜索" name=""&
&div style="width:200height:230background:pink" id="song_list"&&/div&
&script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"&&/script&
&script type="text/javascript"&
var searchJsonCallback=function(data){
//遍历查询结果
var alb_html='';
for(var i in data.list){
alb_html+='&span&专辑：&/span&&div style="color:black"&'+data.list[0].albumname+'&/div&';
$("#song_list").html(alb_html);
$("#song_search").on("click",function(){
var keyword=$("#song").val();
if(keyword==undefined||keyword==""){
alert("歌曲搜索不能为空");
var url = "http://cgi.music.soso.com/fcgi-bin/fcg_search_xmldata.q?source=10&w="+keyword+"&perpage=1&ie=utf-8";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
下面是我对以上代码的一些文字解释：
1）点击按钮后动态插入跨域数据，然后由于此接口用searchJsonCallback({})来封装json格式数据，因此可看作是调用一个函数，同时把json数据作为参数传入
2）所以当动态插入script标签后，写好了的searchJsonCallback()函数将被调用，参数data就是json数据，然后通过遍历渲染到DOM上，完成整个跨域获取数据流程
总结步骤：触发click事件-动态插入带有API接口的script标签-根据回调函数名调用函数-遍历数据-渲染到页面
当JSONP遇上jQuery ajax
注意了，千万不要认为用了jQuery ajax，就是通过它来实现跨域请求，其实只是因为它很好地封装了JSONP而已
用jQuery ajax原理和上面的是一样的，只不过我们不需要手动的插入script标签以及定义回调函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。
于是对上面的代码进行修改，并且把请求数据改为每次显示5条：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&JSONP2&/title&
&input type="text" id="song" name=""&
&input type="button" id="song_search" value="歌曲搜索" name=""&
&div style="width:200height:230background:pink" id="song_list"&&/div&
&script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"&&/script&
&script type="text/javascript"&
$("#song_search").on("click",function(){
var keyword=$("#song").val();
if(keyword==undefined||keyword==""){
alert("歌曲搜索不能为空");
url: 'http://cgi.music.soso.com/fcgi-bin/fcg_search_xmldata.q?source=10&w='+keyword+'&perpage=5&ie=utf-8',
type: 'GET',
dataType: 'jsonp',
jsonp:'callback',
jsonpCallback: 'searchJsonCallback',
success:function(data){
//遍历查询结果
var alb_html=''; //创建一个变量用于DOM拼接
for(var i in data.list){
alb_html+='&p style="color:black"&'+data.list[i].albumname+'&/p&';
console.log(data.list[i].singername);
var name_html='&span&专辑：&/span&';
var sum_html=name_html+alb_
$("#song_list").html(sum_html);
关于jsonp、jsonpCallback两个属性，部分解释一直没看懂，如下：
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)jsonpCallback:"handler",//自定义的(?)jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
直到有次看了下Network，懂了。其实就是拼接到url时想要显示的内容。
如上面情况，url则会变成"http://...&perpage=5&ie=utf-8&callback=searchJsonCallback&..."
所以简单来说，jsonp就是相当于一个名字，一个参数名jsonpCallback就是回调函数名，用来包裹JSON数据的然后将jsonpCallback定义的函数赋值给jsonp定义的参数上，最后拼接在url末尾完成参数传递。
注意：jsonp可以随便写，不写也行，反正默认是callback
但jsonpCallback必须是对应其返回数据的函数名，此API接口返回的数据外围用searchJsonCallback()包裹数据，因此只能是这个（有些文章说这个也是可以自定义的，但我测试时随便写就报错了。。可能因为这个API接口固定了函数名吧）
其实上面这些例子更方便将理论用于实践，毕竟数据等都是现成的，跨域问题也是常见的开发问题，感觉就没必要大费周章才能进行模拟跨域（所以我上面说自己弄服务器那种方法略麻烦）
参考资料：上面提到的原文链接：（可惜没有CORS举例）
另一篇帮助理解的文章：
还有很多良心文章就不一一列举了，这次是首次将跨域理论落实到实践，觉得很过瘾所以就写下来了。排版不太好勿见怪。大神路过如有些其他看法可以在下面留言。
1 收藏&&|&&21
你可能感兴趣的文章
29 收藏，4.1k
6 收藏，2.8k
jsonp用到POST之类的请求就gg了。。。。
jsonp用到POST之类的请求就gg了。。。。
是的~写的时候想在最后说下这一大缺点，后来觉得还是算了，下次写CORS时可以用这一点作为引子啊哈哈（好吧我暂时也就只会这两种方法…）
是的~写的时候想在最后说下这一大缺点，后来觉得还是算了，下次写CORS时可以用这一点作为引子啊哈哈（好吧我暂时也就只会这两种方法…）
这个原理根本不同好吧，你可以自己封装jsonp。
这个原理根本不同好吧，你可以自己封装jsonp。
如果哪个地方说错了，求大神指正！
如果哪个地方说错了，求大神指正！
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。博客分类：
http的网站发送https有很多种方式，https下发http请求只能代理，否则就是破坏了https的安全性
跨域问题在访问第三方rest api时最为常见
什么是跨域
　　由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表（）
　　这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=f";
document.head.appendChild(_script);
实际项目中JSONP通常用来获取json格式数据，这时前后端通常约定一个参数callback，该参数的值，就是处理返回数据的函数名称。
1 &!doctype html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&
&title&jsonp_test&/title&
var f = function(data){
alert(data.name);
/*var xhr = new XMLHttpRequest();
xhr.onload = function(){
alert(xhr.responseText);
xhr.open('POST', 'http://localhost:8888/cors', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("f=json");*/
var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=f";
document.head.appendChild(_script);
1 var query = _url.
console.log(query);
var params = qs.parse(query);
console.log(params);
var f = "";
f = params.
res.writeHead(200, {"Content-Type": "text/javascript"});
res.write(f + "({name:'hello world'})");
res.end();
　　缺点：
　　1、这种方式无法发送post请求（）
　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。
　　这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
1 &!doctype html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&
&title&proxy_test&/title&
var f = function(data){
alert(data.name);
var xhr = new XMLHttpRequest();
xhr.onload = function(){
alert(xhr.responseText);
xhr.open('POST', 'http://localhost:8888/proxy?http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer', true);
xhr.send("f=json");
23 &/html&
1 var proxyUrl = "";
if (req.url.indexOf('?') & -1) {
proxyUrl = req.url.substr(req.url.indexOf('?') + 1);
console.log(proxyUrl);
if (req.method === 'GET') {
request.get(proxyUrl).pipe(res);
} else if (req.method === 'POST') {
var post = '';
//定义了一个post变量，用于暂存请求体的信息
req.on('data', function(chunk){
//通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
req.on('end', function(){
//在end事件触发后，通过querystring.parse将post解析为真正的POST请求格式，然后向客户端返回。
post = qs.parse(post);
method: 'POST',
url: proxyUrl,
form: post
}).pipe(res);
　 需要注意的是如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。12306就提供了一个鲜活的例子。
　　还需要注意一点，对于同一请求浏览器通常会从缓存中读取数据，我们有时候不想从缓存中读取，所以会加一个preventCache参数，这个时 候请求url变成：url?preventCache=....;这本身没有什么问题，问题出在当使用某些前端框架（比如jquery） 发送proxy代理请求时，请求url为proxy?url，同时设置preventCache：true，框架不能正确处理这个参数，结果发出去的请求 变成proxy?url&preventCache=123456（正长应为proxy?url?preventCache=12356）;后端 截取后发送的请求为url&preventCache=123456，根本没有这个地址，所以你得不到正确结果
　　这是现代浏览器支持跨域资源请求的一种方式。
　　当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处 理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-O浏览器判断该相应头中是否包含 Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据
1 &!doctype html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&
&title&jsonp_test&/title&
/*var f = function(data){
alert(data.name);
var xhr = new XMLHttpRequest();
xhr.onload = function(){
alert(xhr.responseText);
xhr.open('POST', 'http://localhost:8888/cors', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("f=json");
/* var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=f";
document.head.appendChild(_script);*/
31 &/html&
1 if (req.headers.origin) {
res.writeHead(200, {
"Content-Type": "text/ charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost'/*,
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'*/
res.write('cors');
res.end();
　　如果我们把Access-Control-Allow-Origin去掉，浏览器会驳回响应，我们也就拿不到数据。
　　需要注意的一点是Preflighted Request的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法，以及不同类型的主题内容。总结如如：
　　1、非GET 、POST请求
　　2、POST请求的content-type不是常规的三个：application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表单）、multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）、text/plain（纯文本）
　　3、POST请求的payload为text/html
　　4、设置自定义头部
　　OPTIONS请求头部中会包含以下头部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers，发送这个请求后，服务器可以设置如下头部与浏览器沟通来判断是否允许这个请求。
　　Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers
1 var xhr = new XMLHttpRequest();
xhr.onload = function(){
alert(xhr.responseText);
xhr.open('POST', 'http://localhost:8888/cors', true);
xhr.setRequestHeader("Content-Type", "text/html");
xhr.send("f=json");
1 if (req.headers.origin) {
res.writeHead(200, {
"Content-Type": "text/ charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'/**/
res.write('cors');
res.end();
　　如果你在调试状态，你会发现后台代码执行了两遍，说明发送了两次请求。注意一下我们的onload代码只执行了一次，所以说OPTIONS请求对程序来说是透明的，他的请求结果会被缓存起来。
　　如果我们修改一下后台代码，把Content-Type去掉，你会发现OPTIONS请求失败。
　　通过setRequestHeader('X-Request-With', null)可以避免浏览器发送OPTIONS请求。
　　根据我的测试，当使用cors发送跨域请求时失败时，后台是接收到了这次请求，后台可能也执行了数据查询操作，只是响应头部不合符要求，浏览器阻断了这次请求。
　　这是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求。看一下微软自己的例子就行
1 &!DOCTYPE html&
&h2&XDomainRequest&/h2&
&input type="text" id="tbURL" value="http://www.contoso.com/xdr.txt" style="width: 300px"&&br&
&input type="text" id="tbTO" value="10000"&&br&
&input type="button" onclick="mytest()" value="Get"&&&&
&input type="button" onclick="stopdata()" value="Stop"&&&&
&input type="button" onclick="readdata()" value="Read"&
&div id="dResponse"&&/div&
function readdata()
var dRes = document.getElementById('dResponse');
dRes.innerText = xdr.responseT
alert("Content-type: " + xdr.contentType);
alert("Length: " + xdr.responseText.length);
function err()
alert("XDR onerror");
function timeo()
alert("XDR ontimeout");
function loadd()
alert("XDR onload");
alert("Got: " + xdr.responseText);
function progres()
alert("XDR onprogress");
alert("Got: " + xdr.responseText);
function stopdata()
xdr.abort();
function mytest()
var url = document.getElementById('tbURL');
var timeout = document.getElementById('tbTO');
if (window.XDomainRequest)
xdr = new XDomainRequest();
xdr.onerror =
xdr.ontimeout =
xdr.onprogress =
xdr.onload =
xdr.timeout = tbTO.
xdr.open("get", tbURL.value);
xdr.send();
alert("Failed to create");
alert("XDR doesn't exist");
78 &/body&
79 &/html&
以上就是我在实际项目中遇到的跨域请求资源的情况，有一种跨域需要特别注意就是在https协议下发送https请求，除了使用proxy代理外其他方法都无解，会被浏览器直接block掉。如果哪位道友知道解决方法，麻烦你告诉我一声。
　　最后附上完整的测试demo
　　iss中：
1 &!doctype html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&
&title&jsonp_test&/title&
/*var f = function(data){
alert(data.name);
var xhr = new XMLHttpRequest();
xhr.onload = function(){
alert(xhr.responseText);
xhr.open('POST', 'http://localhost:8888/cors', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("aaaa","b");
xhr.send("f=json");
/* var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=f";
document.head.appendChild(_script);*/
32 &/html&
1 &!doctype html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&
&title&proxy_test&/title&
var f = function(data){
alert(data.name);
var xhr = new XMLHttpRequest();
xhr.onload = function(){
alert(xhr.responseText);
xhr.open('POST', 'http://localhost:8888/proxy?https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer', true);
xhr.send("f=json");
23 &/html&
node-server
1 var http = require('http');
2 var url = require('url');
3 var fs = require('fs');
4 var qs = require('querystring');
5 var request = require('request');
7 http.createServer(function(req, res){
var _url = url.parse(req.url);
if (_url.pathname === '/jsonp') {
var query = _url.
console.log(query);
var params = qs.parse(query);
console.log(params);
var f = "";
f = params.
res.writeHead(200, {"Content-Type": "text/javascript"});
res.write(f + "({name:'hello world'})");
res.end();
} else if (_url.pathname === '/proxy') {
var proxyUrl = "";
if (req.url.indexOf('?') & -1) {
proxyUrl = req.url.substr(req.url.indexOf('?') + 1);
console.log(proxyUrl);
if (req.method === 'GET') {
request.get(proxyUrl).pipe(res);
} else if (req.method === 'POST') {
var post = '';
//定义了一个post变量，用于暂存请求体的信息
req.on('data', function(chunk){
//通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
req.on('end', function(){
//在end事件触发后，通过querystring.parse将post解析为真正的POST请求格式，然后向客户端返回。
post = qs.parse(post);
method: 'POST',
url: proxyUrl,
form: post
}).pipe(res);
} else if (_url.pathname === '/index') {
fs.readFile('./index.html', function(err, data) {
res.writeHead(200, {"Content-Type": "text/ charset=UTF-8"});
res.write(data);
res.end();
} else if (_url.pathname === '/cors') {
if (req.headers.origin) {
res.writeHead(200, {
"Content-Type": "text/ charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type,aaaa'/**/
res.write('cors');
res.end();
65 }).listen(8888);
浏览: 143150 次
来自: 杭州
楼主明显的误导人啊
局部变量，成员变量没搞清楚呢
如果方法里无局部变量，那么不受任何影响；如果方法里有局部变量， ...
然后这是jsp的代码，谢谢var userEm = new E ...
这是servlet的方法，但是一直提交不过去，能帮我看下么pu ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'}