第一页 上页 6 7 8 9 10 11 12 13 14 15 下页 最后页 [ 显示模式： 摘要 | 列表 ]

关于setTimeout传参的思考

[不指定 2016/09/14 16:15 | by 刘新修 ]
JavaScript代码
  1. function countdown(n){  
  2.     //var i=10;if(!n)n=i;  
  3.     function _show(o){  
  4.         return function(){  
  5.             countdown(o);  
  6.         }  
  7.     }    
  8.     if(n>0){  
  9.         console.log(n);n--;  
  10.         setTimeout(_show(n),1000);  
  11.     }  
  12. };countdown(10);  
Tags:
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4103)

CORS||跨域资源共享||NodeJs版本实现

[不指定 2016/09/13 21:57 | by 刘新修 ]

使用NodeJs实现CORS 跨域资源共享，可传参origin通过限制，代码如下：

JavaScript代码
  1. var http=require('http');  
  2. var origin=require('./origin'); //调用白名单列表  
  3.   
  4. function CORS_Node(){  
  5.     this.exec=function(route,req,res){  
  6.     var _self=this;  
  7.   
  8.     /************** 获取客户端origin的域名 **************/  
  9.     origin.req=req;                //白名单设置置请求头  
  10.     origin.yes=origin.listV();     //是否在名单|true  
  11.     origin.name=origin.getName();  //客户端ORIGIN  
  12.   
  13.   
  14.     /******** 先纠正参数，参数正确后匹配白名单 ********/  
  15.   
  16.   
  17.     /********** 判断是GET请求类型 **********/  
  18.     if(req.method.toUpperCase()=="GET"){  
  19.   
  20.         var params=[];  
  21.         //params=url.parse(request.url,true).query;  
  22.         //params['fruit']=compute(params);  
  23.         res.writeHeader(200,{  
  24.             "Content-type":"text/html; charset=utf-8"  
  25.         });  
  26.         res.write('<h1>It is forbidden for the URL request!</h1>');  
  27.         res.write('<hr><address>NodeJs/'+process.version);  
  28.         res.write(' at '+req.headers.host.split(':')[0]);  
  29.         res.write(' Port '+req.headers.host.split(':')[1]+'</address>');  
  30.         res.end();  
  31.   
  32.     }  
  33.     /********* 判断是POST请求类型 **********/  
  34.     else if(req.method.toUpperCase()=='POST'){  
  35.   
  36.         var postData="";  
  37.         /********** 读取Post提交的数据 **********/  
  38.         req.addListener("data",function(data){  
  39.             postData+=data;  
  40.         });  
  41.   
  42.         /********** 数据读取完毕就会执行的监听 *********/  
  43.         req.addListener("end",function(){  
  44.            /********* 定义Post请求主体 *********/  
  45.            var query=require('querystring').parse(postData);  
  46.   
  47.   
  48.            /********** 给客户端返回数据自造JSON **********/  
  49.            function getJson(status){  
  50.                 if(isNaN(status))status=-1;  
  51.                 else{status=Number(status)}  
  52.                 var _drr='{'  
  53.                       +'"status":"1",'  
  54.                       +'"name":"'+query.name+'",'  
  55.                       +'"gender":"'+query.gender+'"}';  
  56.                 var _arr='{'  
  57.                       +'"status":1,'  
  58.                       +'"url":"http://www.liuxinxiu.com/",'  
  59.                       +'"dataList":'  
  60.                       +'{'  
  61.                       +'"siteId":101,'  
  62.                       +'"title":"我的博客||Node Server",'  
  63.                       +'"images":"http://www.liuxinxiu.com/upload/2016/08/10/moren.gif",'  
  64.                       +'"indexNum":"10",'  
  65.                       +'"pageNum":"100000",'  
  66.                       +'"tagNum":"22",'  
  67.                       +'"linkType":"linkTaobao",'  
  68.                       +'"publishTime":"23:15:30"'  
  69.                       +'}'  
  70.                       +'}';  
  71.                 this._dr=JSON.parse(_drr);this._ar=JSON.parse(_arr);  
  72.                 this._dt=this._dr;this._dt.getUser=this._ar;  
  73.            }  
  74.   
  75.            var errStr={"status":-1,"info":"Request Error"};  
  76.   
  77.            /********** 先初步设置头信息,跨域全放开稍后再进行匹配验证 **********/  
  78.            var content_type,content_length,  
  79.            content_type='application/json; charset=utf-8';  
  80.            content_length=Buffer.byteLength(res,'utf8');  
  81.            res.setHeader('Access-Control-Allow-Origin','*');  
  82.            res.setHeader('Access-Control-Allow-Headers','X-Requested-With');  
  83.            res.setHeader('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,OPTIONS');  
  84.            res.setHeader('Content-Type',content_type);  
  85.            res.setHeader('Server','NodeJs/'+process.version);  
  86.   
  87.   
  88.            /************** 判断如果有POST过来规范的数据 *************/  
  89.            if(query.name&&query.gender){  
  90.                 //调用数据  
  91.                 getJson(1);  
  92.   
  93.                 /******** 匹配客户端域名是否在数组列表中 ******/  
  94.                 //if(_self.in_array(origin,allow_origin)){  
  95.                 if(origin.yes){  
  96.                      res.setHeader('Access-Control-Allow-Origin',origin.name);  
  97.                      res.end(JSON.stringify(_dt));  
  98.                 }  
  99.                 else{  
  100.                      /******** 如有设置就取设置URL返回头信息 ********/  
  101.                      if(query.origin){  
  102.                         res.setHeader('Access-Control-Allow-Origin',query.origin);  
  103.                         res.end(JSON.stringify(_dt));  
  104.                      }  
  105.                      /******** 没设置URL就返回无权限错误信息  ********/  
  106.                      else{  
  107.                         errStr.info="You don't have permission to submit!";  
  108.                         res.setHeader('Access-Control-Allow-Origin',origin.name);
  109.                         res.end(JSON.stringify(errStr));
  111.                      }
  113.                 }
  115.            }
  116.            /********* 没有所匹配的POST提交数据||都要设头返回信息 ********/
  117.            else{
  118.                 /******** 其他POST参数的提交  ********/
  119.                 if(query){
  120.                     res.writeHeader(res.statusCode,{
  121.                         "Access-Control-Allow-Origin":origin.name,
  122.                         "Access-Control-Allow-Headers":"X-Requested-With",
  123.                         "Access-Control-Allow-Methods":"GET,POST,PUT,DELETE,OPTIONS",
  124.                         "Content-type":"application/json; charset=utf-8"
  125.                     });
  126.                     var err={status:-1,info:"Syntax error in parameters or arguments."};
  127.                     res.end(JSON.stringify(err));
  128.                 }
  129.                 else{
  130.                     res.writeHeader(res.statusCode,{
  131.                         "Content-type": "text/html; charset=utf-8"
  132.                     });
  133.                     res.end('It is forbidden for the URL request!');  
  134.                 }  
  135.   
  136.             }  
  137.             /****** 判断结束 ******/  
  138.         });  
  139.   
  140.     }  
  141.   
  142.   
  143.   /****** 内部结束 ******/  
  144.   }  
  145. }  
  146. module.exports=new CORS_Node();  

