ajax

第一关： HTML(3)、CSS(5) —— 静态页面

第二关： JS(7)、DOM(6.5)、jQuery(6) —— 用户交互

第三关： AJAX(9)、HTML5(6)、Bootstrap(5) —— 准全栈

第四关： 框架

特点：内容散、主题散、难度大、前四天都是迷茫的

今日目标：

(1)服务器概述 —— 了解

(2)数据库服务器 —— 难点&重点

1.如何访问服务器

协议(语言)：// 地址 / 端口号(门牌号)

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

SQL语句编写时需要注意：

(1)命令不区分大小写，习惯上关键字都大写，非关键字都小写

(2)所有语句都必须以分号结尾

(3)注释有两种：单行注释(#开头)，以及多行注释(/**/)

(4)插入记录行时，字符串/日期数据必须使用单引号；数字类型可用单引号也可不用；关键字(如NULL/TRUE/FALSE)数据不能使用单引号。

课下练习：

创建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) 从结果集中抓取所有记录行

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)：服务器发给客户端的消息

午间练习：翻译请求消息/响应消息中不认识的单词！！

实现了国际化的网页： internationalization I18N

今日重点：

(1)请求消息中的请求方法——八种

(2)响应消息中的响应状态码——五类

(3)请求消息主体的内容类型 和 响应消息主体的内容类型 区别

3.如何精准的描述一段数据的内容类型

不要使用后缀名！！—— 太杂乱、不可靠

.html、.xhtml、.htm

.jpg、.jpeg

.mp3、.mpeg3

....

可以借鉴MIME中定义的文件类型名称：

text/html

text/css

application/javascript

...

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请求，并接收响应消息——整个过程程序员是不可见的，调试错误只能靠监视请求和响应消息。

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 >

语文成绩： <input >

数学成绩： <input >

<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; }

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请求，获得响应消息后，执行出来。

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，点击“加载更多”按钮时，再次请求更多的书籍信息