第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]

Websocket通信实例，配合后端php

[不指定 2016/09/27 21:14 | by 刘新修 ]

本站测试实例访问地址: http://code.liuxinxiu.com/php/Interface/html/WebSocket.html

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>chatdemo</title>  
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">  
  7.         <link href="http://code.liuxinxiu.com/lib/bootstrap/3.3.2/bootstrap.min.css" rel="stylesheet">  
  8.         <style type="text/css">  
  9.         <!--  
  10.         html, body {  
  11.           min-height: 100%; }  
  12.   
  13.         body {  
  14.           margin: 0;  
  15.           padding: 0;  
  16.           width: 100%;  
  17.           font-family: "Microsoft Yahei",sans-serif, Arial; }  
  18.   
  19.         .container {  
  20.           text-align: center; }  
  21.   
  22.         .title {  
  23.           font-size: 16px;  
  24.           color: rgba(0, 0, 0, 0.3);  
  25.           position: fixed;  
  26.           z-index:1000;  
  27.           line-height: 30px;  
  28.           height: 30px;  
  29.           left: 0px;  
  30.           right: 0px;  
  31.           background-color: white; }  
  32.   
  33.         .content {  
  34.           background-color: #f1f1f1;  
  35.           border-top-left-radius: 6px;  
  36.           border-top-right-radius: 6px;  
  37.           margin-top: 30px; }  
  38.           .content .show-area {  
  39.             text-align: left;  
  40.             padding-top: 8px;  
  41.             padding-bottom: 168px; }  
  42.             .content .show-area .message {  
  43.               width: 70%;  
  44.               padding: 5px;  
  45.               word-wrap: break-word;  
  46.               word-break: normal; }  
  47.           .content .write-area {  
  48.             position: fixed;  
  49.             bottom: 0px;  
  50.             right: 0px;  
  51.             left: 0px;  
  52.             background-color: #f1f1f1;  
  53.             z-index: 10;  
  54.             width: 100%;  
  55.             height: 160px;  
  56.             border-top: 1px solid #d8d8d8; }  
  57.             .content .write-area .send {  
  58.               position: relative;  
  59.               top: -28px;  
  60.               height: 28px;  
  61.               border-top-left-radius: 55px;  
  62.               border-top-right-radius: 55px; }  
  63.             .content .write-area #name{  
  64.               position: relative;  
  65.               top: -20px;  
  66.               line-height: 28px;  
  67.               font-size: 13px; }  
  68.         -->  
  69.         </style>  
  70.     </head>  
  71.     <body>  
  72.         <div class="container">  
  73.             <div class="title">简易聊天demo</div>  
  74.             <div class="content">  
  75.                 <div class="show-area"></div>  
  76.                 <div class="write-area">  
  77.                     <div><button class="btn btn-default send" >发送</button></div>  
  78.                     <div><input name="name" id="name" type="text" placeholder="input your name"></div>  
  79.                     <div>  
  80.                         <textarea name="message" id="message" cols="38" rows="4" placeholder="input your message..."></textarea>  
  81.                     </div>                      
  82.                 </div>  
  83.             </div>  
  84.         </div>  
  85.   
  86.         <script src="http://code.liuxinxiu.com/lib/jquery/1.9.1/jquery.min.js"></script>  
  87.         <script src="http://code.liuxinxiu.com/lib/bootstrap/3.3.2/bootstrap.min.js"></script>  
  88.         <script>  
  89.         $(function(){  
  90.         var wsurl='ws://code.liuxinxiu.com:9090/php/webSocket/server.php';  
  91.             var websocket;  
  92.             var i = 0;  
  93.             /******** 判断是否有webSocket对象 *******/  
  94.             if(window.WebSocket){  
  95.                 websocket=new WebSocket(wsurl);  
  96.   
  97.                 /******** 连接建立||发起webSocket连接 ********/  
  98.                 websocket.onopen = function(evevt){  
  99.                     console.log("Connected to WebSocket server.");  
  100.                     /******** 监听ready状态码 ********/  
  101.                     console.log('websocket.readyState:'+websocket.readyState);  
  102.                     /*********************************************************  
  103.                       值为0值表示该连接尚未建立  
  104.                       值为1表示连接建立和沟通是可能的  
  105.                       值为2表示连接是通过将结束握手  
  106.                       值为3表示连接已关闭或无法打开  
  107.                     *********************************************************/  
  108.                     /******** 判断状态码为1则连接成功即可正常通信********/  
  109.                     if(websocket.readyState==1){  
  110.                         $('.show-area').append('<p class="bg-info message"><i class="glyphicon glyphicon-info-sign"></i>Connected to WebSocket server!</p>');  
  111.                     }  
  112.                 }  
  113.                 //收到消息  
  114.                 websocket.onmessage = function(event) {  
  115.                     var msg = JSON.parse(event.data); //解析收到的json消息数据  
  116.                     console.log("\n--->>message:\n"+event.data);  
  117.   
  118.                     var type = msg.type; // 消息类型  
  119.                     var umsg = msg.message; //消息文本  
  120.                     var uname = msg.name; //发送人  
  121.                     i++;  
  122.                     if(type == 'usermsg'){  
  123.                         $('.show-area').append('<p class="bg-success message"><i class="glyphicon glyphicon-user"></i><a name="'+i+'"></a><span class="label label-primary">'+uname+' say: </span>'+umsg+'</p>');  
  124.                     }  
  125.                     if(type == 'system'){  
  126.                         $('.show-area').append('<p class="bg-warning message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>'+umsg+'</p>');  
  127.                     }  
  128.                       
  129.                     $('#message').val('');  
  130.                     window.location.hash = '#'+i;  
  131.                 }  
  132.   
  133.                 //发生错误  
  134.                 websocket.onerror = function(event){  
  135.                     i++;  
  136.                     console.log("Connected to WebSocket server error");  
  137.                     $('.show-area').append('<p class="bg-danger message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>Connect to WebSocket server error.</p>');  
  138.                     window.location.hash = '#'+i;  
  139.                 }  
  140.   
  141.                 //连接关闭  
  142.                 websocket.onclose = function(event){  
  143.                     i++;  
  144.                     console.log('websocket Connection Closed. ');  
  145.                     $('.show-area').append('<p class="bg-warning message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>websocket Connection Closed.</p>');  
  146.                     window.location.hash = '#'+i;  
  147.                 }  
  148.   
  149.                 function send(){  
  150.                     var name = $('#name').val();  
  151.                     var message = $('#message').val();  
  152.                     if(!name){  
  153.                         alert('请输入用户名!');  
  154.                         return false;  
  155.                     }  
  156.                     if(!message){  
  157.                         alert('发送消息不能为空!');  
  158.                         return false;  
  159.                     }  
  160.                     var msg = {  
  161.                         message: message,  
  162.                         name: name  
  163.                     };  
  164.                     try{    
  165.                         websocket.send(JSON.stringify(msg));  
  166.                     } catch(ex) {    
  167.                         console.log(ex);  
  168.                     }    
  169.                 }  
  170.   
  171.                 //按下enter键发送消息  
  172.                 $(window).keydown(function(event){  
  173.                     if(event.keyCode == 13){  
  174.                         console.log('user enter');  
  175.                         send();  
  176.                     }  
  177.                 });  
  178.   
  179.                 //点发送按钮发送消息  
  180.                 $('.send').bind('click',function(){  
  181.                     send();  
  182.                 });  
  183.                   
  184.             }  
  185.             else{  
  186.                 alert('该浏览器不支持web socket');  
  187.             }  
  188.   
  189.         });      
  190.         </script>          
  191.     </body>  
  192. </html>  

