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，提示下单成功
