第一关： html(3)、CSS(5) —— 静态页面
第二关： JS(7)、DOM(6.5)、jQuery(6) —— 用户交互
第三关： AJAX(9)、HTML5(6)、Bootstrap(5) —— 准全栈
第四关： 框架
特点：内容散、主题散、难度大、前四天都是迷茫的
今日目标：
(1)服务器概述 —— 了解
(2)数据库服务器 —— 难点&重点
1.如何访问服务器
协议(语言)：// 地址 / 端口号(门牌号)
|
B KB MB GB TB PB EB ZB YB |
2.数据库服务器的种类
(1)网状数据库
(2)树型数据库
(3)关系型数据库 —— 主流
服务器端程序：负责保存管理数据
客户端程序：负责向服务器发起增删改查指令
(4)对象型数据库
关系型数据库中数据结构：
SERVER => DATABASE => TABLE => ROW => COLUMN
mysql的两个版本：
(1)Oracle - MySQL
(2)Maria基金会 - MariaDB
XAMPP套装： http://xampp.org
3.使用MySQL服务器的步骤 —— 重点
(1)服务器端：下载并安装MySQL服务器端程序
C:\xampp\mysql\bin\mysqld.exe 精灵/守护程序
(2)服务器端：启动MySQL的服务器程序——售货员上岗
确保3306端口已打开
--------------------------------------------
(3)客户端：下载并安装MySQL客户端程序
C:\xampp\mysql\bin\mysql.exe 注意和服务器程序的区别
(4)客户端：启动客户端程序，连接到服务器上
C:\xampp\mysql\bin\mysql.exe -uroot -p
若设置了Path系统变量，可以简写：
mysql -uroot
(5)客户端：向服务器发送操作指令，实现增删改查数据
SHOW DATABASES; //显示服务器上已有的数据库
.....
练习：反复练习熟悉MySQL服务器的“登录-查看-退出”过程
4.常用的SQL语句
向服务器提交SQL语句有两种方式：
(1)交互模式： 输入一行提交执行一行...，适合于执行少量的语句。
1)连接到服务器 mysql -uroot -p
2)输入一行命令，添加一个分号，回车执行
3)输入一行命令，添加一个分号，回车执行
(2)脚本模式： 把所有的语句编写在一个文本文件中，一次性全部提交给服务器执行，适合于执行批量多条语句。
1)创建一个文本文件
2)开始编写所有的语句
3)把整个文本文件提交给服务器执行
mysql -uroot < e:/x.sql
|
Structured Query Language, 结构化查询语言，最早由IBM提出的用于操作关系型数据库语言，实现增删改查功能；后来由ISO采纳为行业标准语言，当前主流的关系型数据库(如SQLite、MySQL、SQLServer、Oracle、DB2等)都支持SQL语言标准。 |
SQL语句编写时需要注意：
(1)命令不区分大小写，习惯上关键字都大写，非关键字都小写
(2)所有语句都必须以分号结尾
(3)注释有两种：单行注释(#开头)，以及多行注释(/**/)
(4)插入记录行时，字符串/日期数据必须使用单引号；数字类型可用单引号也可不用；关键字(如NULL/TRUE/FALSE)数据不能使用单引号。
|
数据库乱码问题解决办法： (1)SET NAMES UTF8; (2)CREATE DATABASE xx CHARSET=UTF8; (3).sql文件必须另存为UTF-8编码 (4)必须在交互模式下查询！ |
课下练习：
创建jd.sql文件，根据要求编写必需的SQL语句
1)设置SQL编码方式
2)删除数据库-jd，如何存在的话
3)创建数据库-jd，指定字符编码方式
4)开始使用数据库-jd
5)创建产品信息表-product(pid-编号, pname-名称, price-单价,isOnSale-是否特价, pic-产品图片文件路径)
6)向产品表中插入3行记录
7)创建产品评论表-comment(cid, userName-用户名, phone-用户联系电话, content-评论内容, pubTime-发布时间, productId-所评论的产品编号)
8)为每个产品添加两三条评论
9)查询所有产品
10)查询出价格大于1000且小于5000的所有商品(提示：两个查询条件可以使用AND或OR进行组合)
11)查询所有评论
12)查询出1号产品的所有评论
13)删除1号商品及所有评论
14)修改2号商品编号为200,同时修改其所对应的所有评论
复习：
Web服务器
静态： HTML/CSS/JS/SWF/音视频 —— 客户端执行
动态： JSP/php/ASPX/Node.js —— 服务器端执行
PHP基础语法：
数据类型：
值类型：string boolean int float
复合类型：object array
特殊类型：null resource
运算符： . =>
逻辑结构： foreach($list as $k=>$v){ }
函数： function add($num1){ return ...; }
PHP操作MySQL：
(1)连接数据库服务器
$conn = mysqli_connect()
(2)提交SQL命令
$sql = "";
$result = mysqli_query($conn,$sql)
(3)查看执行结果
if()....
(4)关闭连接 —— 可以省略
mysqli_close($conn)
练习：
(1)编写SQL：huimaiche.sql，创建数据库huimaiche，表car( cid, cname, pic, price, isonsale, birthday )，试着添加两条记录
(2)编写PHP：car_add.php，接收客户端提交的cname, pic, price, isonsale, birthday，执行INSERT语句，把汽车信息添加到数据库中
(3)编写HTML：car_add.html，提供一个表单，让用户输入汽车信息，提交给car_add.php，实现汽车添加功能
(4)编写PHP：car_delete.php，接收客户端提交的cid，执行DELETE语句，把汽车信息从数据库中删除
(5)编写HTML：car_delete.html，提供一个表单，让用户输入待删除的汽车编号，提交给car_delete.php，实现汽车删除功能
今日目标：
(1)扩展学习PHP中常用函数 —— 掌握
(2)完整的CRUD功能点 —— 重点
(3)HTTP协议 —— 理论知识
1.扩展PHP常用函数
@ 放在一行的开头，用于压制此行的警告消息
die() 终止页面的执行，输出一个错误消息
mysqli_insert_id($conn) 返回刚刚执行的INSERT语句产生的自增编号
mysqli_affected_rows($conn) 返回刚刚执行的DML语句影响的行数
mysqli_fetch_row($result) 从结果集中抓取一行(索引数组)
mysqli_fetch_assoc($result) 从结果集中抓取一行(关联数组)
mysqli_fetch_all($result, MYSQLI_ASSOC) 从结果集中抓取所有记录行
|
mysqli_query()的返回值： (1)DML: insert delete update 失败：false 成功：true (2)DQL: select 失败：false 成功：查询结果集描述对象 |
2.SQL语句的分类
(1)DDL: Data Define Language，数据定义语言——定义列
DROP CREATE ALTER TRUNCATE
(2)DML: Data Manipulate Language，数据操作语言——操作行
INSERT DELETE UPDATE
(3)DQL: Data Query Language，数据查询语言
SELECT
(4)DCL: Data Control Language，数据控制语言——控制用户权限
GRANT REVOKE
复习：
服务器概述
协议 :// 服务器地址 : 端口
数据库服务器
常见的数据库：SQLite、MySQL、SQLServer、Oracle、DB2
使用步骤：
服务器端：安装(mysqld.exe)、启动(3306)
客户端：安装(mysql.exe)、连接服务器(mysql -uroot)
SQL语句的运行模式：
(1)交互模式
(2)脚本模式
练习：
#1. 设置SQL语句的编码格式 9:45
#2. 删除数据库dangdang
#3. 创建数据库dangdang，指定存储数据所用的编码
#4. 进入数据库
#5. 创建表 dd_category(cid, cname, count)
#6. 添加三行记录，三个书籍分类(10/20/30)
#7. 查询出所有的书籍分类
#8. 创建表 dd_book(bid,title,pic,price,pubDate,isOnsale,categoryId)
#9. 为每种分类添加两三条记录
#10. 查询出所有的书籍
#11. 查询出所有的“计算机”类书籍
#12. 删除10号分类及其下所有的书籍
#13. 删除编号为6的书籍，需要修改对应分类的书籍数量
复习：
基于单表的CRUD操作：
$cid = $_REQUEST[‘cid‘];
$conn = mysqli_connect();
$sql = "DDL/DML/DQL";
$result = mysqli_query($conn, $sql);
//DML: false / true
//DQL: false / 结果集描述对象
$row = mysqli_fetch_row($result)
$row = mysqli_fetch_assoc($result)
$list = mysqli_fetch_all($result, MYSQLI_ASSOC)
练习：
(1)编写SQL：jd.sql，数据库名jd，表名udisk(uid, pic, uname, price, addedTime ),添加四条测试记录 <5min
(2)编写PHP：udisk_add.php，接收客户端提交的pic, uname, price，添加到数据库 提示： PHP函数time()返回系统时间
(3)编写HTML：udisk_add.html，提供一个表单，实现U盘添加
(4)编写PHP：udisk_select.php,在DIV列表中显示出所有的U盘
(5)编写PHP：udisk_delete.php,接收客户端提交的uid，实现记录删除
(6)修改PHP：udisk_select.php,每个U盘右上角添加删除标记，点击后提交给udisk_delete.php，实现删除
今日目标：
(1)HTTP协议详解 —— 重点
1.补充：PHP常用函数
require(‘x.php‘) 在当前位置包含指定文件中的内容
2.HTTP协议
超文本传输协议，用于规定客户端浏览器和Web服务器传输数据的格式。HTTP/1.1 - RFC2616
HTTP协议规定两种消息的格式：
(1)请求消息(request)：客户端发给服务器的消息
(2)响应消息(response)：服务器发给客户端的消息
午间练习：翻译请求消息/响应消息中不认识的单词！！
|
面试题：常见的HTTP请求方法有哪些？各表示客户端的何种意图？ GET/POST/PUT/DELETE/HEAD/CONNECT/TRACE/OPTIONS |
|
GET请求和POST请求的比较 |
||
|
|
GET |
POST |
|
如何发起 |
浏览器中输入URL回车、超链接跳转、JS跳转、SRC/HREF属性请求、GET方式提交表单、AJAX-GET |
POST方式提交表单、AJAX-POST |
|
请求数据的位置 |
追加在URI后，作为查询字符串，以？开头 |
放在请求主体中 |
|
请求数据的类型 |
只能是文本字符 |
可以是任意类型，如包含图片、视频等 |
|
能否用于上传文件 |
否 |
能 |
|
请求数据长度限制 |
有，浏览器/服务器对请求URI长度有限制(如1KB、4KB等) |
请求主体没有长度限制！ |
|
请求数据需编码？ |
需要！一个UTF-8汉字编码为9个字节 |
需要！一个UTF-8汉字编码为9个字节 |
|
表达的语义 |
表客户端想获取 |
表客户端想传递 |
实现了国际化的网页： internationalization I18N
今日重点：
(1)请求消息中的请求方法——八种
(2)响应消息中的响应状态码——五类
(3)请求消息主体的内容类型 和 响应消息主体的内容类型 区别
3.如何精准的描述一段数据的内容类型
不要使用后缀名！！—— 太杂乱、不可靠
.html、.xhtml、.htm
.jpg、.jpeg
.mp3、.mpeg3
....
可以借鉴MIME中定义的文件类型名称：
text/html
text/css
application/javascript
...
|
MIME: (Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。 |
4.如何修改响应消息的头部
(1)修改Web服务器的配置文件
比较复杂，有些情况下无法修改，如新浪云服务器
(2)若响应文件是HTML，则可以声明<meta http-equiv="响应头部">
仅适用于HTML文件，且只是“等价物”，并非真正的响应头部
(3)使用动态语言代码来控制响应消息头部
如PHP: //设置一个响应消息头部
header(‘Cache-Control: no-cache‘);
header(‘Content-Type: image/png‘);
5.面试题：根据HTTP协议的知识进行网站访问优化 有哪些方案？
(1)域名解析
尽可能减少域名解析次数——减少跨站外部资源的引用
(2)创建连接
努力减少连接创建次数——启用持久连接避免重复连接
(3)发送请求
尽力减少请求次数——合理设置缓存、资源合并
(4)等待响应
提高服务器端运行速度——提高数据运算及查询速度
(5)接收响应
尽可能减小响应数据长度——启用压缩
课下练习：
(1)百度：如何用PHP接收客户端上传的文件。
(2)实现完整的“用户管理系统”
主要功能：
(1)新用户注册
(2)用户登录
(3)浏览所有用户
(4)用户删除
实现步骤：
(1)编写SQL：jd.sql，表jd_user( uid, uname, upwd, headPic, regTime, loginCount )
(2)编写PHP：user_add.php，接收客户端提交的uname, upwd, headPic,把新用户信息添加到数据库，新用户的注册时间就是服务器当前系统时间，登录次数默认为0
(3)编写HTML: user_add.html，提供注册表单，辅助用户提交注册信息，提交给服务器端PHP页面实现用户注册
(4)编写PHP：user_login.php，接收客户端提交的uname和upwd，验证用户名和密码是否正确，若正确，则修改登录次数实现+1，向客户端返回“登录成功”；否则向客户端返回“用户名或密码错误”
SELECT * FROM jd_user WHERE uname=‘?‘ AND upwd=‘?‘
UPDATE jd_user SET loginCount=loginCount+1 WHERE uid=?
(5)编写HTML：user_login.html, 提供登录表单，辅助用户提交登录信息，提交给服务器端PHP页面实现用户登录
(6)编写PHP：user_select.php，在TABLE中列出所有的用户信息
(7)编写PHP：user_delete.php，接收客户端提交的uid，从数据库中删除指定的用户
(8)修改PHP：user_select.php，在TABLE中添加“操作”列，为每个用户添加一个“删除”按钮，点击后实现用户删除
复习：
HTTP协议，用于在Web客户端和服务器之间传输网页内容。
请求消息(request)：
起始行： POST /index.php HTTP/1.1
头部： Content-Type: ...
CRLF
主体： k=v&k=v&...
响应消息(response)：
起始行： HTTP/1.1 200 OK
头部： Content-Type: ...
CRLF
主体： <html><body>...
练习：
(1)编写SQL: sohu.sql，表mail( mid, phone, pwd, lastLoginTime )， 试着添加三条记录 < 3min
(2)编写PHP：mail_register.php，接收客户端提交的phone、pwd，添加到数据库 —— 若手机号已经存在，则不能添加，提示已经注册过，无需重复注册 SELECT ... INSERT... < 4min
(3)编写HTML：mail_register.html，提供表单，辅助用户实现邮箱注册<2min
(4) 编写PHP：mail_login.php，接收客户端提交的phone、pwd，执行查询，若都正确，则输出“登录成功”，更新最后一次登录时间；若有错误，则输出“用户名或密码有误” SELECT... UPDATE
(5)编写HTML：mail_login.html，提供表单，辅助用户实现邮箱登录
(6) 编写PHP：mail_select.php，在TABLE中输出所有用户的邮箱
(7) 编写PHP：mail_delete.php，接收客户端提交的mid，从数据库中删除
今日目标：
(1)补充：HTTPS协议 —— 了解
(2)原生AJAX概述 —— 重点
(3)原生AJAX发起GET、POST请求 —— 重点&难点
1.安全的HTTP协议
HTTP: 80
HTTPS: 443 HTTP Secure、 HTTP over SSL
2.AJAX概述
Asynchronous Javascript And XML，异步的JS和XML
Google在2001年，为Google搜索加了“Google Suggest”功能，可以在用户浏览网页的同时，从服务器端获取更新后的搜索建议。命名为AJAX，目标：实现在无刷新、无提交的情况下页面内容局部更新,提高用户的浏览体验。常用的场景：搜索建议、数据重复性判断、在线股票、在线聊天室、异步加载分页数据....
AJAX涉及到技术：HTML、CSS、JS、DOM、HTTP、XML —— 属于纯客户端技术。
底层原理：在客户端浏览网页的同时，浏览器底层使用XMLHttpRequest对象，向服务器发起HTTP请求，并接收服务器的响应消息——浏览的同时服务器也在工作
2.使用AJAX的步骤
(1)创建XHR对象
var xhr = new XMLHttpRequest();
(2)监听XHR状态改变事件
xhr.onreadystatechange = function(){}
(3)使用XHR连接到Web服务器
xhr.open(method, uri, isAysn);
(4)使用XHR对象发起异步的HTTP请求消息
xhr.send(null/data);
3.XHR对象的常用属性和方法
提示：XHR对象的作用：发起异步HTTP请求，并接收响应消息——整个过程程序员是不可见的，调试错误只能靠监视请求和响应消息。
|
XHR对象的成员属性： readyState: 0，表示XHR的当前状态，即请求-响应过程进行到哪一步，可取值有5个，只能依次递增不能回退，自动改变不能手工赋值： 0 - UNSENT 请求消息尚未发送 1 - OPENED 已打开到服务器的连接 2 - HEADERS_RECEIVED XHR已接收到响应消息起始行和头部 3 - LOADING XHR正在响应消息的主体 4 - DONE XHR已经接收完成响应消息
status: 0, 响应消息状态码，只有xhr.readyState变为2后才有值 statusText:""，响应消息中原因短句，只有xhr.readyState变为2后才有值 responseText: ""，响应消息的主体内容，当xhr.readyState变为3开始有值，变为4值稳定下来 |
|
XHR对象的成员事件： onreadystatechange：xhr.readyState属性值的每次改变都会触发该事件 |
|
XHR对象的成员方法： open(method, uri, isAsyn): 打开到服务器的连接 send( body/null ): 发送请求消息 setRequestHeader(name, value): 设置请求消息头部 getResponseHeader(name): 获取响应消息头部 getAllResponseHeaders(): 获取响应消息中的所有头部 |
4.使用XHR发起异步的GET请求
演示：异步验证用户名是否已经存在
步骤： SQL => PHP => HTML
(1)编写SQL：sohu.sql，表名：mail(....) 15:43
(2)编写PHP：check_phone.php，接收客户端提交的phone，向客户端输出“cunzai”或“bucunzai”；使用浏览器同步请求该页面进行测试
(3)编写HTML，编写一个注册用的表单，当phone输入域失去焦点时(inputPhone.onblur)，获取用户的输入，异步提交给服务器进行验证
//1 //2 //3 //4
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
doResponse(xhr);
}else {
alert(‘响应完成但有问题‘);
}
}
}
xhr.open(‘GET‘, ‘x.php?k=v&k=v‘, true);
xhr.send( null );
5.使用XHR发起异步的POST请求
注意：由于XHR对象发送POST请求时默认的Content-Type请求头为text/plain，PHP服务器会拒接接收请求数据，必须在请求消息发送之前进行修改！
//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){ }
//3 xhr.open(‘POST‘, ‘x.php‘, true);
//3.5 在请求主体发送之前修改请求头部Content-Type
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
//4 xhr.send( ‘k=v&k=v‘ );
练习：实现用户异步登录
(1)编写SQL：sohu.sql，表mail(....)
(2)编写PHP：mail_login.php，接收客户端提交的phone、pwd，执行数据库查询，若都正确，向客户端输出succ；若无法查询到记录，向客户端输出err SELECT * FROM mail WHERE phone=‘‘ AND pwd=‘‘
(3)编写HTML：mail_login.html，登录按钮，点击后弹出一个登录“模态对话框”，输入电话和密码，点击提交可以实现异步信息登录验证，若响应消息是err，则在输入框上方提示“用户名或密码错误”；若响应消息是succ，则隐藏对话框，登录按钮处显示为“欢迎回来：XXX”
提示：语义上，此示例应该使用POST请求
练习内容：
(1)使用XHR对象发起异步的HTTP请求——成绩录入系统
<h1>成绩录入系统</h1>
学生姓名： <input id="stuName">
语文成绩： <input id="chinese">
数学成绩： <input id="math">
<input type="button" value="保存成绩">
要求：点击“保存成绩”按钮，发起异步HTTP请求，把数据提交给服务器端的PHP页面，INSERT到MySQL数据库，返回‘succ‘或‘err‘提示文字。客户端弹出一个alert("保存成功/失败")。用户点击确定后，清空输入框内容，继续录入下一个学生成绩。
实现步骤：
(1)编写SQL：创建数据库-tarena，包含表-score( sid、stuName、chinese、math )；插入三行测试数据，查询所有记录行。
(2)编写PHP：创建score_add.php，接收客户端提交的stuName / chinese / math数据，执行INSERT，把数据插入到数据库，返回succ或err
(3)编写HTML：创建score_add.html，显示三个输入框及提交按钮，一点击发起异步请求，将数据提交给服务器端PHP页面
要求：
先用GET方式提交数据！
再用POST方式提交数据！
复习：
AJAX：异步JS和XML，涉及到HTML、CSS、JS、DOM、HTTP、XML、JSON等。目标：无刷新无提交情况下实现页面内容局部更新，提高浏览体验。
使用XHR发起异步请求步骤：
(1)创建XHR
(2)监听XHR的状态改变 0 1 2 3 4
(3)连接到Web服务器
(4)发送请求消息
练习：dangdang的后台书籍录入系统——不跳转
(1)编写SQL：dangdang.sql，表book( bid, bname, price, pic )，试着插入几行记录
(2)编写PHP：book_add.php，接收客户端提交的bname, price, pic，插入到数据库中，成功则返回succ，失败则返回err。记得同步请求测试一下
(3)编写HTML：book_add.html，没有表单，只有几个输入框，一个button按钮，单击后收集用户的输入，发起异步请求，提交给服务器
今日目标：
(1)复习XHR发起两种请求
(2)学习XHR接收五种响应 —— 重点
1.使用XHR发起两种请求之一——GET
//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){}
//3 xhr.open(‘GET‘, ‘x.php?k=v&k=v‘, true)
//4 xhr.send(null);
2.使用XHR发起两种请求之二——POST
//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){}
//3 xhr.open(‘POST‘, ‘x.php‘, true)
//3.5 xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘)
//4 xhr.send(‘k=v&k=v‘)
3.使用XHR接收五种响应——text/plain
服务器端：
header(‘Content-Type: text/plain‘);
echo ‘succ‘;
客户端：
if( xhr.responseText===‘succ‘){ ... }
案例演示：异步添加新的书籍信息
4.使用XHR接收五种响应——text/html
注意：AJAX应用中服务器返回的不是完整的HTML文档，而只是HTMP标签组成的片段
服务器端：
header(‘ Content-Type: text/html;charset=UTF-8 ‘);
echo ‘<li>xx</li><li>yy</li>‘;
客户端：
ul.innerHTML = xhr.responseText;
案例演示：搜索建议
实现顺序：
(1)编写SQL：dangdang.sql，表book(....)
(2)编写PHP：book_search.php，接收客户端提交的书名关键字kw，执行查询，返回所有包含该关键字的书名，以LI片段格式
(3)编写HTML：book_search.html，包含一个输入框，只要用户输入了文本，下方立即显示出一个包含该文本的搜索建议
input.onkeyup = function(){ var kw = this.value; }
|
扩展SQL语句——如何进行模糊查询 SELECT * FROM book WHERE bname=‘指南‘; //精准匹配 SELECT * FROM book WHERE bname LIKE ‘指南‘; //精准匹配 |
|
SELECT * FROM book WHERE bname LIKE ‘%指南%‘; //%匹配任意多个任意字符——模糊匹配 |
5.使用XHR接收五种响应——application/javascript
注意：JavaScript代码在PHP解释器看来就是普通的字符串而已；
服务器端：
header(‘ Content-Type: application/javascript‘);
echo ‘alert(123);document.body.appendChild(...)‘;
客户端：
eval( xhr.responseText ) //客户端必须使用eval来执行JS字符串
案例演示：实现了国际化（i18n）的欢迎消息
(1)编写PHP：i18n.php，解析客户端请求消息头部，获取当前客户端的首选语言，根据语言的不同，返回不同形式的欢迎消息，如alert(‘你好‘); 或 console.log(‘こんにちは‘); 或 var s = document.createElement(‘span‘); s.innerHTML = ‘Hello‘; document.body.append(s);
(2)编写HTML，i18n.html，一个按钮“获取欢迎消息”，点击后发起异步的GET请求，获得响应消息后，执行出来。
|
服务器如何返回批量的复合数据给客户端？ 复合数据：一个数据有多个属性 批量复合数据：有多个复合数据 —— 二维数组 |
|
方式1：用text/plain格式 101#三星#35.5#[email protected]#闪迪#34.5#[email protected]金士顿#... 好处：简单 不足：不易读取、很容易出错 |
|
方式2：用text/html格式 <tr><td>101</td><td>三星</td><td>35.5</td></tr> <tr><td>102</td><td>闪迪</td><td>35.5</td></tr> <tr><td>103</td><td>金士顿</td><td>35.5</td></tr> 好处：情形，方便使用 tbody.innerHTML = xhr.responseText 不足：把数据和格式混在一起，限制了数据的应用场合 |
|
方式3：用application/xml格式 <productList> <product pid="101"> <pname>三星</pname> <price>35.5</price> <pic>1.jpg</pic> </product> <product pid="102"> <pname>闪迪</pname> <price>34.5</price> <pic>2.jpg</pic> </product> </ productList> 好处：是纯数据，不附带任何的显示格式限制 不足：太复杂了，阅读和解析都太麻烦 |
|
方式3：用application/json格式 [ { "pid":"101", "pname":"三星", "price":35.5, "pic":"1.jpg" }, { "pid":"102", "pname":"闪迪", "price":34.5, "pic":"2.jpg" } ] 有点：简单、易于阅读，处理速度快！ |
6.XML语法学习
eXtensible Markup Language，可扩展的标签语言，本身是一种字符串格式，用于描述批量复合数据，语法：
(1)所有的数据放在标签中：
<名>数据</名>
<名 />
(2)整个XML字符串有且只能有一个根标签
(3)所有的标签名都可以自定义，但严格区分大小写，且开始和结束标记必须完全一样
(4)每个标签都可以自定义属性，属性必须有值，值必须用单引号/双引号括起来
(5)每个标签都可以定义任意的子标签，标签可以嵌套，但不能交叉
注意：HTML和XML的区别——面试题
HTML语法随意；XML语法严格；
HTML标签预定义好了；XML标签都是自定义的；
HTML用于描述网页的结构；XML标签用于描述数据；
7.使用XHR接收五种响应——application/xml
服务器端：
header(‘Content-Type: application/xml‘);
echo ‘<?xml ?><productList>....</productList>‘;
客户端：
//xhr.responseText //把字符串解析为DOM对象很麻烦
xhr.responseXML //DOM树的根对象
案例演示：异步加载更多数据
(1)编写SQL：dangdang.sql，表book(...)
(2)编写PHP：book_select.php，向客户端返回所有的数据，以XML字符串格式
(3)编写HTML：book_select.html，点击“加载更多”按钮时，再次请求更多的书籍信息
|
W3C DOM标准分为三部分： 核心DOM： 可以操作任意的DOM树，如getElementById()、querySelector()、getAttribute().... HTML DOM： XML DOM： |
8.JSON字符串格式的语法
JSON(JavaScript Object Notation) 是一种轻量级的字符串数据格式。 易于人阅读和编写；同时也易于机器解析和生成；在Web编程领域可以取代XML字符串格式！
(1)数据分为两种： [ ] { }
(2)整个字符串要么是一个数组、要么是一个对象
(3)数组中可以包含各种： 数字、boolean、字符串、null、[]、 {}
(4)对象中可以包含多个键值对，键必须用双引号，值若是字符串也必须用双引号
9.使用XHR接收五种响应——application/json
服务器端：
header(‘Content-Type: application/json;charset=UTF-8‘);
$arr = ....;
$str = json_encode($arr); //把PHP数组转换为JSON字符串
echo $str;
客户端：
JSON.parse( xhr.responseText ); //把JSON字符串解析为JS对象
=============================
10.ES6中新的字符串
var str = `
phone=${p}&pwd=${w}
`;
反引号字符串可以换行；可以包含${}的变量或表单式。
课下练习：
功能要求：
(1)编写SQL，数据库名: tarena，员工信息表emp(eid,ename,pic, salary,deptID)，保存多个员工的信息；
(2)编写PHP，emp_select.php，根据客户端提交的部门编号(deptID)，返回该部门下的员工信息；
(3)编写HTML，emp_select.html，下拉框中选择不同的部门，则下方的员工列表显示出该部门的员工信息；
select.onchange = function(){ this.value }
(4)点击“删除”，发起异步请求删除该员工信息，服务器返回删除成功信息后，前端页面将表格中的当前行删除。
复习：
AJAX：向服务器发起异步HTTP请求，接收处理返回的响应消息，目标是实现页面在无刷新无提交情况下页面内容的局部更新。
使用AJAX发起两种请求消息：
GET：//1 //2 //3 //4
POST : //1 //2 //3 //3.5 //4
使用AJAX接收五种响应消息：
(1)text/plain
服务器端：
header(‘Content-Type: text/plain‘);
echo ‘succ‘;
客户端：
if(xhr.responseText===‘succ‘){ ... }
(2)text/html
服务器端：
header(‘Content-Type: text/html‘);
echo "<tr><td>$data</td></tr>";
客户端：
tbody.innerHTML = xhr.responseText
(3)application/javascript
服务器端：
header(‘Content-Type: application/javascript‘);
echo "alert($data); f1(); f2($data)";
客户端：
eval( xhr.responseText )
(4)application/xml
服务器端：
header(‘Content-Type: application/xml‘);
echo "<bookList><book>$b</book></bookList>";
客户端：
var document = xhr.responseXML
(5)application/json
服务器端：
header(‘Content-Type: application/json‘);
//echo "[ {"bname":"","price":35.5},{} ]";
$list = ...;
echo json_encode($list);
客户端：
var obj = JSON.parse( xhr.responseText )
练习： 实现学生查询系统
(1)编写SQL：qinghua.sql，表qh_class( cid, cname, count )，插入三个班级(10/20/30)；qh_student(sid, sname, score, classId)，插入八九行记录
(2)编写PHP：class_select.php，向客户端输出所有的班级信息，以JSON格式: [{},{},{}]
(3)编写HTML：qinghua.html，页面加载完成(window.onload)后，异步请求，获取所有的班级信息，填充在一个select中
<select>
<option value="10">软件0801班</option>
</select>
(4)编写PHP：student_select.php，接收客户端提交的cid，返回指定班级中的学生数据，以JSON格式： [{},{},{}]
(5)修改HTML：qinghua.html，为select做事件绑定，监听选项改变，异步请求选定班级中的学生，显示在table中
<table>
<thead></thead>
<tbody></tbody>
</table>
复习：
见思维导图
练习：学生按分数级别显示
(1)编写SQL：tarena.sql，表student(sid, sname, pic, scoreGrade(A-B-C-D))，插入12条记录
(2)编写PHP：student_select.php，根据客户端请求分数级别，返回该级别下有哪些学生，以JSON格式
(3)编写HTML：student.select.html，页头提供ABCD四个级别，鼠标悬停在某个级别上，立即异步请求该级别有哪些学生
今日目标：
(1)PPT上的小知识点拾遗
(2)AJAX阶段项目 —— 重点
1. JS中如何处理JSON字符串
把JSON格式的字符串解析为JS对象：
var str = ‘{"ename":"Tom", "age":20}‘;
var obj = JSON.parse(str); //方法1
var obj = eval( ‘(‘+str+‘)‘ ); //方法2，不推荐使用
把JS对象编码为JSON字符串：
var obj = {ename:‘Tom‘, age: 20};
var str = JSON.stringify(obj);
-ify: 使变为...， sheepify stoneify frogify
=================================
PHP中把数组编码为JSON字符串：
$list = [{},{},{}];
$str = json_encode( $list );
PHP中JSON字符串解析为PHP数组/对象：
$str = ‘{"ename":"Tom", "age":20}‘;
$obj = json_decode( $str );
2.面试题：跨域请求和JSONP
Cross Domain Request：从一个资源请求另一个资源，二者所在的请求地址不同，域名不同、端口号不同、请求协议不同。
http://www.tmooc.cn/list.html
http://www.tedu.cn/student_select.php
提示：localhost和127.0.0.1也算跨域！
浏览器允许跨域请求的情形：
IMG、LINK、SCRIPT、IFRAME ...
浏览器禁止跨域请求的情形：
XHR —— 浏览器处于安全考虑，禁用了XHR的跨域请求（其实服务器给出了响应消息，但浏览器不让使用）
|
面试题：我们公司项目很大，页面很多，出于性能考虑，把静态资源(html等)放在http://static.tmooc.cn服务器上了，把动态资源(php)放在http://dynamic.tmooc.cn服务器上了，如何让一个x.html异步请求x.php呢？ |
如何解决浏览器的XHR跨域请求限制 —— 八种方案：
(1)
(2)
(3)
(4)
(5)
(6)
(7) 修改响应消息头部，添加Access-Control-Allow-Origin头部
(8) 使用JSONP
1.AJAX阶段项目——京东购物车
功能点描述
(1)异步的用户登录
(2)异步的显示商品列表，实现分页显示
(3)异步的添加到“我的购物车”
(4)查看“我的购物车”
(5)异步的修改“我的购物车”
实现步骤： SQL => PHP => HTML/JS
(1)编写SQL：jd.sql，数据库名jd，
创建表：jd_user(uid, uname, upwd)
创建表：jd_product(pid, pname, price, pic)
创建表：jd_cart( cid, userId )
创建表：jd_cart_detail(did, cartId, productId, count)
(2)编写PHP：data/header.php，包含页头必需的HTML片段
(3)编写PHP：data/footer.php，包含页尾必需的HTML片段
(4)编写HTML：productlist.html,待页面加载完成，异步加载页头和页尾。
(5)编写PHP：user_login.php，接收客户端提交的uname和upwd，执行数据库验证，返回 {"code":1, "uname":"qiangdong", "uid":10} 或 {"code":2, "msg":"用户名或密码错误" }
(6)修改HTML：productlist.html，默认显示出登录对话框，异步登录验证，失败则提示错误消息，成功则清除掉对话框，显示“欢迎回来：xxxx”
(7)编写PHP：product_select.php，向客户端输出所有的产品信息，以JSON格式：[{},{},{},....]
(8)修改HTML: productlist.html，页面加载完后，异步请求所有的产品
-------------------文华的进度线---------------------
(9)编写PHP：cart_product_add.php，接收客户端提交uid、pid，添加入购物车详情表，若已有该商品，则购买数量+1 —— 需要执行多条SQL语句，有挑战性！
2.表单序列化
$(‘#formId‘).serialize( );
jQuery中提供的表单序列化函数，可以把选定的表单中所有带name属性的输入域连同值转换为k=v形式，全部使用&符号拼接在一起，组成一个大的字符串，用于异步请求数据提交。
复习：
Web服务器
静态： HTML/CSS/JS/SWF/音视频 —— 客户端执行
动态： JSP/PHP/ASPX/Node.js —— 服务器端执行
PHP基础语法：
数据类型：
值类型：string boolean int float
复合类型：object array
特殊类型：null resource
运算符： . =>
逻辑结构： foreach($list as $k=>$v){ }
函数： function add($num1){ return ...; }
PHP操作MySQL：
(1)连接数据库服务器
$conn = mysqli_connect()
(2)提交SQL命令
$sql = "";
$result = mysqli_query($conn,$sql)
(3)查看执行结果
if()....
(4)关闭连接 —— 可以省略
mysqli_close($conn)
练习：
(1)编写SQL：huimaiche.sql，创建数据库huimaiche，表car( cid, cname, pic, price, isonsale, birthday )，试着添加两条记录
(2)编写PHP：car_add.php，接收客户端提交的cname, pic, price, isonsale, birthday，执行INSERT语句，把汽车信息添加到数据库中
(3)编写HTML：car_add.html，提供一个表单，让用户输入汽车信息，提交给car_add.php，实现汽车添加功能
(4)编写PHP：car_delete.php，接收客户端提交的cid，执行DELETE语句，把汽车信息从数据库中删除
(5)编写HTML：car_delete.html，提供一个表单，让用户输入待删除的汽车编号，提交给car_delete.php，实现汽车删除功能
今日目标：
(1)扩展学习PHP中常用函数 —— 掌握
(2)完整的CRUD功能点 —— 重点
(3)HTTP协议 —— 理论知识
1.扩展PHP常用函数
@ 放在一行的开头，用于压制此行的警告消息
die() 终止页面的执行，输出一个错误消息
mysqli_insert_id($conn) 返回刚刚执行的INSERT语句产生的自增编号
mysqli_affected_rows($conn) 返回刚刚执行的DML语句影响的行数
mysqli_fetch_row($result) 从结果集中抓取一行(索引数组)
mysqli_fetch_assoc($result) 从结果集中抓取一行(关联数组)
mysqli_fetch_all($result, MYSQLI_ASSOC) 从结果集中抓取所有记录行
|
mysqli_query()的返回值： (1)DML: insert delete update 失败：false 成功：true (2)DQL: select 失败：false 成功：查询结果集描述对象 |
2.SQL语句的分类
(1)DDL: Data Define Language，数据定义语言——定义列
DROP CREATE ALTER TRUNCATE
(2)DML: Data Manipulate Language，数据操作语言——操作行
INSERT DELETE UPDATE
(3)DQL: Data Query Language，数据查询语言
SELECT
(4)DCL: Data Control Language，数据控制语言——控制用户权限
GRANT REVOKE
复习：
AJAX：向服务器发起异步HTTP请求，接收处理返回的响应消息，目标是实现页面在无刷新无提交情况下页面内容的局部更新。
使用AJAX发起两种请求消息：
GET：//1 //2 //3 //4
POST : //1 //2 //3 //3.5 //4
使用AJAX接收五种响应消息：
(1)text/plain
服务器端：
header(‘Content-Type: text/plain‘);
echo ‘succ‘;
客户端：
if(xhr.responseText===‘succ‘){ ... }
(2)text/html
服务器端：
header(‘Content-Type: text/html‘);
echo "<tr><td>$data</td></tr>";
客户端：
tbody.innerHTML = xhr.responseText
(3)application/javascript
服务器端：
header(‘Content-Type: application/javascript‘);
echo "alert($data); f1(); f2($data)";
客户端：
eval( xhr.responseText )
(4)application/xml
服务器端：
header(‘Content-Type: application/xml‘);
echo "<bookList><book>$b</book></bookList>";
客户端：
var document = xhr.responseXML
(5)application/json
服务器端：
header(‘Content-Type: application/json‘);
//echo "[ {"bname":"","price":35.5},{} ]";
$list = ...;
echo json_encode($list);
客户端：
var obj = JSON.parse( xhr.responseText )
练习： 实现学生查询系统
(1)编写SQL：qinghua.sql，表qh_class( cid, cname, count )，插入三个班级(10/20/30)；qh_student(sid, sname, score, classId)，插入八九行记录
(2)编写PHP：class_select.php，向客户端输出所有的班级信息，以JSON格式: [{},{},{}]
(3)编写HTML：qinghua.html，页面加载完成(window.onload)后，异步请求，获取所有的班级信息，填充在一个select中
<select>
<option value="10">软件0801班</option>
</select>
(4)编写PHP：student_select.php，接收客户端提交的cid，返回指定班级中的学生数据，以JSON格式： [{},{},{}]
(5)修改HTML：qinghua.html，为select做事件绑定，监听选项改变，异步请求选定班级中的学生，显示在table中
<table>
<thead></thead>
<tbody></tbody>
</table>