后端PHP代码部分：

PHP代码
  1. 2.php code:  
  2. <?php  
  3. $host = '127.0.0.1';  
  4. $port = '9090';  
  5. $null = NULL;  
  6.   
  7. //创建tcp socket  
  8. $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);  
  9. socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);  
  10. socket_bind($socket, 0, $port);  
  11.   
  12. //监听端口  
  13. socket_listen($socket);  
  14.   
  15. //连接的client socket 列表  
  16. $clients = array($socket);  
  17.   
  18. //设置一个死循环,用来监听连接 ,状态  
  19. while (true) {  
  20.       
  21.     $changed = $clients;  
  22.     socket_select($changed, $null, $null, 0, 10);  
  23.       
  24.     //如果有新的连接  
  25.     if (in_array($socket, $changed)) {  
  26.         //接受并加入新的socket连接  
  27.         $socket_new = socket_accept($socket);  
  28.         $clients[] = $socket_new;  
  29.           
  30.         //通过socket获取数据执行handshake  
  31.         $header = socket_read($socket_new, 1024);  
  32.         perform_handshaking($header, $socket_new, $host, $port);  
  33.           
  34.         //获取client ip 编码json数据,并发送通知  
  35.         socket_getpeername($socket_new, $ip);  
  36.         $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' connected')));  
  37.         send_message($response);  
  38.         $found_socket = array_search($socket, $changed);  
  39.         unset($changed[$found_socket]);  
  40.     }  
  41.       
  42.     //轮询 每个client socket 连接  
  43.     foreach ($changed as $changed_socket) {      
  44.           
  45.         //如果有client数据发送过来  
  46.         while(socket_recv($changed_socket, $buf, 1024, 0) >= 1)  
  47.         {  
  48.             //解码发送过来的数据  
  49.             $received_text = unmask($buf);  
  50.             $tst_msg = json_decode($received_text);    
  51.             $user_name = $tst_msg->name;  
  52.             $user_message = $tst_msg->message;  
  53.               
  54.             //把消息发送回所有连接的 client 上去  
  55.             $response_text = mask(json_encode(array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message)));  
  56.             send_message($response_text);  
  57.             break 2;  
  58.         }  
  59.           
  60.         //检查offline的client  
  61.         $buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ);  
  62.         if ($buf === false) {  
  63.             $found_socket = array_search($changed_socket, $clients);  
  64.             socket_getpeername($changed_socket, $ip);  
  65.             unset($clients[$found_socket]);  
  66.             $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' disconnected')));  
  67.             send_message($response);  
  68.         }  
  69.     }  
  70. }  
  71. // 关闭监听的socket  
  72. socket_close($sock);  
  73.   
  74. //发送消息的方法  
  75. function send_message($msg)  
  76. {  
  77.     global $clients;  
  78.     foreach($clients as $changed_socket)  
  79.     {  
  80.         @socket_write($changed_socket,$msg,strlen($msg));  
  81.     }  
  82.     return true;  
  83. }  
  84.   
  85.   
  86. //解码数据  
  87. function unmask($text) {  
  88.     $length = ord($text[1]) & 127;  
  89.     if($length == 126) {  
  90.         $masks = substr($text, 4, 4);  
  91.         $data = substr($text, 8);  
  92.     }  
  93.     elseif($length == 127) {  
  94.         $masks = substr($text, 10, 4);  
  95.         $data = substr($text, 14);  
  96.     }  
  97.     else {  
  98.         $masks = substr($text, 2, 4);  
  99.         $data = substr($text, 6);  
  100.     }  
  101.     $text = "";  
  102.     for ($i = 0; $i < strlen($data); ++$i) {  
  103.         $text .= $data[$i] ^ $masks[$i%4];  
  104.     }  
  105.     return $text;  
  106. }  
  107.   
  108. //编码数据  
  109. function mask($text)  
  110. {  
  111.     $b1 = 0x80 | (0x1 & 0x0f);  
  112.     $length = strlen($text);  
  113.       
  114.     if($length <= 125)  
  115.         $header = pack('CC', $b1, $length);  
  116.     elseif($length > 125 && $length < 65536)  
  117.         $header = pack('CCn', $b1, 126, $length);  
  118.     elseif($length >= 65536)  
  119.         $header = pack('CCNN', $b1, 127, $length);  
  120.     return $header.$text;  
  121. }  
  122.   
  123. //握手的逻辑  
  124. function perform_handshaking($receved_header,$client_conn, $host, $port)  
  125. {  
  126.     $headers = array();  
  127.     $lines = preg_split("/\r\n/", $receved_header);  
  128.     foreach($lines as $line)  
  129.     {  
  130.         $line = chop($line);  
  131.         if(preg_match('/\A(\S+): (.*)\z/', $line, $matches))  
  132.         {  
  133.             $headers[$matches[1]] = $matches[2];  
  134.         }  
  135.     }  
  136.   
  137.     $secKey = $headers['Sec-WebSocket-Key'];  
  138.     $secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));  
  139.     $upgrade  = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .  
  140.     "Upgrade: websocket\r\n" .  
  141.     "Connection: Upgrade\r\n" .  
  142.     "WebSocket-Origin: $host\r\n" .  
  143.     "WebSocket-Location: ws://$host:$port/demo/shout.php\r\n".  
  144.     "Sec-WebSocket-Accept:$secAccept\r\n\r\n";  
  145.     socket_write($client_conn,$upgrade,strlen($upgrade));  
  146. }  
Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3937)