NodeJs数据提交接口地址 (不允许使用GET访问) ：http://liuxinxiu.com:3000/CORS_Node/

注意：NodeJs Server 是本站的测试环境，有时候因需要会临时关闭，该地址仅供测试，如您有需要请自建环境～

配合HTML代码如下：

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>    
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>  
  7.     <meta name="format-detection"content="telephone=no">  
  8.     <meta name="apple-mobile-web-app-capable" content="yes" />  
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
  10.     <style>body,html {background:#fff;font-family: "Lucida Grande",Calibri,Arial;font-size:12pt;color: #333;background: #f8f8f8;text-align:center;}*{margin:0;padding:0;}h1{line-height:1.6em;font-size:24px;text-indent:.5em;padding-top:.6em}i{line-height:2em;font-size:18px;color:#999;}.line{height:10px;border-bottom:1px solid #ccc;font-size:0;overflow:hidden;}</style>  
  11.     <title>跨域测试</title>  
  12. </head>  
  13. <body>  
  14. <h1 id="show"></h1>  
  15. <input type="button" value="Click me" onclick="msg()" />  
  16.   
  17. </body>  
  18. <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
  19. <script type='text/javascript'>  
  20. /********** 获取URL参数 **********/  
  21. function getQueryString(name){  
  22. var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i");  
  23. var r=window.location.search.substr(1).match(reg);  
  24. if (r!=null) return unescape(r[2]); return null;  
  25. }  
  26. var _n=getQueryString('n');  
  27. var _url=getQueryString('url');  
  28. var _name=getQueryString('name');  
  29. var _gender=getQueryString('gender');  
  30. var _origin=getQueryString('origin');  
  31. var _error=getQueryString('error');  
  32. console.log('origin:'+_origin+' —— name:'+_name+' —— gender:'+_gender);  
  33.   
  34. window.onload=function(){  
  35.     if(_n=='php'){  
  36.     location.href='http://'  
  37.              +location.host  
  38.              +location.pathname  
  39.              +'?origin=http://'+location.host;  
  40.     }else if(_n=='node'){  
  41.         location.href='http://'  
  42.                      +location.host  
  43.                      +location.pathname  
  44.                      +'?origin=http://'+location.host+'&'  
  45.              +'url=http://liuxinxiu.com:3000/CORS_Node/'  
  46.   
  47.     }else if(_n=='proxy'){  
  48.         location.href='http://'  
  49.                      +location.host  
  50.                      +location.pathname  
  51.                      +'?origin=http://'+location.host+'&'  
  52.                      +'url=http://liuxinxiu.com:3000/CORS_Node_Proxy/'  
  53.       
  54.     }else if(_n=='test'){  
  55.         location.href='http://test1.liuxinxiu.com/php/Interface/html/server.html'  
  56.              +'?origin=http://test1.liuxinxiu.com&'  
  57.              +'url=http://liuxinxiu.com:3000/CORS_Node_Proxy/&'  
  58.              +'error=1'  
  59.     }  
  60. }  
  61.   
  62. /********** 发起Ajax请求 **********/  
  63. function msg(){  
  64.     /******* 动态切换提交数据 *******/  
  65.     if(_origin&&!_error){  
  66.     if(_name&&_gender){  
  67.         var data={name:_name,gender:_gender,origin:_origin};  
  68.     }  
  69.     else{  
  70.         var data={name:"xiaoming",gender:"male",origin:_origin};  
  71.     }  
  72.     }  
  73.     else if(_error==null){  
  74.     var data={name:"xiaoming",gender:"male"};  
  75.     }  
  76.     else if(_error){  
  77.         var data={xxx:111};  
  78.     }  
  79.     /******* 动态设置提交URL *******/  
  80.     if(_url){  
  81.     var urlPath=_url;  
  82.     }  
  83.     else{  
  84.     var urlPath='http://code.liuxinxiu.com/php/Post/CORS_PHP.php';  
  85.     }  
  86.     $.ajax({  
  87.        type:'post',  
  88.        url:urlPath,  
  89.        data:data,  
  90.        cache:false,  
  91.        dataType:'json',  
  92.        success:function(data){  
  93.            if(data.name){  
  94.         document.getElementById("show").innerHTML=data.name+' '+data.gender;  
  95.            }  
  96.        else if(data.status!=1){  
  97.         document.getElementById("show").innerHTML=data.info;  
  98.        }  
  99.        },    
  100.        error:function(){  
  101.            console.log("请求错误//")  
  102.        }  
  103.     });  
  104. };  
  105.   
  106. /***********************************************************************************************  
  107. $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"}).done(function(data){    
  108.     document.getElementById("show").innerHTML=data.name+' '+data.gender;  
  109. });  
  110. **********************************************************************************************/  
  111. </script>  
  112. </html>  

HTML访问地址 (测试跨域) ==> http://test1.liuxinxiu.com/php/Interface/html/server.html?n=node

HTML访问地址 (非法参数) ==> http://test1.liuxinxiu.com/php/Interface/html/server.html?error=node

注意：本站的 NodeJs Server 是学习测试环境，有临时关闭的可能，建议在本地环境测试～

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

JS把数组类型转换为JSON对象或JSON字符串

[不指定 2016/09/13 13:01 | by 刘新修 ]
JavaScript代码
  1. var a = ['a','b','c'];  
  2. var json = {};  
  3. for(var i=0;i<a.length;i++)  
  4. {  
  5.     json[i]=a[i];  
  6. }  
  7. var jsonStr=JSON.stringify(json);//结果："{'1':'a','2':'b','3':'c'}"  
  8. var jsonObj=JSON.parse(jsonStr); //结果：[object Object]  

JS Array To Json 加强版：

1. 自然数自动递增并设置K值

2. 取偶数Length为Json数组的K值

JavaScript代码
  1. /******** 获取客户端请求的header整体头部信息 ********/  
  2. this.rawHeaders=function(state){  
  3.     var json={};  
  4.     if(!state){  
  5.         for(var i=0;i<req.rawHeaders.length;i++){  
  6.             var s,s=i;  
  7.             if(i%2==0){  
  8.                 s++;json[req.rawHeaders[i]]=req.rawHeaders[s];  
  9.             }  
  10.         }  
  11.     }  
  12.     if(state){  
  13.         for(var i=0;i<req.rawHeaders.length;i++){  
  14.             json[i]=req.rawHeaders[i];  
  15.         }  
  16.     }  
  17.     var jsonStr=JSON.stringify(json);//结果："{'1':'a','2':'b','3':'c'}"  
  18.     var jsonObj=JSON.parse(jsonStr); //结果：[object Object]  
  19.     return jsonObj;  
  20. };  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(2904)

CORS||跨域资源共享||PHP版本实现

[不指定 2016/09/12 12:15 | by 刘新修 ]

使用PHP实现CORS 跨域资源共享，可传参origin通过限制，代码如下：

PHP代码
  1. <?php  
  2. /******** 定义Response返回header头格式及编码 ********/  
  3. header('Content-type: application/json; charset=utf-8');  
  4.   
  5. /******** 回调参数设置 ********/  
  6. $param="origin";  
  7. $origin_URL=$_REQUEST[$param];  
  8.   
  9.   
  10. /********　json_encode 转成=> encode_json *******/  
  11. function encode_json($str){  
  12.     return urldecode(json_encode(url_encode($str)));  
  13. }  
  14. function url_encode($str){  
  15.     if(is_array($str)){  
  16.         foreach($str as $key=>$value){  
  17.             $str[urlencode($key)]=url_encode($value);  
  18.         }  
  19.     }else{  
  20.         $str=urlencode($str);  
  21.     }  
  22.     return $str;  
  23. }  
  24.   
  25. /**************** \/\/反转义范例 ********************/  
  26. function stripslashes_deep($value){  
  27.     $value=is_array($value)?  
  28.                 array_map('stripslashes_deep',$value):  
  29.                 stripslashes($value);  
  30.     return $value;  
  31. }  
  32.   
  33. /******************** Example ******************************/  
  34. $array=array("f\\'oo", "b\\'ar", array("fo\\'o", "b\\'ar"));  
  35. $array=stripslashes_deep($array);  
  36.   
  37. /******************** Output *******************************/  
  38.   
  39. //echo encode_json(array('china'=>'钓鱼岛是中国的!','Japan'=>array('name'=>'日本狗!')));  
  40.   
  41.   
  42. /************ 定义Post过来什么数据就返回什么数据 ***********/  
  43. $res=array(  
  44.     'status'=>-1,
  45.     'name'=>isset($_POST['name'])?$_POST['name']:'',
  46.     'gender'=>isset($_POST['gender'])?$_POST['gender']:''
  47. );
  49. $arr=array(
  50.      "status"=>1,
  51.      "url"=>"http://www.liuxinxiu.com/",
  52.      "dataList"=>array(
  53.           "siteId"=>"1",
  54.           "title"=>urldecode('我的博客'),
  55.           "images"=>"http://192.168.9.100/upload/2015/06/20/moren.gif",
  56.           "indexNum"=>10,
  57.           "pageNum"=>"300",
  58.           "tagNum"=>"20",
  59.           "linkType"=>"linkTaobao",
  60.           "publishTime"=>"20:00:00"
  61.       )
  62. );
  63. $arr['dataList']['images']="http://www.liuxinxiu.com/upload/2015/06/20/moren.gif";
  64. //print_r($arr);
  67. /*************** 定义错误信息 ***************/
  68. $errStr='{"status":-1,"info":"Request Error"}';
  69. $errJson=json_decode($errStr,true); //json_decode转成了array数组
  70. //print_r($errJson) //转成了array数组
  72. /************** 获取客户端的Origin域名 **************/
  73. $origin=isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:'';
  75. /******** 定义符合规则的域名数组 ********/
  76. $allow_origin=array(
  77.     'http://liuxinxiu.com',  
  78.     'http://code.liuxinxiu.com',  
  79.     'http://test.liuxinxiu.com'  
  80. );  
  81.   
  82. /****************** 判断如果有POST过来数据 *********************/  
  83. if(isset($_POST['name'])&&isset($_POST['gender'])){
  85.     /********** 只要是POST请求过来无论合法与否都要正常通信 **********/
  86.      header('Access-Control-Allow-Methods:POST');
  87.      header('Access-Control-Allow-Headers:x-requested-with,content-type');
  89.     /******** 匹配客户端域名是否在数组列表中 ******/
  90.     if(in_array($origin,$allow_origin)){
  91.         header('Access-Control-Allow-Origin:'.$origin);
  92.         $res['status']=1;
  93.         $res['getUser']=$arr;
  94.         echo json_encode($res);
  95.     }
  96.     else if(!in_array($origin,$allow_origin)){
  97.         /******** 如有设置就取设置URL返回头信息 ********/
  98.         if(isset($origin_URL)){
  99.             header('Access-Control-Allow-Origin:'.$origin_URL);
  100.             $res['status']=1;
  101.             $res['getUser']=$arr;
  102.             echo encode_json($res);
  103.             //echo json_encode("中文", JSON_UNESCAPED_UNICODE);
  104.         }
  105.         /******** 如没有设置URL就返回错误信息  ********/
  106.         else{
  107.             header('Access-Control-Allow-Origin:'.$origin);
  108.             $errJson['status']=-1;
  109.             $errJson['info']="You don't have permission to submit!";  
  110.             echo encode_json($errJson);  
  111.         }  
  112.     }  
  113. }  
  114. /************ 没有所匹配的POST提交数据 ***********/  
  115. else{  
  116.     if($GLOBALS['HTTP_RAW_POST_DATA']){  
  117.             header('Access-Control-Allow-Origin:'.$origin);  
  118.             $errJson['status']=-1;  
  119.             $errJson['info']="Syntax error in parameters or arguments.";  
  120.             echo encode_json($errJson);  
  121.     }  
  122.     else{  
  123.         header("Content-type: text/html; charset=utf-8");  
  124.         echo 'It is forbidden for the URL request!';  
  125.     }  
  126. }  
  127. ?>  

PHP数据提交接口地址 (禁止使用GET访问)：http://code.liuxinxiu.com/php/Interface/server.php

配合HTML代码如下：

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.   
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>  
  8.     <meta name="format-detection"content="telephone=no">  
  9.     <meta name="apple-mobile-web-app-capable" content="yes" />  
  10.     <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
  11.     <style>body,html {background:#fff;font-family: "Lucida Grande",Calibri,Arial;font-size:12pt;color: #333;background: #f8f8f8;text-align:center;}*{margin:0;padding:0;}h1{line-height:1.6em;font-size:24px;text-indent:.5em;padding-top:.6em}i{line-height:2em;font-size:18px;color:#999;}.line{height:10px;border-bottom:1px solid #ccc;font-size:0;overflow:hidden;}</style>  
  12.     <title>跨域测试</title>  
  13. </head>  
  14. <body>  
  15. <h1 id="show"></h1>  
  16. <input type="button" value="Click me" onclick="msg()" />  
  17.   
  18. </body>  
  19. <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
  20. <script type='text/javascript'>  
  21. /********** 获取URL参数 **********/  
  22. function getQueryString(name){  
  23. var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i");  
  24. var r=window.location.search.substr(1).match(reg);  
  25. if (r!=null) return unescape(r[2]); return null;  
  26. }  
  27.   
  28.   
  29. /********** 发起Ajax请求 **********/  
  30. function msg(){  
  31.     /******* 动态切换提交数据 *******/  
  32.     if(_origin){  
  33.         if(_name&&_gender){  
  34.             var data={name:_name,gender:_gender,origin:_origin};  
  35.         }  
  36.         else{  
  37.             var data={name:"xiaoming",gender:"male",origin:_origin};  
  38.         }  
  39.     }  
  40.     else if(_error==null){  
  41.         var data={name:"xiaoming",gender:"male"};  
  42.     }  
  43.     else if(_error){  
  44.         var data={xxx:111};  
  45.     }  
  46.     /******* 动态设置提交URL *******/  
  47.     if(_url){  
  48.         var urlPath=_url;  
  49.     }  
  50.     else{  
  51.         var urlPath='http://code.liuxinxiu.com/php/Interface/server.php';  
  52.     }  
  53.     $.ajax({  
  54.        type:'post',  
  55.        url:urlPath,  
  56.        data:data,  
  57.        cache:false,  
  58.        dataType:'json',  
  59.        success:function(data){  
  60.            if(data.name){  
  61.                 document.getElementById("show").innerHTML=data.name+' '+data.gender;  
  62.            }  
  63.            else if(data.status!=1){  
  64.                 document.getElementById("show").innerHTML=data.info;  
  65.            }  
  66.        },  
  67.        error:function(){  
  68.            console.log("请求错误//")  
  69.        }  
  70.     });  
  71. };  
  72.   
  73. /***********************************************************************************************  
  74. $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"}).done(function(data){  
  75.     document.getElementById("show").innerHTML=data.name+' '+data.gender;  
  76. });  
  77. **********************************************************************************************/  
  78. </script>  
  79. </html>  

HTML访问地址 (测试跨域) ==> http://test1.liuxinxiu.com/php/Interface/html/server.html?n=php

HTML访问地址 (非法参数) ==> http://test1.liuxinxiu.com/php/Interface/html/server.html?error=php

Tags: ,
PHP/Java/Go | 评论(0) | 引用(0) | 阅读(3728)

CORS||跨域资源共享 (Cross-origin resource sharing)

[不指定 2016/09/12 11:30 | by 刘新修 ]

 CORS是一个W3C标准，全称是"跨域资源共享" (Cross-origin resource sharing)

CORS，是一种服务器端的跨域解决方案，这种方案对于跨域的解决代码均在服务器端设置完成。在服务器端接收到客户端的请求后，通过获取到请求的来源站点Origin，如果愿意将资源共享给该站点，则通过设置“Access-Control-Allow-Origin”报头的值为请求的来源站点。浏览器接收到包含资源的响应后，会提取“Access-Control-Allow-Origin”响应报头的值，如果此值为*或者包含的源列表包含请求的源站点，则浏览器会允许JavaScript操作获取的资源；否则，不会操作获取的资源。
 
跨域资源共享（CORS ）是一种网络浏览器的技术规范，CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。
 
简言之，CORS就是为了让AJAX可以实现可控的跨域访问而生的。

以往的解决方案

        以前要实现跨域访问，可以通过JSONP、Flash或者服务器中转的方式来实现，但是现在我们有了CORS。

        CORS与JSONP相比，无疑更为先进、方便和可靠。

        1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

        2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

        3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS（这部分会在后文浏览器支持部分介绍）。

详细内容

        要使用CORS，我们需要了解前端和服务器端的使用方法。

        1、  前端

        以前我们使用Ajax，代码类似于如下的方式：

  1. var xhr = new XMLHttpRequest();  
  2. xhr.open("GET", "/hfahe", true);  
  3. xhr.send();  

        这里的“/hfahe”是本域的相对路径。

        如果我们要使用CORS，相关Ajax代码可能如下所示：

  1. var xhr = new XMLHttpRequest();  
  2. xhr.open("GET", "http://www.liuxinxiu.com/hfahe", true);  
  3. xhr.send();  

        请注意，代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。

        我们还必须提供浏览器回退功能检测和支持，避免浏览器不支持的情况。

  1. function createCORSRequest(method, url) {  
  2.   var xhr = new XMLHttpRequest();  
  3.   if ("withCredentials" in xhr) {  
  4.     // 此时即支持CORS的情况  
  5.     // 检查XMLHttpRequest对象是否有“withCredentials”属性  
  6.     // “withCredentials”仅存在于XMLHTTPRequest2对象里  
  7.     xhr.open(method, url, true);  
  8.    
  9.   } else if (typeof!= "undefined") {  
  10.    
  11.     // 否则检查是否支持XDomainRequest，IE8和IE9支持  
  12.     // XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式  
  13.     xhr = new XDomainRequest();  
  14.     xhr.open(method, url);  
  15.    
  16.   } else {  
  17.    
  18.     // 否则，浏览器不支持CORS  
  19.     xhr = null;  
  20.    
  21.   }  
  22.   return xhr;  
  23. }  
  24.    
  25. var xhr = createCORSRequest('GET', url);  
  26. if (!xhr) {  
  27.   throw new Error('CORS not supported');  
  28. }  

        现在如果直接使用上面的脚本进行请求，会看到浏览器里控制台的报错如下：

        错误显示的很明显，这是因为我们还未设置Access-Control-Allow-Origin头。

        2、  服务器

        服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

        HTTP 头的设置方法有很多，http://enable-cors.org/这篇文章里对各种服务器和语言的设置都有详细的介绍，下面我们主要介绍Apache和PHP里的设置方法。

        Apache：Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入以下内容即可：

  1. Header set Access-Control-Allow-Origin *  

        PHP：只需要使用如下的代码设置即可。

  1. <?php  
  2.  header("Access-Control-Allow-Origin:*");  

        以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然，这样有很大的危险性，恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源，例如下面的设置使得只有http://www.liuxinxiu.com 这个域才能跨域访问服务器的API。

  1. Access-Control-Allow-Origin: http://www.liuxinxiu.com  

浏览器支持情况

Tags:
HTTP相关 | 评论(0) | 引用(0) | 阅读(3733)

HTTP协议之multipart/form-data请求分析

[不指定 2016/09/12 10:39 | by 刘新修 ]

  首先来了解什么是multipart/form-data请求：

根据http/1.1 rfc 2616的协议规定，我们的请求方式只有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE等，那为为何我们还会有multipart/form-data请求之说呢？这就要从头来说了。

http协议大家都知道是规定了以ASCII码传输，建立在tcp、ip协议之上的应用层规范，规范内容把http请求分为3个部门：状态行，请求头，请求体。所有的方法、实现都是围绕如何运用和组织这三部分来完成的。换句话来说就是万变不离其中，只要我们了解了http请求的组成部分后，自然就可以应变任何实际工作中的需求和问题了。

关于状态行，请求头，请求体等三部分的具体内容，大家可以参考官方的协议文档http://www.faqs.org/rfcs/rfc2616.html，这里主要分析multipart/form-data请求具体是怎么一回事。

既然http协议本身的原始方法不支持multipart/form-data请求，那这个请求自然就是由这些原始的方法演变而来的，具体如何演变且看下文：

1、multipart/form-data的基础方法是post，也就是说是由post方法来组合实现的

2、multipart/form-data与post方法的不同之处：请求头，请求体。

3、multipart/form-data的请求头必须包含一个特殊的头信息：Content-Type，且其值也必须规定为multipart/form-data，同时还需要规定一个内容分割符用于分割请求体中的多个post的内容，如文件内容和文本内容自然需要分割开来，不然接收方就无法正常解析和还原这个文件了。具体的头信息如下：

JavaScript代码
  1. Content-Type: multipart/form-data; boundary=${bound}  

//其中${bound} 是一个占位符，代表我们规定的分割符，可以自己任意规定，但为了避免和正常文本重复了，尽量要使用复杂一点的内容。如：--------------------56423498738365
4、multipart/form-data的请求体也是一个字符串，不过和post的请求体不同的是它的构造方式，post是简单的name=value值连接，而multipart/form-data则是添加了分隔符等内容的构造体。具体格式如下:

JavaScript代码
  1. --${bound}    
  2. Content-Disposition: form-data; name="Filename"    
  3.     
  4. HTTP.pdf    
  5. --${bound}    
  6. Content-Disposition: form-data; name="file000"; filename="HTTP协议详解.pdf"    
  7. Content-Type: application/octet-stream    
  8.     
  9. %PDF-1.5    
  10. file content    
  11. %%EOF    
  12.     
  13. --${bound}    
  14. Content-Disposition: form-data; name="Upload"    
  15.     
  16. Submit Query    
  17. --${bound}--    

其中${bound}为之前头信息中的分割符，如果头信息中规定为123，那么这里也要为123,；可以很容易看出，这个请求体是多个相同的部分组成的：每一个部分都是以--加分隔符开始的，然后是该部分内容的描述信息，然后一个回车，然后是描述信息的具体内容；如果传送的内容是一个文件的话，那么还会包含文件名信息，以及文件内容的类型。上面的第二个小部分其实是一个文件体的结构，最后会以--分割符--结尾，表示请求体结束。

综上，可以知道要发送一个multipart/form-data的请求，其实任何支持post请求的工具或语言都可以支持，只是自己要稍微包装一下便可。

Tags: , ,
HTTP相关 | 评论(0) | 引用(0) | 阅读(4567)

mysql 常用SQL汇总

[不指定 2016/09/07 15:17 | by 刘新修 ]
SQL代码
  1. 1.用管理员登陆  
  2. mysql -u root -p;   
  3.   
  4. 2.创建数据库  
  5. create database nodeDB;  
  6.   
  7. 3.删除数据库  
  8. drop database nodeDB;  
  9.   
  10. 4.查看数据库  
  11. show databases;  
  12.   
  13. 5.选择目标库  
  14. use nodeDB;  
  15.   
  16. 6.查看目标表所有字段  
  17. select * from user;  
  18.   
  19. 7.创建用户  
  20. //user01只能本地访问  
  21. CREATE USER user01@'localhost' IDENTIFIED BY 'user01';  
  22.   
  23. //user02可以远程访问  
  24. CREATE USER user02@'%' IDENTIFIED BY 'password1';  
  25.   
  26. 8.修改user01密码  
  27. SET PASSWORD FOR 'user01'@'localhost'=PASSWORD('password2');  
  28.   
  29. 9.授权  
  30. //user01管理db01全部权限  
  31. GRANT ALL PRIVILEGES ON nodeDB.* TO user01;  
  32.   
  33. //user02查看权限，并修改密码  
  34. GRANT SELECT  ON *.* TO 'user02'@'%' IDENTIFIED by 'password2';  
  35.   
  36. 10. 刷新数据库  
  37. flush privileges;  

创建测试表：

SQL代码
  1. //判断有库就删除  
  2. drop database if exists school;  
  3. create database school;  
  4. use school;  
  5. create table teacher(  
  6.     id int(3) auto_increment not null primary key,  
  7.     name char(10) not null,  
  8.     address varchar(50) default '深圳',  
  9.     year date  
  10. );  
  11.   
  12. //以下为插入字段  
  13. insert into teacher values(null,'allen','大连一中','1976-10-10');  
  14. insert into teacher values(null,'jack','黄冈中学','1975-12-23');  
  15. insert into teacher values(null,'jesse','北京四中','1980-6-23');  
  16. insert into teacher values(null,'tony','衡水中学','1982-2-12');  
Tags: ,
数据库技术 | 评论(0) | 引用(0) | 阅读(3920)

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) | 阅读(3836)

几个模板引擎的对比

[不指定 2016/09/05 23:56 | by 刘新修 ]

渲染html到页面中，在koa中可以这么干：

JavaScript代码
  1. app.get('/',function*(){  
  2.     this.body = "<p>'+title+'</p>";  
  3. })  

但问题很大，模板混入到js逻辑了，非常不利于维护，基于 mvc 模式，我们需要将html模板抽离到 view 中方便维护，这时候我们就需要一款模板渲染引擎。

为什么选择xtemplate

适用于 koa 的模板引擎选择非常多，比如 jade、ejs、nunjucks、xtemplate 等。

为什么选择 xtemplate 呢？

上手难度

jade 无疑是最独特，上手难度最高，特别是将 html 转成 jade 风格的代码，需要一些成本和适应，特别是空格敏感，经常引起模块渲染报错：

JavaScript代码
  1. body  
  2.     h1 Jade - node template engine  
  3.     #container.col  
  4.       if youAreUsingJade  
  5.         p You are amazing  
  6.       else  
  7.         p Get on it!  

但 jade 在 express 中拥有广泛的群众基础，所以从 express 转到 koa，jade 是个不错的选择，但我一直认为 jade 不是最佳的模板选择。

ejs、nunjucks、xtemplate 的上手难度差不多，但ejs的扩展写法有些诡异，特别是 filter 的写法：

JavaScript代码
  1. <p><%=: users | first | capitalize %></p>  

xtemplate 相对于 nunjucks 的优势是，模板的逻辑写法体验更接近js（ejs的逻辑表达也很接近js），上手更为简单，来看下同样一个 if 判断的写法差异。

xtemplate:

JavaScript代码
  1. {{#if(variable===0)}}  
  2.   It is true      
  3. {{/if}}  

nunjucks:

JavaScript代码
  1. {% if variable == 0 %}  
  2.   It is true  
  3. {% endif %}  

所以上手难度：xtemplate < nunjucks < ejs < jade 。

功能的强大度

四款模板引擎必备几样功能都具备：变量、逻辑表达式、循环、layout、include、宏、扩展等。

nunjucks 无疑是功能最全面的模板引擎，xtemplate 拥有 nunjucks 大部分的特性，除了filter，但 xtemplate 拥有非常强悍的拓展性：

JavaScript代码
  1. xtpl.addCommand('money',function(scope, option){  
  2.     var money = option.params[0];  
  3.     if(typeof money !== 'number') return '';  
  4.     //金额除以100（接口返回的金额都是以分为单位，转成元）  
  5.     var s = Number(money)/100;  
  6.     return s;  
  7. })  

模板中使用：

JavaScript代码
  1. {{money(10000)}}  

nunjucks 与 xtemplate 都拥有实用的宏定义功能：

JavaScript代码
  1. {{#macro("test","param", default=1)}}  
  2.     param is {{param}} {{default}}  
  3. {{/macro}}  

模板中使用：

JavaScript代码
  1. {{macro("test","2")}}  

输出内容：

JavaScript代码
  1. param is 2 1  

jade 中的 Mixins，ejs 中的 function 也可以实现类似的抽取公用html代码块的目的 。

如果真要分个高下：nunjucks > xtemplate > jade > ejs 。

是否支持前后端混用

jade 直接淘汰，相信在前端js领域一般不会选择 jade 来渲染。

nunjucks 也使用的比较少（ejs其实也少），更多人会选择使用 handlebars 。

xtemplate 目前在阿里的系统中前后端混用中已经得到论证，节约了模板前后端转换的时间。

事实上是否支持前后端混用不是决定性因素，特别是在 angularjs 盛行的年代。

性能考量

它们都很快，其实性能都不是问题，真要较真的话，xtemplate 会更优秀些，可以看 xtemplate benchmark。

个人觉得性能不是决定性因素。

基于上述几点考虑，推荐使用 xtemplate 。

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

PHP处理HTTP请求的几种方式

[不指定 2016/09/05 17:48 | by 刘新修 ]

GET，一般是明文的，比如XXX.php?a=1&b=2，这里的a，b就必须用GET方式接收，接收代码如下：
$a = $_GET['a'];
$b = $_GET['b'];
//接收a,b两个变量
POST，一般是隐藏的非明文的，一般表单设置成POST的，接收方式如下：
//比如有个表单，表单中有两个文本框，name 分别是 a,b，那么代码如下：
$a = $_POST['a'];
$b = $_POST['b'];
另外：$_REQUEST，可以同时接收GET、POST的变量，用法如：
$_REQUEST['a'];//接收变量a，a可以是GET的也可以是POST的

另外说说PHP获取POST请求的几种方式：

方法1、最常见的方法是：$_POST['fieldname'];
说明：只能接收Content-Type: application/x-www-form-urlencoded提交的数据
解释：也就是表单POST过来的数据
 
方法2、file_get_contents(“php://input”);
说明：
允许读取 POST 的原始数据。
和 $HTTP_RAW_POST_DATA 比起来，它给内存带来的压力较小，并且不需要任何特殊的 php.ini 设置。
php://input 不能用于 enctype=”multipart/form-data”。
解释：
对于未指定 Content-Type 的POST数据，则可以使用file_get_contents(“php://input”);来获取原始数据。
事实上，用PHP接收POST的任何数据都可以使用本方法。而不用考虑Content-Type,包括二进制文件流也可以。
所以用方法二是最保险的方法。
 
方法3、$GLOBALS['HTTP_RAW_POST_DATA'];
说明：
总是产生 $HTTP_RAW_POST_DATA  变量包含有原始的 POST 数据。
此变量仅在碰到未识别 MIME 类型的数据时产生。
$HTTP_RAW_POST_DATA  对于 enctype=”multipart/form-data”  表单数据不可用
如果post过来的数据不是PHP能够识别的，可以用 $GLOBALS['HTTP_RAW_POST_DATA']来接收，
比如 text/xml 或者 soap 等等
解释：
$GLOBALS['HTTP_RAW_POST_DATA']存放的是POST过来的原始数据。
$_POST或$_REQUEST存放的是 PHP以key=>value的形式格式化以后的数据。
但$GLOBALS['HTTP_RAW_POST_DATA']中是否保存POST过来的数据取决于centent-Type的设置，即POST数据时 必须显式示指明Content-Type: application/x-www-form-urlencoded，POST的数据才会存放到 $GLOBALS['HTTP_RAW_POST_DATA']中。
Tags:
PHP/Java/Go | 评论(0) | 引用(0) | 阅读(4108)
第一页 上页 6 7 8 9 10 11 12 13 14 15 下页 最后页 [ 显示模式： 摘要 | 列表 ]