不会的要多查多问，不然不会的永远不会，哪怕你离会就差了那么一点点
第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]

NodeJs JSONP数据接口定义

[不指定 2016/09/06 18:09 | by 刘新修 ]
JavaScript代码
  1. var http = require('http');    
  2. var urllib = require('url');    
  3.     
  4. var port = 10011;    
  5. var data = {'name': 'jifeng', 'company': 'taobao'};    
  6.     
  7. http.createServer(function(req, res){    
  8.   var params = urllib.parse(req.url, true);    
  9.   console.log(params);    
  10.   if (params.query && params.query.callback) {    
  11.     //console.log(params.query.callback);    
  12.     var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp    
  13.     res.end(str);    
  14.   } else {    
  15.     res.end(JSON.stringify(data));//普通的json    
  16.   }        
  17. }).listen(port, function(){    
  18.   console.log('server is listening on port ' + port);      
  19. })    

自建Node路由Jsonp接口访问地址：http://liuxinxiu.com:3000/jsonp?Jsoncallback=2016&&name=liuxinxiu

JavaScript代码
  1. function jsonp(){  
  2.     this.exec=function(route,req,res){  
  3.        var data1={key:'value',hello:'world',name:'刘新修'};  
  4.        var data2={'name':'wangjiang','company':'taobao'};  
  5.        console.log(req+'---'+route)  
  6.        res.statusCode=200;  
  7.        //res.setHeader('content-type','application/json;charset=utf-8');  
  8.        //res.setHeader('Content-Type','text/html');  
  9.        //req.write(data);  
  10.        //req.end();  
  11.   
  12.        var params=url.parse(req.url,true);  
  13.        console.log(params);  
  14.        if(params.query&¶ms.query.Jsoncallback){  
  15.            console.log(params.query.Jsoncallback);  
  16.            var str=params.query.Jsoncallback+'('+JSON.stringify(data1)+')';//jsonp  
  17.            res.end(str);  
  18.        }  
  19.        else{  
  20.            res.writeHead(200,{'Content-Type':'application/json'});  
  21.            res.end(JSON.stringify(data1));      //普通的json  
  22.        }  
  23.   
  24.    }  
  25. }  
  26. module.exports=new jsonp();  

自建Node路由Jsonp接口访问地址：http://liuxinxiu.com:3000/Jsoncallback?Jsoncallback=1&name=Jack

JavaScript代码
  1. function jsoncallback(){  
  2.     this.exec=function(route,req,res){  
  3.   
  4.         /******** 处理请求判断用作JSONP ********/  
  5.         var params=url.parse(req.url,true);  
  6.   
  7.         /********** 造数据要Obj不要String **********/  
  8.         var str2={dataList:[{name:"Jack",age:28,sex:1},{name:'Tony',age:30,sex:0}]};  
  9.   
  10.         /********** 映射数据源无为undefined **********/  
  11.         var output=2016+'('+JSON.stringify(str2)+')';  
  12.         var result=params.query.Jsoncallback+'('+JSON.stringify(str2)+')';  
  13.   
  14.         /************* 定义头部信息及编码规范 *******************/  
  15.         res.writeHead(200,{'content-Type':'application/json;charset=utf-8'});  
  16.   
  17.         /************* 判断出来相应返回的结果 ********************/  
  18.         if(params.query&¶ms.query.Jsoncallback){  
  19.             res.write(result);  
  20.             res.end();  
  21.         }  
  22.         else{  
  23.             res.write(output);  
  24.             res.end();  
  25.         }  
  26.     }  
  27. };  
  28. module.exports=new jsoncallback();  
Tags: ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(3749)

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

[不指定 2016/05/28 21:40 | by 刘新修 ]

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

ExpressJS在Node环境上安装( 绿色版Node运行环境套件下载 )：

app.js 代码如下：