关于Javascript的this

[不指定 2016/09/27 16:54 | by 刘新修 ]
this是Javascript语言的一个关键字，它是一个指针，根据不同情形下指向不同的对象，随着函数使用场合的不同，this的值会发生变化。
 
记住一条：当function被作为method调用时，this指向调用对象。另外，JavaScript并不是OO的，而是object based的一种语言。之所以你会觉得this用起来混乱，是因为你还没理解JavaScript的诸如全局对象、event handler等一些机制。
 
this指向变化通常有以下几种情形：
 
情况一：纯粹的函数调用[作为method调用]
 
JavaScript代码
  1. function test(){  
  2. 　　this.x = 1;  
  3. 　　alert(this.x);  
  4. }  
  5. test(); // 1  
以上function属于全局性调用，因此this就代表全局对象Global，为了证明它指向window 我们在window下给设置一个变量并去掉内部的赋值:
 
JavaScript代码
  1. var x = 1;  
  2. function test(){  
  3. 　　alert(this.x); //取window下的x  
  4. }  
  5. test(); // 1  
  6.   
  7.   
  8. var x = 1;  
  9. function test(){  
  10. 　　this.x = 0; //this指针依然是window，只是重新复制而已  
  11. }  
  12. test();  
  13. alert(x); //0  
情况二：作为对象方法的调用
 
作为对象的方法调用时，这时this指针就指这个对象，而不是window！
 
JavaScript代码
  1. function test(){  
  2. 　alert(this.x);  
  3. }  
  4. var o = {};  
  5. o.x = 1;  
  6. o.m = test;  
  7. o.m(); // 1  
为了验证以下此时this能不能指向window我们做如下改动：
 
JavaScript代码
  1. var x='windowX';  
  2. function test(){  
  3. 　alert(this.x);  
  4. }  
  5. var o = {};  
  6. //o.x = 1;  
  7. o.m = test;  
  8. o.m(); // undefined  -->可见this不可能指向window  
情况三 作为构造函数调用
 
所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。
 
JavaScript代码
  1. function test(){  
  2. 　　this.x = 1;  
  3. }  
  4. var o = new test();  
  5. alert(o.x); // 1  
同样，为了验证以下此时this能不能指向window我们做如下改动：
 
JavaScript代码
  1. var x='windowX';  
  2. function test(){  
  3.    this.x = 1;  
  4. }  
  5. var o = new test();  
  6. alert(o.x); // 1   -->可见this不可能指向window  
  7. alert(x); // windowX  
情况四 apply调用
 
apply()是函数体的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数
 
JavaScript代码
  1. var x = 'windowX';  
  2. function test(){  
  3. 　　alert(this.x);  
  4. }  
  5. var o={};  
  6. o.x = 1;  
  7. o.m = test;  
  8. o.m.apply(); //windowX m函数的apply更改了调用对象-->window  
apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为windowX，证明this指的是全局window对象。
 
如果把最后一行代码修改为：
 
JavaScript代码
  1. o.m.apply(o); //1 运行结果就变成了1，证明this又指向了默认的o对象  
练习测试题：
 
JavaScript代码
  1. /******** this指针及变量提升的问题 ********/  
  2. var foo='windowFoo';  
  3. function main(){  
  4.     alert(foo);               //第一个alert，一般规则是先查找当前内部变量有没有，有则取没有找上一层     
  5.     var foo = 2;  
  6.     alert(this.foo);          //第二个alert，  
  7.     this.foo = 3;}  
注明：首先说下window下直接调用main()方法 this==window
 
测试1: var m1=main(); //作为普通函数调用或者直接调用main()
 
第一个alert属于特殊情况，内部有同名变量存在且在后边定义，涉及到了变量提升，因此输出：undefined
 
第二个alert属于查找this指针对象下的属性，this指针指向window固输出：windowFoo 而不是后边的3
 
 
测试1: var m2=new main();  //作为构造函数实例化之后调用
 
第一个alert 输出undefined因为构造函数实例化后this指向该对象，不会变化
 
第二个alert 输出undefined因为this.foo被实例化对象继承后等同于增加一个属性方法，且在alert之后，因此输出：undefined
Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3234)

关于JS原型.原性链的总结整理

[不指定 2016/09/27 13:39 | by 刘新修 ]
第一部分[原型prototype]：
 
任何对象及Function方法都有所对应的"prototype"原型！一切基于原型！
 
任何类型对象都有所对应的"constructor"构造器即内置构造函数，任何自定义函数及内置函数都有所对应的原型对象，说到底大家都会继承有: "对象/Object"的原型。
 
注：那怕是用字面量声明的对象var str='ss'; 其构造器使用了function String(){} 则间接使用了String.prototype的原型！
 
str 是用String()函数构造的实例！也就是说String函数的prototype原型就是str实例的间接原型！
 
JavaScript代码
  1. /******** 自定义构造函数 ********/  
  2. function Fun(){}  
  3. var foo=new Fun();  
  4. foo.constructor==Fun()  
  5. //也就是说自定义Fun函数的prototype原型就是foo实例的间接原型！自定义function的原型将继承Object  
  6.   
  7. /******** 实例对象可以直接使用__proto__找到构造器使用的prototype ********/  
  8. foo.__proto__==foo.construtor.prototype;  
  9. //true, 但是，__proto__属性在IE浏览器中一直到IE11才被支持  
  10.   
  11.   
  12. /******** 自定义函数和原型的关系 ********/  
  13. function c(){}  
  14. c.prototype  
  15. ->c {}  
  16. --->constructor: function()  
  17. --->proto: Object  //对象继承的原型  
  18. ============================================================================  
  19. c.constructor      //c本身已经是构造器了  
  20. function Function() { [native code] }  
  21. Function.prototype //构造函数Function的原型，如果没有特殊定义就是空function  
  22. function (){}  
  23. ============================================================================  
  24.   
  25. /******** 布尔值实例 ********/  
  26. true.constructor  
  27. function Boolean(){ [native code] }  
  28. Boolean.prototype  
  29. -> Boolean{ [[PrimitiveValue]]: false}  
  30. --->constructor: function Boolean()  
  31. --->toString: function toString()  
  32. --->valueOf: function valueOf()  
  33. ---> proto : Object   //对象继承的原型  
