XAMPP套装软件:
包含Apache、MySQL、PHP等多个开源软件的集合。
https://www.apachefriends.org/zh_cn/index.html
监听完整相应消息:
Wireshark启动——设置监听网卡——浏览器中输入要访问的资源地址,捕获相应消息,查看完整内容
JS和PHP语言的最本质上的区别?
JS属于“静态网页技术”,在客户端浏览器中执行——客户端技术;
PHP属于“动态网页技术”,在服务器端运行——服务器端技术。
Server:服务器,提供域名解析,文件下载,网页浏览,邮件收发等服务
Client-Server模型:C/S
Brower-Server模型:B/S
硬件服务器:大小区分:工作站,小型机,中型机,大型机,超级计算机
数据库种类:关系型(主流),对象型(前沿),NoSQL——MongoDB——大数据,网状,树型
软件服务器:必须安装能够监听特定端口并接受客户端请求的应用程序——服务器应用程序:
DNS服务器:把域名解析为计算机的IP地址
Web服务器:提供Web页面服务——PHP语言
数据库服务器:提供数据的永久存储和高效查询——SQL语言
FTP服务器:文件上传和下载服务
SMTP/POP3服务器:邮件收发服务
SSH服务器:远程登录服务
Samba服务器:文件和打印机共享服务
访问服务器:客户端访问必须提供:
访问协议:HTTP
主机地址:服务器的域名/IP地址
端口号Port:不同服务使用不同端口
有时还提供用户名/密码,资源路径,请求参数等
项目中存储数据的方式:
内存:速度快,容量有限,非永久存储
自定义结构文件:使用简单直接,但不便于大量数据查找
Excel/Access等格式化文件:使用广泛,灵活性不足
专用文件服务器:网络存储/云存储,可靠性高,操作复杂
数据库服务器:存储效率高,尤其适合海量数据;操作复杂
关系型数据库结构:
RDBMS:关系数据库管理系统,大多采用C/S或B/S的形式;服务器端程序负责管理、维护数据,客户端程序用以远程连接到服务器并发送操作指令
服务器端通:处于机房,常以系统服务的形式启动或停止,负责保存、维护数据
客户端:远程连接,以命令行应用程序,桌面应用程序,浏览器应用形式出现,向服务器发生操作指令(查询添加修改删除)
RDBMS的数据在逻辑结构上通常呈现下述层级关系:Server => Database => Table => Row => Column
常见的关系型数据库软件:
SQLite:微型数据库,常用于移动设备
MySQL/MariaDB:开源中小型数据库,可用于各种操作系统
PostgreSQL:开源中小型数据库
SQL Server:Microsoft开发的中型数据库,只用于Windows系统
Oracle OracleDB:Oracle公司开发的中大型数据库,可用于各种操作系统
DB2:IBM公司开发的中大型数据库,与IBM服务器搭配较好
MySQL:(1)Oracle MySQL (2)MariaDB
LAMP:Linux+Apache+MySQL+PHP,适合于中小型站点,需要快速部署的Web应用
使用cd命令进入MYSQL_HOME/bin目录->执行当前目录下的mysql.exe
mysql.exe [-h服务器地址] [-P服务器监听端口] [-u登录用户名] [-p登录密码] [-D数据库名]
mysql.exe=?可查看所有可用的参数
MySQL数据库服务器的使用
(1)下载并安装MySQL服务器端软件
启动入口:c:/xampp/mysql/bin/mysqld.exe Daemon精灵/守候
数据库目录:c:/xampp/mysql/data 其中的数据不能丢失,不能用记事本打开
(2)启动MySQL服务器端软件
运行c:/xampp/mysql/bin/mysqld.exe
查看端口:cmd->netstat -nab / XAMPP Control Panel.exe->netstat
服务器端是否运行起来,只能通过PORT是否打开来验证,只要确定3306端口被mysqld.exe占用即可!
(3)下载并安装MySQL客户端软件
命令行版客户端默认安装路径:c:/xampp/mysql/bin/mysql.exe
(4)启动MySQL客户端软件,远程连接机房中的数据库服务器
在命令行中输:c:/xampp/mysql/bin/mysql.exe -h127.0.0.1 -uroot -p -P3306
-h:host指定服务器电脑的IP地址/主机名;cmd:ipconfig nslookup默认服务器即ip地址
-u:user指定登录服务器所用的用户名
-p:pwd指定登录服务器所用的密码
-P:port指定链接服务器所对应的端口号
可简写为:mysql -uroot
此简写必须修改环境变量path:系统变量里path存在C:\xampp\mysql\bin;
命令提示符变为: mysql>或mariadb> 说明客户端已经成功连接到MySQL服务器
quit; 退出程序
cmd语法:多行输入遇到;执行
(5)在客户端中输入SQL命令,提交给服务器来执行——增删改查数据
SQL语句两种执行方式:
交互式执行:一行,回车,执行一行,查看执行结果,再输入下一行
脚本式执行:把要执行的所有SQL语句编写在一个.sql文件中,一次性全部提交执行
mysql> source e:/jd.sql 此句不能加分号!!!
mysql -uroot < C:.......xx.sql <表导入
SQL:Structured Query Language,结构化查询语言,用于操作RDBMS中数据的标准化语言
标准SQL语句逐条执行,没有循环,选择等结构控制语句
不区分大小写,推荐关键字大写
SQL语句分类:
DDL:Data Define Language,定义数据结构
DML:Data Manipulate Language,操作数据,即增删改
DQL:Data Query Language,查询数据
DCL:Data Control Language,控制用户的权限
数据类型:
DATE,VARCHAR(32)类型必须使用单引号;
INT,FLOAT等数字可用也可不用;
BOOLEAN本质是0(FALSE)和1(TRUE)
NULL
BIGINT
#单行注释 /**注释**/ 最后一组数据末尾不能有,
SHOW DATABASES; 查看当前服务器上所有数据库
USE 数据库名; 进入指定数据库
SHOW TABLES; 查看当前数据库中所有表
SET NAMES UTF8; 指定后续的SQL语句所用的编码方式
CREATE DATABASE 数据库名 [CHARSET=UTF8]; 创建数据库[并指定编码]
CREATE TABLE 表名(列名 数据类型, ... );
NOT NULL
PRIMARY KEY 关键字
AUTO_INCREMENT 每次插入自动递增该列名的值,默认开始值为1;
则插入的一组数据值可写为insert into 表 values (null,...)
DROP DATABASE [IF EXISTS] 数据库名; 删除数据库[如果存在]
DROP TABLE 表名; 删除表
DELETE FROM 表名 [WHERE 列名=value]; 删除所有[满足条件]的记录
ALTER: 修改数据库对象/表的定义
TRUNCATE: 截断表中所有记录
INSERT INTO 表名 [(列名,... ) ] VALUES (value, ..... ); 插入一/多行记录
UPDATE 表名 SET 列名=value [WHERE 列名=value]: 修改[满足WHERE]表中的记录
SELECT */列名,... FROM 表名; 查询当前指定表中有哪些记录,输出全部列/单个列
SELECT * FROM 表名 WHERE 列名 LIKE '%关键字%'; ##%指代任意多个任意字符,查询包含关键字的
SELECT */列名,... FROM 表名 [WHERE 列名=v AND 列名=v]; 查询[列名=v]的数据,输出全部列/单个列
WHERE 列名=(SELECT name FROM 表名 WHERE name2=value);复合语句
SELECT * FROM 表名ORDER BY 列名 [DESC]; 按列名升序/降序
SELECT COUNT(*/列名) FROM 表名; 计算出表的记录总数
分页查询:
SELECT * FROM 表名LIMIT 起始行, 行数 ; 从第几位开始查找n个
字符串跨表查询:
SELECT 表1.列1,表1.列2, 表2.列3,,表2.列4 FROM 表1,m表2 WHERE 表1.列=表2.列;
SELECT 列1,列2 FROM 表1,表2 [WHERE 表1.列x=表2.列x]; //查询出dept,emp两表并输出列1,列2
跨表查询必须有两个表的连接条件,否则就会得到笛卡尔积
SELECT ename,dname FROM dept,emp; //m*n 笛卡尔积,dept,emp表名
SELECT ename,dname FROM dept,emp WHERE dept.did=emp.deptID;
GRANT:授予权限
GRANT ALL PRIVILEGES ON *.* TO '用户名'@'172.17.8.181'[IDENTIFIED BY '密码' WITH GRANT OPTION];
mysql登录:mysql -uroot(默认)/用户名
REVOKE:收回权限
SELECT * FROM Persons WHERE LastName IN ('Adams','Carter')从上表中选取姓氏为 Adams 和 Carter 的人:
Web服务器/Apache:用于监听客户端的HTTP/HTTPS请求
静态Web服务器:Apache Httpd、Microsoft IIS、NginX等,内容一成不变
静态Web技术:HTML、CSS、JavaScript、Flash等
动态Web服务器:静态服务器+动态运行环境、Tomcat、Webspere、Weblogic
动态Web技术:
JSP=HTML+Java、
ASP.NET=HTML+php、
PHP=HTML+C#
NodeJS= HTML+ NodeJS
动态页面中的动态代码在服务器端运行,执行后的结果(字符数据/字节数据)混入静态内容中返回给客户端
运行services.msc——关闭某些占用同端口的服务;web部署代理服务可能占用80端口
端口80,443被httpd.exe占用则web服务器启动成功
httpd.conf Listen 80端口号修改
PHP服务器:
(1)下载并安装PHP语句的解释器
c:/xampp/php/php.exe
(2)下载并安装一款静态Web服务器,如Apache Httpd
c:/xampp/apache
(3)PHP解释器整合入Apache,修改Apache主配置文件
过程有点儿复杂........
提示:咱们安装的XAMPP已经把二者整合完毕
(4)启动Apache+PHP这款Web服务器
(5)编写网页,保存在一个特定的目录下,供客户端浏览器访问,此目录下不允许有中文/空格文件名/目录名
所有的Web内容,都必须放在:c:/xampp/htdocs
(6)客户端浏览器远程访问Web服务器,输入服务器的URL地址:cmd:ipconfig查看IPv4 172.17.8.181
http://127.0.0.1:80 http://127.0.0.1/文件.html
或localhost/文件.html
PHP:Personal Home Page
注释:// /**/
<?php php语句; ?>
@语句; @表压制错误消息的显示
标量/值类型:
boolean:true使用echo输出1;false无输出
integer整型
float/double
string:
单引号 ':字符串中的变量和特殊字符的转义序列将不会被替换。
双引号 ":可以直接拼接变量,PHP 将对一些特殊的字符进行解析
echo $v['xxx']/"$v[xxx]";
复合类型:
array数组:$ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34); $arr[ ] = 值;
默认存在0/1/2=>array(...),var_dump可输出,不是对象,没有.length、.toString(),不能echo
索引数组:下标数字,for遍历
关联数组:下标字符串,foreach遍历,$emp = ['age'=>20];
object对象
特殊类型:
resource资源:sql返回的结果集
NULL无类型
常量:习惯使用纯大写
define('常量名',常量值);
const 常量名=常量值;
变量:可出现数字字母下划线且区分大小写
$变量名=值; 声明
$变量名 引用变量
预定义变量:
$_GET:保存着客户端GET请求提交的所有数据
$_POST:保存着客户端POST提交的所有数据
$_COOKIE:保存着客户端提交的所有Cookie数据
$_REQUEST:包含了$_GET、$_POST、$_COOKIE中的数据,$_REQUEST['uname']//<input name="uname">
$_FILES:保存着通过上传的文件数据
运算符:
字符串拼接运算符 .
赋值运算符 .=
结构:
while //break,continue支持
do..while
for
foreach( $数组名 as $v){ echo $v['xxx']/"$v[xxx]"; } $v结果集,echo不能直接输出,
foreach( $数组名 as $k=>$v){ echo $k; } $v结果集;$k下标,echo输出0123...
if...else...
switch...case...
函数:
count($数组) 返回指定数组的元素个数
time() 服务器系统时间
echo()
var_dump() 输出变量的类型和当前值,可输出数组
print_r() 输出值,可输出数组
printf(''%d\n'',mysql_affected_rows ());)
add(10,20)
rand(100,1000) 生成100~1000的随机数
sleep(5); php解释器暂时执行五秒
intval($str); 把字符串/小数解析为整数
ceil(36/8); =5,向上取整
empty($count) 判断一个变量是否为空
子串=substr( $str, 开始下标, [子串长度] ) substr($lang, 0, 2)
function 函数名($arg0,....){ ....;return...; }自定义函数
连接数据库前提:
php/ext/...dll PHP提供了多套扩展函数库
extension=php_bz2.dll 在php.ini中声明启用该数据库
通过php操作数据库:
header('Content-Type: text/plain');
$conn = mysqli_connect('127.0.0.1', 'root', '', 'tedu', 3306); //客户端连接MySQL服务器
$conn=mysqli_connect($host,$uname,$upwd,$dbname,$port); 连接mysql
host,$uname:'localhost','root/ '172.17.8.181','授权时自定义的用户名'
改表host:ip地址不允许连接mysql:账号不允许远程登录;在localhost的电脑登入mysql后,
更改mysql数 据库里的user表里的host项,从"localhost"该成"%"
授权:GRANT
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);
$sql=”INSERT/DELETE/UPDATE/SELECT....”; //$sql语句””内无需添加分号
mysqli_query($conn,$sql); //执行sql语句,执行失败返回false
若是DML(INSERT/DELETE/UPDATE),返回true
若是DQL(SELECT/SHOW),返回查询结果集的描述对象
if(!$result){ //插入数据库,或$result===false
echo "执行失败!最可能的原因:$sql";
}else {
echo "执行成功!新插入的记录在服务器中的自增编号为:". mysqli_insert_id($conn);
while(($row = mysqli_fetch_assoc($result))!==null){
echo $row['name']/"$row[name]"; //处理结果集
或$arr[]=$row; //while外echo '[ ]' /'{ }'/json_encode($arr);
}
}
mysqli_close($conn); 关闭数据库连接,可省略
表单:
<form action="xxx.php" method=”post”> 该xxx.html和xxx.php应在一个htdocs的某个文件夹中
当用户点击提交按钮时,发送的url会变成http://ip地址/xxx.php?name=xxx&age=xxx
<input name=”xxx”>
$name=$_REQUEST['xxx'];
FORM元素的enctype属性和HTTP请求头
<form action="" method="POST" enctype="">
Encode Type:指定表单数据的编码类型,实际影响的就是POST请求的头部: Content-Type
可取值:
(1)text/plain:表单数据是普通的文本,未经编码——PHP服务器拒绝接收此种类型的请求主体数据!
(2)application/x-www-form-urlencoded:表单数据是经过编码后的文本
(3)multipart/form-data:表单数据中包含上传的文件
链接:
<a href='xxx.php'>
处理结果集:mysqli_query()返回的是一个表示查询结果集的resource对象
mysqli_affected_rows($conn); 获取刚刚执行的DML(INSERT/UPDATE/DELETE)语句影响的行数/0
mysqli_fetch_array($result); 从结果集中读取一行
$row = mysqli_fetch_row($result); //索引数组,结果集全部
$row = mysqli_fetch_assoc($result); //从结果集中取得一行作为关联数组
echo "$row[name]"; var_dump($row["name"]); 输出每行某列名的数据
mysqli_insert_id($conn) 在数据库的自增编号
mysql_connect():早期函数
mysqli_connect():improved,改进的提升的,后来提供的改进版本
mysql客户端类型:
命令行:cmd
php引擎:mysqli_connect
网页版的客户端——phpMyAdmin:http://127.0.0.1/phpMyAdmin :xampp-mysql-admin
上午视频1.47.35
修改服务器的配置文件,设置默认相应头部
URI:Unified Resource Identifier,统一的资源识别符,URI=URL+URN
URN:Unified Resource Naming,统一的资源命名符
URL:Unified Resource Locator,统一的资源定位符
格式:<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>
scheme:方案,指定以哪种协议从服务器获取指定资源;不区分大小写,
常见:HTP,HTTPS,FTP,MAILTO,RTSP,FILE,NEWS,TELNET
host:主机名,资源所在服务器的IP地址/域名(需要DNS转换为IP地址)
port:端口号,每项服务在服务器上都对应一个监听端口号
常见默认端口号:
FTP 21 文件上传、下载
SSH 22 安全的远程登录
TELNET 23 远程登录
SMTP 25 邮件传输
DNS 53 域名解析,域名(网址)映射为对应ip地址
HTTP 80 超文本传输
POP3 110 邮件接收
HTTPS 443 加密传输的HTTPS
user:用户名,某些方案访问资源时需要制定用户名,默认值为anonymouse
pwd:密码,默认值为<e-mail>地址
path:路径,/分隔,服务器上资源的本地名称
params:参数,多个;分隔,某些方案会使用参数来制定输入参数,每个参数采用“名/值对”形式xxx=xxx
query:查询字符串,某些方案会使用查询字符串传递参数以激活应用程序,?与其他部分分隔
frag:片段/anchor锚点/tag书签,#分隔,指一个资源中某一部分的名字,引用对象时,不会将frag字段传送给服务器,该字段是在客户端内部使用的
绝对URL:可省略协议名和冒号,HTML5新特性
相对URL:不以方案开头,必须参考另外一个URL(base,基础url)才能确定其完整内容信息
DMS:Domain Name System,计算机域名系统,由解析器和域名服务器组成
HTTP协议:由IETF委员会制定的浏览器和Web服务器之间的通信格式。
RFC:Request For Comment,意见征求稿
RFC-1945:HTTP/1.0,1996年
RFC-2615:HTTP/1.1,1999年
HTTP/1.1比HTTP/1.0的改进:查看headers
(1)持久连接 Connection:keep-alive 不是永久连接
让一次连接中可以发起多个请求:相应
(2)虚拟主机 Host:www.xxx.cn
一个Apache同时共存多个站点
(3)代理连接 Proxy:xxx
浏览器通过中间的代理间接访问Web服务器
HTTP协议学习目标:调试AJAX请求错误;Web访问优化
HTTP-NG或HTTP/2.0:关注协议的性能优化以及更强大的服务逻辑远程执行的框架,研究工作仍在进行中
Message,消息/报文,是在HTTP客户端与服务端间传递的数据块
Request Message:客户端向服务器发送的请求消息
Response Message:服务器端根据客户端的请求消息,返回给客户端的相应消息
消息由三部分组成:
Start Line:消息起始行,必须,消息基本能描述信息
Header:消息头部/报头,可能有0~ N个,chrome/firefox-network-headers查看
Body:消息主题,可选,包含数据的主体
起始行和消息头是纯ASCII字符,每行以CRLF结束
消息主题是一个可选的数据块,其中的数据可以为空,或是字符数据(HTML、CSS、JavaScript等字符数据),或二进制数据(图片、音频、视频等字节数据)
请求消息结构:
<method> <request-URL> <version> 请求行:请求方法 空格 请求URL 空格 协议版本CRLF
<headers> 请求头部:可能包含0~N个请求头CRLF
一个空白行CRLF
<entity-body> 请求主体:可选,提交服务器的请求数据
method:请求方法
GET 从服务器获取一份文档
HEAD 只获取文档的响应头部,不要资源本身
POST 向服务器发送需要处理的数据,在请求主体中
PUT 将请求主体中的数据存储在服务器上,在请求主体中
TRACE 表追踪请求路径,对可能经过代理服务器传送到服务器上去的消息进行追踪
OPTIONS 保留以后使用,决定可以在服务器上执行哪些方法
CONNECT 保留以后使用
DELETE 从服务器上删除一份文档
GET和POST区别:
(1)浏览器如何发起GET请求:
在地址栏中输入地址,src/href属性,超链接跳转,js跳转,GET方式提交表单,AJAX-GET请求
(2)浏览器如何发起POST请求:
POST方式提交表单,AJAX-POST请求
(3)GET请求把请求数据追加在请求URI后面,以?k=v&k=v格式
POST请求把请求数据放在请求消息主体中,以k=v&k=v格式
HTTP协议规定k=v的中文和特殊标点都必须进行编码(<=>encodeURIComponent)
(4)浏览器/服务器对请求URI总长度都有长度限制,如1024字节——
GET请求数据有长度限制,中文不能超过几十个;
请求消息主体没有长度限制——POST请求没有长度限制,可用于文件上传
(5)语义不同:GET表获取,POST表传递
响应消息结构:
<version> <status> <reason-phrase> 响应行:协议版本 空格 状态码 空格 原因短语CRLF
<headers>
<entity-body>
StatusCode:响应状态码
1xx Information提示性信息;
100 Continue 告诉客户端继续发送请求
101 Switching Protocols 告诉客户端切换请求协议
2xxx Successfull成功响应;
200 OK 响应完成,主体中包含请求数据
201 Created PUT请求提交的数据已经被保存
3xxRedirection重定向;
301 Moved Permanently PIT请求提交的数据已经被保存
303 See Other 请求资源已被溢出
304 Not Modified 请求的资源未被修改
4xxClient Error客户端错误;
400 Bad Request 请求格式错误
403 Forbidden 请求被服务器拒绝
404 Not Found 请求的资源不存在
405 Method Not Allowed 请求方法不被允许
5xxServer Error服务端错误
500 Internal Server Error 服务器内部错误
503 Service Unavailable 服务器暂时不可用
headers:请求头部
通用头部:在请求消息/响应式消息中都可使用,
Connection:keep-alive 告诉对方启用持久连接
Cache-Control:no-cache、max-age=3600/0、must-revalidate 告诉对方如何缓存消息主体
不缓存/文档处于新鲜状态的秒数3600/每次访问刷新/优先提供新副本否则仍能提供旧副本
Pragma: no-cache 等同于Cache-Control
Expires:Tue,01 Sep 2026 08:40:01 GMT 指定缓存的过期确切时间,设置过去时间/0则不缓存
Date: Fri, 02 Sep 2016 22:31:24 GMT
请求专用头部:只能出现在请求消息中,
Host:127.0.0.1 浏览器告诉服务器向访问哪个虚拟主机
Referer:http://127.0.0.1/6.html 浏览器告诉服务器当前请求从哪个页面发起的(引用页)
User-Agent:mozilla/5.0... 浏览器告诉服务器自己类型
Accept:image/webp,image/*,*/* 浏览器告诉客户端自己可以接受的相应数据类型
Accept-Encoding:gzip 浏览器接收的编码方式,如是否接受某种压缩格式的相应数据
Accept-Language:zn-CN,en-US 浏览器接收的自然语言
Cookie:k=v 浏览器向服务器展示保存在客户端的Cookie
Client-IP/If-Modified-Since/User-Agent
请求主体的描述头部:描述消息主体特征
Content-Length:83
Content-Type: 指定消息主体中数据的内容类型(MIME类型,
Multipurpose Internet Mail Extention,多用途的互联网邮件扩展)
application/x-www-form-urlencoded 请求主体数据是经过编码后的数据
multipart/form-date 专用于文件上传
text/plain txt,请求主体数据是普通文本数据,未经编码;PHP服务器拒绝接收这样的数据
text/html html
text/css css
aplication/javascript js
application/json json
application/xml xml
application/msword doc
image/jpeg jpg
audio/mpeg mp3
video/x-mscideo avi
Location/Last-Modified
响应专用头部:只能出现在响应消息中
Server::Apache
Age:
响应主体的描述头部:
Content-Length: 1783
Content-Type
扩展头部:浏览器自定义的头部
entity-body:请求主体
保存着客户端提交给服务器,需要服务器加以处理POST或保存PUT的数据;可能包含字符/字节数据
1.面试题:缓存控制相关HTTP头部
修改HTTP响应消息头部的方法:
方式1:修改Web服务器的配置文件
方式2:声明HTML META元标签,并非绝对有效
方式3:使用服务器端动态语言设置响应消息头部
2.HTTP访问优化——面试题
网站性能优化最主要的就是要减少HTTP请求及每次响应中内容的长度。可以从连接过程中的下列方面加以考虑:
(1)域名解析
尽可能减少域名解析次数——减少跨站外部资源的引用<img src="http://www.qzone.com/1.jpg">
(2)创建连接
努力减少连接创建次数——使用持久连接避免重复连接Connection: keep-alive
(3)发送请求
尽力减少请求次数——合理设置缓存Expires时间、资源合并
(4)等待响应
提高服务器端运行速度——提高数据运算及查询速度
(5)接收响应
尽可能减小响应数据长度——删除无用的空白字符,启用gzip压缩
3.HTTPS协议:
发送给TCP层之前,先交给了一个安全层(由SSL/TLS协议实现),安全层负责对消息进行加密/解密操作
HTTPS:HTTP over SSL,建立在安全套接字层之上的HTTP协议——会对HTTP请求和响应消息进行加密和解密——安全的HTTP协议。
HTTP:80
HTTPS:443
HTTP协议栈:HTTP应用层-TCP传输层-IP网络层-网络接口数据访问层
HTTPS协议栈:HTTP应用层-SSL or TLS安全层-TCP传输层-IP网络层-网络接口数据访问层
监听HTTPS连接过程:
启动Apache Httpd服务器,监听443端口-Wireshark监听程序-在浏览器中使用https协议,访问服务器中的页面,查看捕获到的请求和响应的消息
AJAX:
Asynchronouse Javascript And XML:异步的JS和XML
异步:浏览器在浏览当前页面的同时,服务器也在运行。
Google 2002年,用于Google Suggest,提出了AJAX概念,涉及到HTML、CSS、JavaScript、DOM、XML、JSON等技术,属于Web前端技术领域。
AJAX技术的目标:在客户端输入的同时,服务器也在运行;服务器的响应内容可以在客户端不需要刷新的情况下显示在页面中——无刷新的情况下实现页面内容的局部改变。
AJAX技术的本质:在用户浏览页面的同时,浏览器底层向服务器发出HTTP请求,并处理服务器返回的响应消息。
AJAX的典型应用:搜索建议、在线股票、在线聊天室、即时的数据验证、级联下拉列表
浏览器发起的HTTP请求的两种方式:
(1)同步HTTP请求:地址栏输入URL、超链接跳转、表单提交、JS跳转
(2)异步HTTP请求:使用XHR对象发起
XMLHttpRequest:是浏览器底层提供的一个对象,向Web服务器发起HTTP请求,并接收响应消息
向Web服务器发起异步的HTTP请求,接收响应消息——此过程中的错误都是“看不见摸不着”,必须从Network请求消息和响应消息查看
XHR对象的成员属性:
readyState:0 (只读)就绪状态,随着请求-响应的进行自动改变, 0-1-2-3-4
UNSENT:0 请求尚未发送
OPENED:1 XHR以及打开到服务器的连接
HEADERS_RECEIVED:2 开始接收响应消息的起始行/头部
LOADING:3 开始加载响应消息的主体
DONE:4 响应消息接收完成
response:"" (只读)响应消息的主体内容
responseText:"" (只读)响应消息的主体,readyState变为3才有值
responseType:"" (只读)响应消息主体的内容类型
responseURL:"" (只读)响应消息来自于哪个URL
responseXML:null (只读)响应消息的主体内容(以XML呈现)
status:0 (只读)响应状态码,readyState变为2才有值
200请求成功
202请求被接受但处理未完成
400错误的请求
404资源未找到
500内部服务器错误,如asp代码错误等
statusText:"" (只读)原因短句,readyState变为2才有值
timeout:0
XHR对象的成员事件:
onabort:null
onerror:null
onload:null
onloadend:null
onloadstart:null
onreadystatechange:null xhr.readyState属性值发生了改变时的事件控制对象,用来处理readystatechange
ontimeout:null
XHR对象的成员方法:
abort() 取消请求
getallheaders() 获取所有的响应消息头部;$lang=getallheaders()['Accept-Language']
php中可直接使用$list = getallheaders();
getAllResponseHeaders( ) 获取所有的响应消息头部
getResponseHeader( name ) 获取指定的响应消息头部
setRequestHeader( name, value ) 设置请求消息头部
open( method, url, isAsync ) 打开到服务器的连接
send( data ) 向服务器发送请求消息
var_dump(...);
兼容获取XMLHttpRequest对象:
var xhr=getXhr();
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){//其他浏览器
xhr=new XMLHttpRequest();
}else{//老IE
xhr= new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
1.使用xhr发起http请求的步骤:
xhr=new XMLHttpRequest(); //创建xhr对象
xhr.onreadystatechange=function(){ //监听xhr的状态改变事件
if(xhr.readyState===4){ //响应消息接收完成
if(xhr.status===200){ //响应完成且成功
dom操作
}else{
alert('响应完成但失败!'+xhr.status); //响应完成但有问题
}
}
xhr.open('method','xxx.php,true); //创建请求;true异步,false同步
xhr.send(null/datal); //发送请求消息
xhr.readyState: 0 1 2 3 4
xhr.status: 0 => 200
xhr.responseText: '' => '响应主体内容'
2.使用XHR发起GET请求:表单检测,搜索框
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState===4&&xhr.status===200){
doResponse(xhr.responseText); //xhr.responseText获取服务器端返回的文本
}
}
xhr.open('GET','xx.php?k1=v1&k2=v2',true); '...?name'+value或`name=${n}&pwd=${p}`;
其中name=$_REQUEST['name']
xhr.send( null ); //GET请求没有请求主体,∴send(null);若有请求数据,追加为URI后面的查询字符串。
function doResponse(xhr){处理服务器端数据并返回客户端}
3.使用XHR发起POST请求:注册——不跳转页面和刷新
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){ //响应完成且成功
doResponse(xhr.responseText);
}else{ //响应完成但不成功
alert('响应完成但失败!'+xhr.status);
}
}
}
xhr.open('POST', 'xxx.php', true); //URI无请求数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//设置请求主体的内容类型
xhr.send( 'k1=v1&k2=v2' ); //提交请求主体,必须编码后提交
注意:POST请求不在URI后面追加查询字符串——请求数据放在请求主体中send()——请求主体发送前必须设置Content-Type请求头部;且请求主体中的中文、特殊标点必须使用encodeURIComponent()函数进行编码。
使用XHR接收响应:header(‘...;charset=UTF-8’);
①使用XHR接收响应——text/plain
服务器端:
header('Content-Type: text/plain');
echo '文本';
客户端:
xhr.responseText //获得服务器端返回的文本响应
②使用XHR接收响应——text/html——重点
服务器端:
header('Content-Type: text/html';charset=UTF-8);
<div>....</div>或echo '<div>....</div>'; //向客户端输出的是HTML片段
客户端:
element.innerHTML = xhr.responseText;
③使用XHR接收响应——application/javascript
服务器端 :
header('Content-Type: application/javascript');
echo 'alert("XXX")'; //向客户端输出一个字符串,内容是JS
客户端:
eval( xhr.responseText ) ; //客户端必须调用eval()执行服务器端返回的js脚本
④使用XHR接收响应——application/xml——行业标准字符串格式
PHP数组 => XML字符串
$data = [ [[],[],[]], [], []]; //复杂数据
[{"name":"v1"},{"",""}...]
服务器端(PHP):
header('Content-Type: application/xml);
echo '<?xml version="1.0" encoding="UTF-8"?>';
//把PHP中的数组转化为符合XML标准的字符串
echo "<xx art='$row[name]'>..$row[name]...</xx>";
客户端(JS): XML字符串 => JS对象
var xmlString = xhr.responseText/xhr.responseXML; //获取XML DOM树的根
querySelectorAll、querySelector、children......//遍历DOM树,取出其中的数据
提示:xhr.responseXML是一个XML DOM对象——使用核心DOM操作即可遍历。
⑤使用XHR接收响应——application/json
服务器端(PHP):
header('Content-Type: application/json');
$arr=[[],[],[]];
echo '[ ]' /'{ }'/json_encode($arr); //将php数组转化为json并输出
客户端:
var obj=JSON.parse(str);或eval("("+str+")"); //将json转化为js对象/数组
引出的问题:若服务器端需要返回多条有格式的数据,以何种格式合适?
(1)方案1:text/html格式
如<option value="">xxx</option>
不足:每个.php只能输出一种格式,只能供特定的父元素使用
(2)方案2:text/plain格式
如:tom@85@76#mary@77@99 #john@67@78
不足:不够灵活,适用性不广泛
(3)方案3:application/javascript格式
一般不用于描述数据。
(4)方案4:使用XML或者JSON字符串格式
XML:eXtensible Markup Language,可扩展的标记语言,所有的标签都可以自定义
HTML:用于描述网页的内容,标签固定,语法比较松散
XML:与HTML无关,用于描述数据的一种字符串格式,标签任意,语法很严格
在Web应用中,XML格式的意义——在服务器和客户端之间传递批量的复杂数据:
元数据(有关数据的数据)应当存储为属性,而数据本身应当存储为元素。
DOM分为三部分:
(1)核心DOM 既可以遍历HTMLDOM树,也可以遍历XMLDOM树
(2)HTML DOM 网页的JS中 document 就是HTML DOM树的根
(3)XML DOM AJAX中xhr.responseXML就是XML DOM树的根
数据的本质是一个多维数组:[ [ ],[ ],[ ],[ ],[ ] ],是不能直接输出给客户端JS的。
解决办法——把服务器端多维数组转换为特定格式的字符串,发送给客户端
用途:
XML 把数据从 HTML 分离
XML 简化数据共享
XML 简化数据传输
XML 用于创建新的 Internet 语言
语法:
必须关闭标签
大小写敏感
必须正确嵌套
必须有根元素,是所有其他元素的父元素
属性值必须加引号
注释<!--...-->
实体引用:<< >> && '' ""
空格会被保留:HTML中会把连续的空格合并成一个,XML中不会
Macintosh用CR存储新行,Unix以LF存储新行
<?xml开头,以?>结束
versioin:指定XML文档版本1.0,必须
encoding:指定当前文档的编码,可选,默认utf-8
standalong:指文档独立性,可选,默认yes:当前文档是独立文档;no:当前文档依赖外部文件
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE note SYSTEM "Note.dtd"> DOCTYPE 声明是对外部 DTD 文件的引用
兼容获取XML DOM对象
if(window.DOMParser){ //其他浏览器
var parser=new DOMParser();
var xmldoc=parser.parseFromString(,"application/xml");
}elser{//IE
var xmldoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);
}
使用xhr发送xml字符串:
var xmlString="<?xml version=\"1.0\"?>"; xmlString+="<..>"
xhr.send("xmlString="+xmlString);
使用xhr接收xml字符串:
var xmlElem=xhr.resopnseXML;
JSON:JavaScript Object Notation,JavaScript对象表示法
作为一种轻量级的文本数据交换格式,被广泛使用与存储和交换文本数据领域,比xml更简洁、更快、更容易解析
PHP数组 => JSON字符串 => echo => xhr.responseText => JSON字符串 => JS数组
语法规则:
var jsonTxt='{ "xxx":value, ..... }'
value:string、number、object、array、true、false、null
JSON字符串有两种格式:
(1)对象: '{"eid":101, "ename":"Tom", "isMarried":true }'
(2)数组: '[10,true,"Tom",{"x":60,...}, [ ] ]'
注意:
1) JSON字符串要么是一个{},要么是一个[]
2) JSON字符串中所有的string的必需使用"",包括key
JS语言中:
JSON字符串 => JS对象/数组: var jsobj = JSON.parse( str )
var jsobj=eval("("+str+")");
//eval严格语法要求参数只能是string类型不能是String类型必须添加(),否则会抛出SyntaxError
JS对象/数组 => JSON字符串: var str = JSON.stringify( jsobj )
IE7中的js解释器不支持此两方法,可下载json2.js工具解决此问题:
https://github.com/douglascrockford/JSON-js/blob/master/json2.js
PHP语言中:
PHP数组 => JSON字符串: $str = json_encode( $arr );
JSON字符串 => PHP数组: $arr = json_decode( $str );
两种通用的字符串数据描述格式:XML vs JSON
(1)二者都是字符串格式,可以用于描述字符串数据,在不同的系统间进行传递
(2)历史上XML格式先出现,JSON后出现
(3)XML属于重量级格式;JSON属于轻量级格式
(4)XML处理比较复杂;JSON的处理比较简单
(5)XML还有一些其他的应用领域,JSON一般只用于数据传递领域
jQuery中的AJAX封装函数:
function(data,status,xhr){...}
data:服务器返回的数据
status:success/notmodified/error/timeout/parsererror
$('选择器').load( url , [data] , [fn] );
$元素的innerHTML属性设置为服务器返回的HTML内容
data:'k=v&kv'或{'k':v,'k':v}
有请求参数时发送POST请求,否则发送GET请求
该方法要求URL返回内容必须是text/html类型的片段;返回的响应主体会覆盖当前选定元素的内容。
“页面包含”技术:把整个网站的头和尾写在独立的文件中,其它页面加载完成后,异步请求页头和页尾内容
$.get( url , [data] , [fn] , [type] )
发起GET请求,获取到成功的响应消息后,自动调用指定的回调函数
function(data,status){...}
type:html:HTML文本,text,JSON:js对象,xml:xml文档,script:JavaScript脚本
$.get('check_uname.php', 'uname=tom', function(txt, msg, xhr){ //成功响应的回调函数 })
$.post(url,[data],[fn],[type])
发起POST请求,获取到成功的响应消息后,自动调用指定的回调函数。
fn中会根据响应消息的Content-Type头部的不同,自动调用JSON.parse()/eval( )
$.getScript((url, [data], [fn])
发起GET请求,自动调用eval()执行返回的js语句
function(data,status){...}
获取服务器端返回的application/javascript类型的响应消息
$.getJSON(url,[data],[fn])
发起GET请求,自动调用JSON.parse()解析服务器返回的JSON字符串为JS对象
获取服务器端返回的application/json类型的响应消息,不设置仍会调用JSON.parse()
$.ajax(url,[settings])
万能AJAX请求函数,上述五个简化版本函数底层都调用的是$.ajax
$.ajax( {
type: 'GET', //POST/PUT/DELETE/...
url: 'xx.php',
data: 'k=v&k=v', //还可以形如{ k:v, k:v }
dataType: 'text', //html/script/json/xml/jsonp,服务器返回的数据类型
async:true //默认true,值为为false时发送同步请求
beforeSend: fn, //请求发送之前的回调函数
success: fn, //响应成功后的回调函数
error: fn, //响应失败后的回调函数
complete: fn //响应完成后的回调函数
} );
<==>xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
success();
}else{error();}
complete();
}
xhr.open();
beforeSend();
xhr.send(null/data);
表单序列化(serialize):获取页面元素值,拼凑成字符串/JSON字符串,AJAX异步提交数据
serialize():将表单内容序列化成一个字符串
var data=$("form").serialize(); //data:xxx=xxx&xxx=xxx...
serializeArray():将表单序列化成一个JSON结构的对象,注意补水JSON字符串
var jsonData=$("form").serializeArray(); //jasonData:[{"xxx":xxx,....},{...}]
获取xxx:jsonData[0].xxx
使用:
$("form").submit(function(){
var ajax_url=$(this).attr("action"); //获取服务器地址
var ajax_type=$(this).attr("method"); //获取提交方式
var ajax_data=$(this).serialize();
});
$.ajax(.....//传送url,type,data);
return false; //返回false,阻止表单默认提交
同源策略Same origin policy:是一种约定,是浏览器最核心也最基本的功能。
由Netscape提出的一个著名的安全策略,支持js的浏览器都使用此策略
同源是指,域名、协议、端口相同
页面中是js无法访问其他服务器上的数据
域名Domain Name:便于记忆和沟通的一组服务器地址-*域名-二级域名-三级域名
跨域请求:Cross Domain Request
跨域请求:
只要协议、域名、端口有任何一个不同,都被当做是不同的域
通过某些手段绕过同源策略限制,实现不同服务器之间通信的效果
浏览器允许跨域请求?
允许:<img src="跨域的图片">,
<link rel="stylesheet" href="跨域的CSS">,
<a src="跨域的链接">,
<script src="跨域的JS">,
<iframe>
禁止:AJAX请求是不允许跨域的!
说明:处于安全考虑,所有的浏览器默认都禁止使用XHR异步的跨域请求。
面试题:我们公司有两个域名:如tmooc.cn,和 tarena.cn,如何使用AJAX在tmooc.cn/1.html 请求 tarena.cn/2.php? —— 这是XHR的跨域请求!浏览器是禁止的!!
解决方案:
方案1:修改相应头部:
header(“Access-Control-Allow-Origin:http://172.17.8.181”)
$.get('http://localhost/lx/4.php');
方案2:使用JSONP手段,可以巧妙的绕过XHR的跨域限制
方案3:
JSONP:JSON with Padding,填充式JSON,与JSON没关系,JSON是一种字符串数据格式,JSONP是一种解决xhr跨域请求限制的手段
原理:
在客户端动态的创建一个script标签(script允许跨域),代替XHR对象,指定script.src向服务器发起请求
服务端:
header('Content-Type: application/javascript');
$json = json_encode($data);
echo "f( $json )"; //function donResponse(obj){ }
客户端:jQuery发起JSONP请求
function f(data){}
$('#bt3').click(function(){
var script = document.createElement('script'); //动态创建script并追加
script.src="http://localhost/lx/4.php";
document.head.appendChild(script);
});
或
服务端:
header('Content-Type: application/javascript');
$json = json_encode($data);
$cb=$_REQUEST[' callback' ]; @$cb=@$_REQUEST[' callback' ];
echo $cb . '(' . $json . ')'; //填充指定函数名并返回数据
客户端:
$('#bt3').click(function(){
var script = document.createElement('script');
script.src="http://localhost/lx/5.php?callback=f";
document.head.appendChild(script);
});
function f(data){}
jQuery:中的$.getJSON()和$.ajax()可以使用XHR发起同域的请求,也可以使用SCRIPT标签发起跨域请求。
同域下的请求:
$.getJSON('xx.php', fn)
$.ajax({ url: 'xx.php', success: fn})
跨域请求——JSONP:
$.getJSON('http://其它域名/xx.php?callback=...', fn) //jq将自动替换...为正确函数名,以执行回调函数
$.ajax({
url: ' http://其它域名/xx.php',
dataType: 'jsonp',
success: fn
[jsonpCallback]:xxx,//指定一个回调函数名,值替代jq自动生成的随机函数名
[jsonp]:xxx//在jsonp请求中重写回调函数的名字,值替代callback=?
});
异步请求和事件冲突问题,js单线程
避免堵塞:sleep()
创建jdsql
1个购物车添加多个商品 1个商品可被多个购物车添加(数量 异步请求)
产品表pid==购物车详情表productID 购物车表cid==购物车详情表cartID
异步加载页头页尾
异步登录 data/1_login.php,修改产品列表页面
异步加载前8条记录,修改产品列表主题
异步分页加载,修改分页条 data/1_product_select.php
sql时间比较 varchar类型 date类型