JavaScript代码
  1. /******************************************************
  2. *************** global modules  ******************
  3. ******************************************************/  
  4.   
  5. var express=require('express');  
  6. var path=require('path');  
  7. var favicon=require('serve-favicon');  
  8. var logger=require('morgan');  
  9. var cookieParser=require('cookie-parser');  
  10. var bodyParser=require('body-parser');  
  11.   
  12.   
  13. var routes=require('./routes/index');  
  14. //var redis=require('./routes/redis');  
  15.   
  16.   
  17. var app=express();  
  18.   
  19.   
  20. /******************************************************
  21. *************** view engine setup  ******************
  22. ******************************************************/  
  23. /******************  jade模版     *********************/  
  24. /*******************************************************
  25. app.set('views',path.join(__dirname,'views/jade/'));
  26. app.set('view engine','jade'); //jade or ejs
  27. ********************************************************/  
  28.   
  29. /******************  ejs模版     *********************/  
  30. app.set('views',path.join(__dirname,'views/ejs/'));  
  31. app.set('view engine','ejs'); //jade or ejs  
  32. /******************  ejs模版     *********************/  
  33.   
  34.   
  35.   
  36. /******************************************************
  37. ****************** routes setup  ********************
  38. ******************************************************/  
  39. // uncomment after placing your favicon in /public  
  40. //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));  
  41. app.use(logger('dev'));  
  42. app.use(bodyParser.json());  
  43. app.use(bodyParser.urlencoded({extended:false}));  
  44. app.use(cookieParser());  
  45. app.use(express.static(path.join(__dirname,'public')));  
  46.   
  47. app.use('/',routes);  
  48. /****************** routes setup  *********************/  
  49. /*******************************************************
  50. app.use('/redis',redis);
  51. app.use('/jsonp',routes);
  52. app.use('/login',routes);
  53. *************************************************/  
  54.   
  55.   
  56. /******************************************************
  57. ****************** 服务错误处理  ********************
  58. ******************************************************/  
  59.   
  60. /***** catch 404 and forward to error handler *****/  
  61. app.use(function(req,res,next){  
  62.   var err=new Error('404 Not Found');  
  63.   err.status=404;  
  64.   next(err);  
  65. });  
  66.   
  67.   
  68.   
  69. // error handlers  
  70. // development error handler  
  71. /***** 通用错误处理程序 *****/  
  72. if(app.get('env')==='development'){  
  73.   app.use(function(err,req,res,next){  
  74.     res.status(err.status||500);  
  75.     res.render('sys/error',{  
  76.       message:err.message,  
  77.       error:err,  
  78.       version:process.version  
  79.     });  
  80.   });  
  81. }  
  82.   
  83. // production error handler  
  84. // no stacktraces leaked to user  
  85. app.use(function(err,req,res,next){  
  86.   res.status(err.status||500);  
  87.   res.render('sys/error',{  
  88.     message:err.message,  
  89.     error:{}  
  90.   });  
  91. });  
  92. /***** 通用错误处理程序 *****/  
  93.   
  94. module.exports=app;  

routes/index.js 代码如下：