Tags: , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3139)

JS 遍历图片路径取得图片名并重新拼接

[不指定 2016/09/24 23:05 | by 刘新修 ]
JavaScript代码
  1. var arr=[    
  2. {    
  3.     "picSrc": "http://code.liuxinxiu.com/upload/user/1460273594384A3577E4_c.jpg",    
  4.     "name": "贤惠的含羞草",    
  5.     "age": "36岁",    
  6.     "stature": "164cm",    
  7.     "character": "顾家",    
  8.     "info": "寻找北京的男生",    
  9.     "distance": "3.0km"    
  10. },    
  11. {    
  12.     "picSrc": "http://code.liuxinxiu.com/upload/user/1470127527444A8EF6B2_c.png",    
  13.     "name": "微微笑",    
  14.     "age": "28岁",    
  15.     "stature": "164cm",    
  16.     "character": "可爱",    
  17.     "info": "寻找北京 28~40岁的男生",    
  18.     "distance": "1.2km"    
  19. }    
  20. ];    
  21. /******** 循环取得获取图片名称 ********/    
  22. for(i in arr){    
  23.     if(arr[i].picSrc){    
  24.         var reg = /.*\/([^\.\/]+)/g;    
  25.         var fileName=arr[i].picSrc.replace(reg,"$1");  
  26.         arr[i].picSrc='http://code.liuxinxiu.com/upload/user/'+fileName;   //重新赋值再转为JSON.字符串  
  27.         //console.log('http://code.liuxinxiu.com/upload/user/'+fileName);  //重新拼接  
  28.         //console.log(fileName); //正则获取最后一个字符    
  29.   
  30.     }    
  31. };  
  32. JSON.stringify(arr);  

适用于LINUX下批量下载图片

Tags:
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3171)

React - ES6 - Ajax获取接口数据渲染到UI组件【完整示例】

[不指定 2016/09/24 01:22 | by 刘新修 ]

本站PHP后端接口:  http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1

本实例用 ES5 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES5/

