6_PHP AJAX MYSQL

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 语言

语法:

必须关闭标签

大小写敏感

必须正确嵌套

必须有根元素,是所有其他元素的父元素

属性值必须加引号

注释<!--...-->

实体引用:&lt;<         &gt;>            &amp;&        &apos;'          &quot;"

空格会被保留: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类型

上一篇:CryptoJS中WordArray


下一篇:lambda 表达式 比较时间大小