HTML5 7

 

 

今日目標：

(1)補充小知識點：localStorage的事件

(2)HTML5新特性之十——WebSocket

(3)HTML5階段項目 —— 目前全部知識的大綜合演練

 

 

1.如何得知localStorage中數據的修改？

  localStorage中任何數據的修改，都會觸發一個事件：

  window.onstorage = function(){  }

 

2. HTML5新特性之十——WebSocket

  提示：重在概念的理解

  HTTP協議：是基於「請求-響應」模型的協議，客戶端發起一個請求，服務器就要返回一個響應，請求消息和響應消息是一一對應的！沒有請求就沒有響應！在一些特別的應用場景下（如實時走勢圖，在線聊天室），只能使用「定時器+AJAX」不停的向服務器發起請求以得到最新的數據——「心跳請求」，解決方案並不完美：心跳過快服務器壓力過大，過慢致使數據實時性差。

 WebSocket協議：是基於「廣播-收聽」模型的協議，只要客戶端鏈接到服務器上，就再也不斷開，一方能夠發送多條消息，對方只接收而不發送，能夠解決上述應用中的問題。這個協議自己的問題：客戶端與服務器是「永久鏈接」，致使服務器能夠同時鏈接的客戶端數是有限的！

 

基於WebSocket協議的應用必需兩套程序：

(1)服務器端程序：                

       可以使用PHP、Java、Node.js等語言編寫

       注意：PHP編寫的WebSocket服務器獨立運行的，無需依賴Apache！ 

       c:/xampp/php/php.exe  e:/socket_server.php

       記得修改php.ini文件的907行！去掉開頭的分號

       extension=php_sockets.dll

(2)客戶端程序：

       可以使用PHP、Java、HTML5/JavaScript等語言編寫

    使用HTML5提供的WebSocket對象建立WS客戶端：

       var wsClient = new WebSocket('ws://地址:端口');

       wsClient.onopen = function(){      //鏈接成功

              ws.send('msg');                    //發送消息

              ws.onmessage = function(e){  //接收消息

                     //e.data

              }

       }

WebSocket是一種新的通信協議，與HTTP協議不一樣，是基於「廣播-收聽」模型的協議，適用於一些特殊的應用場合，如聊天室、實時走勢獲取

 

 

3.「京東商城項目」已經實現的功能點

  (1)首頁

  (2)產品列表頁

  (3)產品詳情頁

  (4)登陸頁

  (5)註冊頁

  (6)購物車頁

  (7)訂單生成頁

  (8)用戶中心頁

 

4.HTML5階段項目——京東用戶中心

  須要實現的功能點：

  (1)用戶註冊

  (2)查看購物車後肯定下單，生成訂單

  (3)進入用戶中心查看本身的全部訂單

  (4)進入用戶中心查看本身的消費統計

  (5)進入用戶中心參與幸運抽獎

 

  須要使用到的技術：

  MySQL、PHP、AJAX、Video、表單2.0、WebStorage、Canvas繪圖、SVG繪圖

 

  實現步驟：   SQL  ->  PHP  ->  HTML/JS

  (1)編寫PHP，user_add.php，接收客戶端提交的uname和upwd，添加到數據庫中，返回{"code":1,"userId": 3}

  (2)編寫HTML，register.html，實現異步的用戶註冊，成功後跳轉到產品列表頁

  (3)修改HTML，productlist.html，用戶登陸成功後把用戶名和編號保存到sessionStorage中

 (4)修改HTML，shoppingcart.html，從sessionStorage中讀取登陸用戶的信息，若沒有，則跳轉到productlist.html讓用戶登陸；如有則顯示出「歡迎回來：XXX」。點擊「去結算」按鈕後跳轉到addorder.html

  (5)建立HTML，addorder.html，異步請求頁頭和頁尾，若沒有用戶登陸信息，則跳轉到productlist.html讓用戶登陸

  (6)修改HTML，addorder.html，根據登陸信息，異步請求當前登陸用戶購物車中的內容，顯示在「下單頁面」中

 -----------------文華老師的進度線----------------------

 (7)編寫SQL，添加新的表                          

       建立訂單信息表：jd_order( oid, rcvName, addr, price, payment(付款方式1/2/3/4)，orderTime, status(訂單狀態1/2/3/4/5/6)，userId )

       建立訂單詳情表：jd_order_detail ( did, orderId, productId, count )

  (8)編寫PHP，order_add.php，接收客戶端的rcvName, addr, price, payment(付款方式1/2/3/4)，userId，執行以下的SQL:

    SQL1：向jd_order表中插入一行記錄，獲得oid

       SQL2：讀取當前用戶購物車中的條目，

       SQL3：（循環）針對每一個購物車項執行INSERT，插入到jd_order_detail

       SQL4：刪除當前用戶購物車中的條目

       返回：{"code":1, "orderId": 9234234134}

  (9)修改HTML，addorder.html，把全部的用戶輸入/選擇全放在<input type="hidden">，點擊「提交訂單」後，異步提交給服務器，獲取到訂單編號，跳轉到addorder_succ.html，提示下單成功