JavaScript代码
  1. /******************************************************
  2. *************** router  *************************
  3. ******************************************************/  
  4. var express=require('express');  
  5. var router=express.Router();  
  6.   
  7.   
  8. var url=require("url");            //解析GET请求    
  9. var query=require("querystring");  //解析POST请求  
  10.   
  11.   
  12.   
  13. /************* GET home page demo *************/  
  14. router.get('/',function(req,res,next){  
  15.     res.render('sys/index',{title:'Express'});  
  16. });  
  17.   
  18. router.get('/jsonp',function(req,res,next){  
  19.     res.render('main/jsonp',{  
  20.         title:'jsonp'  
  21.     });  
  22. });  
  23.   
  24. router.get('/login',function(req,res,next){  
  25.     res.render('main/login',{  
  26.         title:'The Entrar-shadow Website',  
  27.         fonts:'Member Login',  
  28.         username:'Liuxinxiu',  
  29.     });  
  30. });  
  31.   
  32. router.get('/test_load',function(req,res,next){  
  33.     var build=req.query.build;  
  34.     res.render('test/test_load',{  
  35.         title:'build',  
  36.         build:build  
  37.     });  
  38. });  
  39.   
  40. router.get('/test_page',function(req,res,next){  
  41.     var build=req.query.build;  
  42.     res.render('test/test_page',{  
  43.         title:'test_page',  
  44.         build:build  
  45.     });  
  46. });  
  47.   
  48.   
  49. /*
  50. app.get('/jsonp',function(req,res,next){
  51.    res.jsonp({status:'jsonp'});  
  52. });
  53. */  
  54.   
  55. /************* 自造Json数据 *************/  
  56. var userData='PHN0eWxlPip7bWFyZ2luOjA7cGFkZGluZzowO31oMXtmb250LXNpemU6MTZweDt0ZXh0LWFsaWduOmNlbnRlcjsgbGluZS1oZWlnaHQ6NDVweDt9Ym9keXtjb2xvcjojMzMzO2ZvbnQtc2l6ZToxNHB4O2ZvbnQtZmFtaWx5OiJNaWNyb3NvZnRZYWhlaSI7YmFja2dyb3VuZDojQjdDQUNDO31kaXZ7Ym9yZGVyOjFweCBzb2xpZCAjNDA1RTdCOyBib3JkZXItYm90dG9tOjA7IHdpZHRoOjk1JTsgbWFyZ2luOjAgYXV0bztiYWNrZ3JvdW5kOiNmZmY7Y29udGVudDoiIjtkaXNwbGF5OnRhYmxlO2NsZWFyOmJvdGh9bGl7bGluZS1oZWlnaHQ6MzVweDtsaXN0LXN0eWxlOm5vbmU7d2lkdGg6MjUlO3RleHQtYWxpZ246Y2VudGVyO2JvcmRlci1ib3R0b206MXB4IHNvbGlkICM0MDVFN0I7ZmxvYXQ6bGVmdDt9PC9zdHlsZT48aDE+5pyA6L+R6aOO5LqR5Lq65ZGY5ZCN5Y2VPC9oMT48ZGl2Pg0KCTx1bD4NCgkJPGxpPumjjua4heaJrDwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuiuuOW/l+mjnjwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7pOeLkOWGsjwvbGk+DQoJCTxsaT4xMTAyPC9saT4NCgkJPGxpPjIxPC9saT4NCgkJPGxpPjUyODE5OTAxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+aIkeihjDwvbGk+DQoJCTxsaT4xMTAzPC9saT4NCgkJPGxpPjIyPC9saT4NCgkJPGxpPjUyODE5OTkxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+ebiOebiDwvbGk+DQoJCTxsaT4xMTA0PC9saT4NCgkJPGxpPjI0PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS4nOaWueS4jei0pTwvbGk+DQoJCTxsaT4xMTA1PC9saT4NCgkJPGxpPjI2PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCTwvZGl2Pg==';  
  57. var dataJson={status:1,message:"这是一个JSONP接口,success!",dataList:userData,JsonArray:[0,1,2,3,4,5]};  
  58.   
  59. /************* 处理GET请求(jsonp需判断参数单独处理) *************/  
  60. router.get('/API/sendGet/jsonpInfo.do',function(req,res){  
  61.     //res.contentType('json');//返回的数据类型  
  62.     //res.writeHead(200,{"Content-Type":"text/json"});  
  63.     res.setHeader('Content-Type','text/json;charset=UTF-8');  
  64.     var params=url.parse(req.url,true).query; //解释url参数部分name=zzl&email=zzl@sina.com  
  65.     /**** 获取请求过来的跨域回调函数名称 ****/  
  66.     var reqQuery=req.query,Jsoncallback=req.query.Jsoncallback;  
  67.     /**** 如果有Jsoncallback的情况 ****/  
  68.     if(reqQuery&&Jsoncallback){  
  69.         //console.log(params.query.Jsoncallback);  
  70.         //res.jsonp({status:200,message:"这是一个JSONP接口",data:[]});  
  71.         //res.send(JSON.stringify({status:200,message:"success!这是一个JSONP接口",data:[]}));  
  72.   
  73.         /**** 拼成一个JS字符串 ****/  
  74.         var str=Jsoncallback+'('+JSON.stringify(dataJson)+')';    
  75.         //res.json(str);  
  76.         //res.write(str);  
  77.         res.end(str);  
  78.   
  79.     }  
  80.     /**** 没有Jsoncallback的情况 ****/  
  81.     else{  
  82.         res.json({status:200,message:"这是一个JSON接口",data:[]});  
  83.     }  
  84. });  
  85.   
  86. /************* 处理POST请求(Body/x-www-form-urlencoded) **************/  
  87. router.post('/API/sendPost/loginSubmit.do',function(req,res){  
  88.   var username=req.body.username;  
  89.   var password=req.body.password;  
  90.     
  91.   //console.log(username!='');  
  92.   if((username&&password!='')){  
  93.     console.log("Username="+username+",password="+password);  
  94.     /**********************************************************************************
  95.     /**************   JSON.stringify(v) 和 res.json 都是格式数据   ********************/  
  96.     /*********************************************************************************
  97.         res.json({status:1,info:"数据提交成功！",username:JSON.stringify(username)});
  98.     /*********************************************************************************/  
  99.     res.json({status:1,info:"数据提交成功！",username:username});  
  100.   }else{  
  101.     res.end("0");  
  102.   }  
  103. });  
  104.   
  105. module.exports=router;  