JavaScript代码
  1. /****** ES6输入文件[调用模块依赖] ******/  
  2. import React, { Component, PropTypes } from 'react'  
  3. import $ from 'n-zepto'  
  4.   
  5. /****** ES5输入文件[调用模块依赖] ******/  
  6. //var React=require('react');  
  7. //var $=require('n-zepto');  
  8.   
  9. //import * as from './commentList.js'  
  10. //import list from './commentList.js';  
  11.   
  12.   
  13. /****** 本地模拟Array数据******/  
  14. var movies = [  
  15.     {  
  16.         id: 1,  
  17.         name: '速度与激情001',  
  18.         date: 2011  
  19.     },  
  20.     {  
  21.         id: 2,  
  22.         name: '速度与激情002',  
  23.         date: 2009  
  24.     }  
  25. ];  
  26.   
  27. /****** 外部子组件map数组当做模板之用 ES5 + JSX 语法编写 ******/  
  28. var MoviesList = React.createClass({  
  29.     render: function () {  
  30.         // this.props 用于从组件外部传入数据  
  31.         var _movies = this.props._movies;  
  32.         return (  
  33.             <li className="datali">  
  34.         {_movies.id}-{_movies.name}  
  35.             </li>  
  36.         )  
  37.     }  
  38. });  
  39.   
  40. /****** 外部子组件map数组当做模板之用 ES6 + JSX 语法编写 ******/  
  41. let CommentList=class CommentList extends Component {  
  42.     constructor(props) {  
  43.         super(props);  //ES6调用父类构造函数super不能少！  
  44.         this.state = {  
  45.              wording: '你好呀, '  
  46.         };  
  47.     }  
  48.   
  49.     /****** Ajax子组件中[主体模板] ******/  
  50.     render(){  
  51.         return <ul>{this.props.comments.map(this.renderComment)}</ul>;  
  52.     }  
  53.   
  54.     /****** Ajax子组件中[嵌套模板] ******/  
  55.     renderComment({plat,type,name,guid,cre_time,lottery}){  
  56.         return (  
  57.             <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>  
  58.         )  
  59.     }  
  60.   
  61. }  
  62.   
  63. /****** 使用ES6 + JSX 语法编写 class xx extends React.Component{} 创建一个组件 ******/  
  64. class CommentListContainer extends Component {  
  65.     /****** [ES6-constructor||ES5-getInitialState] ******/  
  66.     constructor(){  
  67.         super();  
  68.         this.state = {  
  69.             loading: true,  
  70.             title: '我喜欢的电影',  
  71.             movies: [],  
  72.         comments: []  
  73.     }  
  74.     }  
  75.   
  76.     componentDidMount(){  
  77.         $.ajax({  
  78.               type: 'GET',  
  79.               url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',  
  80.               data: {GUID:'1'},  
  81.               dataType:'jsonp', //告诉Ajax调用$jsonp  
  82.               jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  83.               success: function(data){  
  84.                   var yy=JSON.stringify(data);  
  85.                   var tlist=JSON.stringify(data.enttityList);  
  86.                   //console.log(tlist);  
  87.                   //console.log(this.state.title+'22');  
  88.                   this.setState({  
  89.                         comments:data.enttityList,  
  90.                         lottery:data.enttityList[0].lottery  
  91.                   });  
  92.                   var commentsStr=JSON.stringify(this.state.comments);  
  93.                   console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据  
  94.                   //console.log(this.state.comments+'33')  
  95.               }.bind(this),  
  96.               error: function(xhr, type){  
  97.                   alert(xhr+type+'Ajax error!');  
  98.               }  
  99.         });  
  100.         //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  101.     }  
  102.   
  103.     render(){  
  104.         return <CommentList comments={this.state.comments}/>;  
  105.     }  
  106. }  
  107.   
  108.   
  109. /****** ES5输出给router ******/  
  110. //module.exports=DemoComponent;  
  111.   
  112. /****** ES6输出给router ******/  
  113. export default CommentListContainer;  
Tags: , , , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(5839)

React - ES5 - Ajax获取接口数据渲染到UI组件【完整示例】

[不指定 2016/09/23 21:11 | by 刘新修 ]

本站PHP后端接口:  http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1

 本实例用 ES6 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES6/

JavaScript代码
  1. //import React, { Component, PropTypes } from 'react'  
  2. //import $ from 'n-zepto'  
  3. var React=require('react'); //Es-5
  4. var $=require('n-zepto');   //Es-5
  5.   
  6. //import * as from './commentList.js'  
  7. //import list from './commentList.js';  
  8.   
  9.   
  10. /****** 外部子组件map数组当做模板之用 ******/  
  11. var MoviesList = React.createClass({  
  12.     render: function () {  
  13.         // this.props 用于从组件外部传入数据  
  14.         ar _movies = this.props._movies;  
  15.         return (  
  16.             <li className="datali">
  17.                 {_movies.id}-{_movies.name}
  18.             </li>  
  19.         )  
  20.     }
  21. });  
  22.   
  23. /****** 本地模拟Array数据******/  
  24. var movies = [  
  25.     {  
  26.         id: 1,  
  27.         name: '速度与激情001',  
  28.         date: 2011  
  29.     },  
  30.     {  
  31.         id: 2,  
  32.         name: '速度与激情002',  
  33.         date: 2009  
  34.     }  
  35. ];  
  36.   
  37.   
  38. /****** 使用Es5语法 React.createClass 创建一个组件 ******/  
  39. var DemoComponent = React.createClass({  
  40.     /****** 使用 getInitialState 的返回值作为数据的默认值 ******/  
  41.     getInitialState: function () {  
  42.     // this.state 用于存储数据comments被Ajax赋值要先定义个名称  
  43.         return {  
  44.             loading: true,  
  45.             title: '我喜欢的电影',  
  46.             movies: [],  
  47.         comments: []  
  48.         }  
  49.     },  
  50.   
  51.     componentDidMount: function() {  
  52.     $.ajax({  
  53.         type: 'GET',  
  54.         url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',  
  55.         data: {GUID:'1'},  
  56.         dataType:'jsonp', //告诉Ajax调用$jsonp  
  57.         jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  58.         success: function(data){  
  59.             var yy=JSON.stringify(data);  
  60.             var tlist=JSON.stringify(data.enttityList);  
  61.             console.log(tlist);  
  62.             //console.log(this.state.title+'22')  
  63.             this.setState({  
  64.                 comments:data.enttityList,  
  65.                 lottery:data.enttityList[0].lottery  
  66.             });  
  67.             var slist=JSON.stringify(this.state.comments);  
  68.             console.log(slist)  
  69.             //console.log(this.state.comments+'33')  
  70.         }.bind(this),  
  71.         error: function(xhr, type){  
  72.             alert(xhr+type+'Ajax error!'); //error
  73.         }  
  74.     });  
  75.     //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  76.     },  
  77.   
  78.     render: function () {  
  79.         // this.state 用于存储当前的数据  
  80.         var comments = this.state.comments;  
  81.   
  82.         //var dataHtml=movies.map(<p>{name}</p>);// 注意这里 bind(this) 修正了上下文  
  83.   
  84.     /****** Movies子模板 ******/  
  85.         function renderMovies({id,name}){  
  86.             return <li>{id}-{name}</li>;  
  87.         }  
  88.     /****** Movies大模板[内嵌子模板] ******/  
  89.         //var dataHtml = movies.map(renderMovies);  
  90.   
  91.     /****** Movies大模板[外调子模板] ******/  
  92.         var dataHtml = movies.map(function(movies){  
  93.             return (  
  94.                 <MoviesList _movies={movies}/>  
  95.             )  
  96.     }.bind(this));// 注意这里 bind(this) 修正了上下文  
  97.     //console.log('movies:'+movies+'--'+'dataHtml:'+dataHtml);  
  98.   
  99.   
  100.     /****** Ajax子模板******/  
  101.         function renderComment({plat,type,name,guid,cre_time,lottery}){  
  102.             return <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>;  
  103.         }  
  104.     /****** Ajax大模板 ******/  
  105.         var AjaxHtml = this.state.comments.map(renderComment);  
  106.     //var AjaxHtml='11'  
  107.     console.log('comments:'+comments+'--'+'AjaxHtml:'+AjaxHtml);  
  108.   
  109.     return (  
  110.         <ul>{AjaxHtml}</ul>  
  111.     )  
  112.     }  
  113. });  
  114.   
  115. /****** ES5输出给router ******/  
  116. module.exports=DemoComponent;  
  117.   
  118. /****** ES6输出给router ******/  
  119. //export default DemoComponent;  

 

Tags: , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4184)

React 速记

[不指定 2016/09/23 21:06 | by 刘新修 ]

使用ES5||ES6 -- 输入文件示例 [调用所依赖的模块]：

JavaScript代码
  1. /****** ES5调用依赖模块[require]被打包会自动生成关联代码 ******/  
  2. var MyComponent = require('./components/movie-list');  
  3.   
  4. /****** ES6调用依赖模块 ******/  
  5. import MyComponent from './components/movie-list';  

使用ES5||ES6 -- 输出文件示例[输出给被依赖模块]：

JavaScript代码
  1. /****** ES5输出给router ******/
  2. module.exports=DemoComponent;
  3.  
  4. /****** ES6输出给router ******/  
  5. //export default DemoComponent;  
  6.  

使用ES5 -- 创建一个组件：

JavaScript代码
  1. /****** 使用Es5语法 React.createClass 创建一个组件 ******/  
  2. var DemoComponent = React.createClass({  
  3.     /****** 使用 getInitialState 的返回值作为数据的默认值(!return) ******/  
  4.     getInitialState: function () {  
  5.         return {  
  6.             loading: true,  
  7.             title: '我喜欢的电影',  
  8.             // 注意这里将 外部传入的数据赋值给了 this.state  
  9.             movies: []  
  10.         }  
  11.     },  
  12.     /****** 输出HTML模板，此处可以调用子组件******/  
  13.     render: function () {  
  14.         return (  
  15.             <div className="component-hello">  
  16.         {this.state.title}  
  17.             </div>  
  18.         )  
  19.     }  
  20. });  

使用ES5 -- map遍历当前Array并调用渲染数据的[外部]子组件：

JavaScript代码
  1. /****** 使用Es5语法 遍历数组并调用外部子组件 ******/  
  2. var MoviesList=React.createClass({...});  
  3. var dataHtml = movies.map(function(movies){  
  4.    return (  
  5.         <MoviesList _movies={movies}/>  
  6.    )  
  7. }.bind(this));// 注意这里 bind(this) 修正了上下文  
  8. return (  
  9.    <ul>{dataHtml}</ul>  
  10. )  
  11.   
  12.   
  13. /****** 外部子组件map数组当做模板之用 ******/  
  14. var MoviesList = React.createClass({  
  15.     render: function () {  
  16.         // this.props 用于从组件外部传入数据  
  17.         var _movies = this.props._movies;  
  18.         return (  
  19.             <li className="datali">  
  20.         {_movies.id}-{_movies.name}  
  21.             </li>  
  22.         )  
  23.     }  
  24. });  

使用ES5 -- map遍历当前Array并调用渲染数据的[内部]子组件：

JavaScript代码
  1. /****** 使用Es5语法 遍历数组并调用内部子组件 ******/  
  2. function renderMovies({id,name}){  
  3.    return <li>{id}-{name}</li>;  
  4. }  
  5. var dataHtml = movies.map(renderMovies);  
  6. return (  
  7.    <ul>{dataHtml}</ul>  
  8. )  

Ajax获取接口数据并设置到state :

JavaScript代码
  1. componentDidMount(){  
  2.     $.ajax({  
  3.           type: 'GET',  
  4.           url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php', //JSONP接口
  5.           data: {GUID:'1'},  
  6.           dataType:'jsonp', //告诉Ajax调用$jsonp  
  7.           jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  8.           success: function(data){  
  9.               var yy=JSON.stringify(data);  
  10.               var tlist=JSON.stringify(data.enttityList);  
  11.               //console.log(tlist);  
  12.               //console.log(this.state.title+'22');  
  13.               this.setState({  
  14.                     comments:data.enttityList,  
  15.                     lottery:data.enttityList[0].lottery  
  16.               });  
  17.               var commentsStr=JSON.stringify(this.state.comments);  
  18.               console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据  
  19.               //console.log(this.state.comments+'33')  
  20.           }.bind(this),  
  21.           error: function(xhr, type){  
  22.               alert(xhr+type+'Ajax error!');  
  23.           }  
  24.     });  
  25.     //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  26. }  

react 的事件调用分类

C#代码
  1. 触摸事件：onTouchCancel\onTouchEnd\onTouchMove\onTouchStart  
  2. (只会在移动设备上接受)  
  3.    
  4. 键盘事件：onKeyDown\onKeyPress\onKeyUp  
  5.    
  6. 剪切事件：onCopy\onCut\onPaste  
  7.    
  8. 表单事件：onChange\onInput\onSubmit  
  9.    
  10. 焦点事件：onFocus\onBlur  
  11.    
  12. UI元素：onScroll(移动设备是手指滚动和PC的鼠标滑动)  
  13.    
  14. 滚动事件：onWheel(鼠标滚轮)  
  15.    
  16. 鼠标类型:onClick\onContextMenu(右键)\onDoubleClick\onMouseDown\onMouseEnter\  
  17.      onMouseLeave\onMouseMove\onMouseOut\onMouseOver\onMouseUp  
  18.   onDrag\onDrop\onDragEnd\onDragEnter\onDragExit\onDragLeave\onDragOver\onDragStart  

 

Tags: , , , , , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(2806)

react 嵌套路由相关

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

 /src/js/app.js

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2. import {render} from 'react-dom';   //render((_component),Dom);  
  3. //import ReactDOM from 'react-dom';     //ReactDOM.render((_component),Dom);  
  4. import getRouter from './getRouter';  
  5. import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router';  
  6.   
  7. /* using an ES6 transpiler, like babel */  
  8. //import { createHistory } from 'history/createBrowserHistory'  
  9. //import createBrowserHistory from 'history/createBrowserHistory';  
  10.   
  11. /* Import Component */  
  12. import Hello from '../components/hello/hello.jsx'  
  13. import Other from '../components/other/other.jsx'  
  14.   
  15. /* ensure test */  
  16. require.ensure(['./test'],function(require){  
  17.     var aModule = require('./test');  
  18.     console.log("xxxx");  
  19. },'test');  
  20.   
  21. /* create history for router */  
  22. //const history = createHistory()  
  23.   
  24. /* Router Config */  
  25. render((  
  26.   <Router history={hashHistory}>  
  27.     <Route path="/" component={getRouter}>  
  28.       <IndexRoute component={Hello} />  
  29.       <Route path="other" component={Other} />  
  30.     </Route>  
  31.   </Router>  
  32. ), document.getElementById('app'));  

/src/js/getRouter.js

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2. export default React.createClass ({   
  3.   render() {  
  4.     return <div>  
  5.       {this.props.children}  
  6.     </div>  
  7.   }  
  8. });  

/src/components/hello/hello.jsx

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2.   
  3. /* 导入组件样式hello.css */  
  4. import styles from './css/hello.css';  
  5.   
  6. //require("./css/hello.css");  
  7.   
  8. class Hello extends React.Component {   
  9.     render(){   
  10.         return (  
  11.         <div className="hello">  
  12.         <p>Hello World!!!!!!!...</p>  
  13.         <p>cll不错！</p>  
  14.         </div>  
  15.         );   
  16.     };  
  17. };  
  18. export default Hello;  

/src/components/other/other.jsx

JavaScript代码
  1. class Other extends React.Component {  
  2.   render() {  
  3.         return (  
  4.         <div>  
  5.         <p>this is other component!!!</p>  
  6.         <p>111111111cll不错！</p>  
  7.         </div>  
  8.         )  
  9.   }  
  10. }  
  11.   
  12. export default Other;  
Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3488)

NodeJS反向代理至后端数据接口

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

支持来自任何域名的Post请求，验证请求参数必须有: [name、gender] 否则直接JSON返回错误！

JavaScript代码
  1. var http=require('http');  
  2. function server(){  
  3.     this.exec=function(route,req,res){  
  4.     var _self=this;  
  5.     /********** 获取客户端数组中的部分数据可向后多取 **********/  
  6.     this.arrv=function(o,n,p){  
  7.        var i,y,d,p;y=false;d='';  
  8.        for(i in o){  
  9.          if(o[i]==n&&p==undefined){i++;return o[i]};  
  10.          if(o[i]==n&&p!=undefined&&!isNaN(p)||y){  
  11.              var s;s=i;  
  12.              p=Number(p);  
  13.              if(p>0){  
  14.                 p--;s++;d+=o[s];y=true;  
  15.              }  
  16.              else{  
  17.                 return d;  
  18.              }  
  19.          }  
  20.        }  
  21.     };  
  22.     /********** 请求后端时可获取单个header头内地信息 **********/  
  23.     this.getReqHeaders=function(n){  
  24.         if(typeof(n)=='undefined'){  
  25.           console.log('getReqHeaders(n)变量没有定义!');  
  26.         }else{  
  27.             return _self.arrv(req.rawHeaders,String(n));  
  28.         }  
  29.     };  
  30.     /******** 获取客户端请求的header整体头部信息 ********/  
  31.     this.rawHeaders=function(state){  
  32.         var json={};  
  33.         if(!state){  
  34.             for(var i=0;i<req.rawHeaders.length;i++){  
  35.                 var s,s=i;  
  36.                 if(i%2==0){  
  37.                     s++;json[req.rawHeaders[i]]=req.rawHeaders[s];  
  38.                 }  
  39.             }  
  40.         }  
  41.         if(state){  
  42.             for(var i=0;i<req.rawHeaders.length;i++){  
  43.                 json[i]=req.rawHeaders[i];  
  44.             }  
  45.         }  
  46.         var jsonStr=JSON.stringify(json);//结果："{'1':'a','2':'b','3':'c'}"  
  47.         var jsonObj=JSON.parse(jsonStr); //结果：[object Object]  
  48.         return jsonObj;  
  49.     };  
  50.   
  51.   
  52.     //接收参数 ------ sreq.on("data",function(data){});接收html中ajax传递的参数  
  53.     req.on("data",function(data){  
  54.   
  55.         /********* 打印提示||接受数据并反向代理到后端 *********/  
  56.         console.log("\n--->>\nReq.on('data')",req.method.toUpperCase()+" Use Proxy!");  
  57.   
  58.         /********* 使用代理||这里Post请求体是回调data *********/  
  59.         send(route,req,res,data);  
  60.     });  
  61.   
  62.     /********** 判断是GET请求类型||也可以代理给后端处理 **********/  
  63.     if(req.method.toUpperCase()=="GET"){  
  64.   
  65.         var params=[];  
  66.         //params=url.parse(request.url,true).query;  
  67.         //params['fruit']=compute(params);  
  68.         res.writeHeader(200,{  
  69.             "Content-type":"text/html; charset=utf-8"  
  70.         });  
  71.         res.write('<h1>It is forbidden for the URL request!</h1>');  
  72.         res.write('<hr><address>NodeJs/'+process.version);  
  73.         res.write(' at '+req.headers.host.split(':')[0]);  
  74.         res.write(' Port '+req.headers.host.split(':')[1]+'</address>');  
  75.         res.end();  
  76.   
  77.     }  
  78.     /********* 如有req.on("data",function(data){});就跳过了以下方法 ******/  
  79.     /********* 判断是POST请求类型||提交不走代理此方法是本机处理回调 **********/  
  80.     else if(req.method.toUpperCase()=='POSTo'){  
  81.   
  82.         var postData="";  
  83.         /********** 读取Post提交的数据 **********/  
  84.         req.addListener("data",function(data){  
  85.             postData+=data;  
  86.         });  
  87.   
  88.         /********** 数据读取完毕就会执行的监听 *********/  
  89.         req.addListener("end",function(){  
  90.            /********* 定义Post请求主体 *********/  
  91.            var query=require('querystring').parse(postData);  
  92.   
  93.            /************** 判断如果有POST过来数据 *************/  
  94.            if(query.name&&query.gender){  
  95.               console.log('Start a request...');  
  96.   
  97.                 var origin=_self.arrv(req.rawHeaders,'Origin');  
  98.                 console.log("origin:"+typeof req.rawHeaders+'---')  
  99.   
  100.   
  101.               /********** 代理转发至php,跨域全放开让后端去匹配验证 **********/  
  102.               //res.setHeader('Access-Control-Allow-Origin','*');  
  103.               //res.setHeader('Access-Control-Allow-Headers','X-Requested-With');  
  104.               //res.setHeader('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,OPTIONS');  
  105.               //send(route,req,res,query);  
  106.            }  
  107.            /****** 判断结束 ******/  
  108.         });  
  109.   
  110.     }  
  111.   
  112.   
  113.     /******** 请求后端接口 ********/  
  114.     function send(route,req,res,data){  
  115.   
  116.         /***************************************
  117.         var data={
  118.               name:'liuxinxiu',
  119.               gender:"male",
  120.               time:new Date().getTime()
  121.         };
  122.         ****************************************/  
  123.         //data=require('querystring').stringify(data);  
  124.         var rawHeaders=_self.rawHeaders();  
  125.   
  126.         /********** 判断一个对象是哪中类型的对象 **********/  
  127.         function isArray(obj){  
  128.               return Object.prototype.toString.call(obj)==='[object Array]';  
  129.         };  
  130.   
  131.         /********* 打印Request Headers **********/  
  132.         console.log("\n--->>\nRequest Headers:",req.rawHeaders);  
  133.   
  134.         /***** 向后端发送请求基本的设置 *****/  
  135.         var options={  
  136.               port: 80,  
  137.               host:"code.liuxinxiu.com",  
  138.               path:'/php/Post/CORS_PHP.php',  
  139.               method: 'POST',  
  140.               headers:{  
  141.                   'Content-Type':_self.getReqHeaders('Content-Type'),  
  142.                   'Content-Length':data.length,  
  143.                   'Origin':_self.getReqHeaders('Origin'),  
  144.                   'User-Agent':_self.getReqHeaders('User-Agent')  
  145.               }  
  146.         };  
  147.   
  148.         /***** 如果header整体替换就会乱码 *****/  
  149.         //options.headers=_self.rawHeaders();  
  150.   
  151.   
  152.         var request=http.request(options,function(result){  
  153.               console.log("\n--->>\nstatusCode:",result.statusCode);  
  154.               console.log("\n--->>\nResponse Headers:",result.headers);  
  155.   
  156.               if(result){  
  157.                  var content_type,origin,x_powered_by,server;  
  158.                      //content_type=origin=x_powered_by=server=undefined;  
  159.                      content_type=result.headers['content-type'];  
  160.                      origin=result.headers['access-control-allow-origin'];  
  161.                      x_powered_by=result.headers['x-powered-by'];  
  162.                      server=result.headers['server'];  
  163.   
  164.                      /********** 判断分别加入包含服务器错误页 **********/  
  165.                      if(origin!=undefined&&result.statusCode==200){  
  166.                         res.setHeader('Access-Control-Allow-Origin',origin);  
  167.                      }  
  168.                      if(content_type!=undefined){  
  169.                         res.setHeader('Content-Type',content_type);  
  170.                      }  
  171.                      if(x_powered_by!=undefined){  
  172.                         res.setHeader('X-Powered-By',x_powered_by);  
  173.                      }  
  174.                      if(server!=undefined){  
  175.                         res.setHeader('Server',server);  
  176.                      }  
  177.   
  178.               }  
  179.               /********** 有异常的请求需要问题定位 **********/  
  180.               if(result.statusCode<200||result.statusCode>206){  
  181.               }  
  182.   
  183.               /********** 接受数据数据监听 **********/  
  184.               var _data='';  
  185.               result.on('data',function(chunk){  
  186.                 _data+=chunk;  
  187.               });  
  188.   
  189.               /********** 结束接受数据监听 *********/  
  190.               result.on('end',function(){  
  191.                    console.log("\n--->>\nresult:",_data);  
  192.                    res.write(_data);  
  193.                    res.end();  
  194.               });  
  195.   
  196.         /******** request逻辑完成 ********/  
  197.         });  
  198.   
  199.   
  200.         request.on('error',function(e) {  
  201.               console.log('problem with request: ' + e.message);  
  202.         });  
  203.   
  204.         //request.write(data);  
  205.         request.write(data+"\n");  
  206.         request.end();  
  207.   
  208.     }  
  209.   
  210.   
  211.   
  212.   /****** 内部结束 ******/  
  213.   }  
  214. }  
  215. module.exports=new server();  

NodeJS数据接口(Post请求直接代理至后端PHP): http://liuxinxiu.com:3000/CORS_Node_Proxy/

PHP数据接口(验证跨域提交白名单外返回错误):  http://code.liuxinxiu.com/php/Post/CORS_PHP.php

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

http 200 from cache vs 304 not modified

[不指定 2016/09/18 19:06 | by 刘新修 ]

在讨论这个问题之前先了解一下浏览器的缓存机制。浏览器的缓存机制有两种，一种是“Freshness（新鲜度，过期机制）”，另一种是“Validation（校验值，验证机制）”。

 
“Freshness（新鲜度，过期机制）”：缓存副本有效期。若一个缓存副本是有效的、足够新的，则在这段有效期，浏览器直接从缓存中返回数据，无需再次发出实际请求。于是就有了“http 200 from cache”。
 
“Validation（校验值，验证机制）”：http设定了一套校验规则，用来校验当前客户端所缓存的资源是否仍然是新鲜的。当缓存失效时（Freshness优先级高于Validation），浏览器会在请求头中包含前置条件头，再次向服务器发送请求。当校验失效时，说明资源已经被修改或过期，浏览器需求重新获取资源内容。当校验未失效时，会返回“304 not modified”。
 
与缓存有关的http消息报头
 
1.Freshness（新鲜度，过期机制）有关的http消息报头有Cache-Control、Expires、Pragma等。
 
Cache-Control与Expires作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。
 
2.Validation（校验值，验证机制）有关的http消息报头有ETag、Last-Modified、If-Modified-Since、If-None-Match、If-Range、Cache-Control等。
 
Last-modified 和 If-Modefied-Since 一起工作。Last-modfied（在request头内） 指的是本地文件的修改时间。 If-Modefied-Since（在response头内）指的是服务器文件的修改时间。当Last-modefied与If-modefied-since一致时，说明文件没有被修改过，返回304，浏览器直接读取缓存中的文件。若不一致，则说明文件被修改过，返回200，浏览器重新从服务器换取文件。
 
If-None-Match 和 ETag 一起工作。 如果If-None-Match 和 ETag 一致，说明文件没有修改，返回304，使用缓存。否则重新从服务器获取文件。
 
既然已经有了 Last-Modified 已经能够知道本地缓存是否是最新的了，为什么还需要 Etag 呢？
 
主要是基于以下几个原因：
 
Last-Modified 标注的最后修改时间只能精确到秒，如果有些资源在一秒之内被多次修改的话，他就不能准确标注文件的新鲜度了
如果某些资源会被定期生成，当内容没有变化，但 Last-Modified 却改变了，导致文件没使用缓存
有可能存在服务器没有准确获取资源修改时间，或者与代理服务器时间不一致的情形。
Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304
=============================================================
1,Last-Modified
设置 header("Last-Modified: ".gmdate("D, d M Y H:i:s", time() )." GMT"); 
Last-Modified虽然使用了缓存，但是每次打开页面依然需要向服务器发起http请求，浏览器根据用户的$_SERVER['HTTP_IF_MODIFIED_SINCE']来判断浏览器的内容是否过期，没过期的话返回304状态，浏览器内容从缓存中读取
 
2，Expires
设置 header("Expires: ".gmdate("D, d M Y H:i:s", time()+$cache_time )." GMT"); 
状态码依然是200，时间依然是旧的时间，Size栏目显示为from cache，表示内容是直接从浏览器读取，浏览器根本就没有向服务器发起http请求
 
Expires比Last-Modified缓存效果更好是吧，因为本地有缓存数据时，不需要向服务器发起http请求，服务器的并发数会明显的减少，可以少处理很多http请求

 

HTTP相关 | 评论(0) | 引用(0) | 阅读(2224)
第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]