第一关: 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#1.jpg@102#闪迪#34.5#2.jpg@金士顿#... 好处:简单 不足:不易读取、很容易出错 |
方式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>