ejs 模版：

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>test</title>  
  5.         <meta charset="utf-8">  
  6.         <link type='text/css' href="/css/login/home.css" rel='stylesheet' />  
  7.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  8. </head>  
  9. <body>  
  10.     <h1>test/build=</h1>  
  11.     <%if(1+1===2){%>  
  12.     <h1><%= build %></h1>  
  13.     <%}%>  
  14. </body>  
  15. <%if(build==null){%>  
  16. <!-- 引入require.js和入口文件||默认开放环境 -->  
  17. <script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test/app_page.js"></script>  
  18. <!--<script src="http://localhost:3000/js/test/yy.js"></script>-->  
  19. <%}%>  
  20.   
  21. <%if(build!=null&&build==1){%>  
  22. <!-- 引入require.js和入口文件||判断参数用于测试build后生产环境版本js -->  
  23. <script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test-built/test/app_page.js"></script>  
  24. <%}%>  
  25.   
  26. </html>  

 

Tags: , ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(3644)

原生JS实现AJAX、JSONP及DOM加载完成事件

[不指定 2015/06/19 16:04 | by 刘新修 ]

 

JavaScript代码
  1. ajax({  
  2.     url:"http://192.168.66.90:8080/php/test5.php",  
  3.     type:"POST",  
  4.     data:{GUID:"288350897",subFlag:"1"},  
  5.     dataType:"jsonp",  
  6.     callback:"Jsoncallback",  
  7.     success:function(data){  
  8.         if(data.sex==0){  
  9.             var userSex="帅哥";  
  10.         }  
  11.         if(data.sex==1){  
  12.             var userSex="美女";  
  13.         }  
  14.         if(data.switch==0){  
  15.             $(".Mbox .mailInfo .text_").html('<span style="color:#fbff83">'+data.mailInfo+'</span>封'+userSex+'来信');  
  16.             $(".Mbox").addClass("ty");  
  17.             mbox.addEventListener("webkitAnimationEnd",function(){ //动画结束时事件  
  18.             var timer=setInterval(function(){  
  19.             if(mbox.offsetTop==-60){  
  20.                 mbox.className='Mbox tyy';  
  21.                 clearInterval(timer)  
  22.             }  
  23.             },1000)  
  24.             },false);  
  25.         }  
  26.         //alert(data.switch)  
  27.   
  28. },  
  29.     fail:function(status){  
  30.     // 此处放失败后执行的代码  
  31.     }  
  32. });  
  33.   
  34. /***********************************
  35. 公共ajax方法支持跨越请求
  36. ************************************/  
  37. function ajax(options) {  
  38. options = options||{};  
  39. if (!options.url||!options.callback){  
  40. throw new Error("参数不合法");  
  41. }  
  42.   
  43. //创建 script 标签并加入到页面中  
  44. var callbackName=('jsonp_'+Math.random()).replace(".","");  
  45. var oHead=document.getElementsByTagName('head')[0];  
  46. options.data[options.callback]=callbackName;  
  47. var params=formatParams(options.data);  
  48. var oS=document.createElement('script');  
  49. oHead.appendChild(oS);  
  50.   
  51. //创建jsonp回调函数  
  52. window[callbackName]=function(json){  
  53. oHead.removeChild(oS);  
  54. clearTimeout(oS.timer);  
  55. window[callbackName]=null;  
  56. options.success&&options.success(json);  
  57. };  
  58.   
  59. //发送请求  
  60. oS.src=options.url+'?'+params;  
  61.   
  62. //超时处理  
  63. if(options.time){  
  64. oS.timer=setTimeout(function(){  
  65. window[callbackName]=null;  
  66. oHead.removeChild(oS);  
  67. options.fail&&options.fail({message:"超时"});  
  68. },time);  
  69. }  
  70. };  
  71.   
  72. //格式化参数  
  73. function formatParams(data){  
  74. var arr=[];  
  75. for(var name in data){  
  76. arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));  
  77. }  
  78. return arr.join('&');  
  79. }  

 

Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(5121)
第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]