💥此MD/PDF/HTML文档由 @竹梦者也 编辑制作,不可贩卖❌。仅供学习交流使用,下载后切勿随意传播。转载麻烦加上出处~

📌欢迎在留言区提供修改建议~

💌本文内容和代码来自于西兰花老师的AJAX教程

 

✅2021.7.6 @竹梦者也(https://www.zjgsuzjx.top)

💡2021.7.10 V1.1(完善了部分知识体系)

 

 

一、PHP基础

一、PHP基本语法

1. 初识PHP

PHP 脚本可以放在文档中的任何位置。

PHP 脚本以 <?php 开始,以 ?> 结束:

简单输出

2. PHP 中的注释

3. PHP变量

PHP 变量规则

注释:PHP 变量名称对大小写敏感!

PHP 没有创建变量的命令。变量会在首次为其赋值时被创建。

注释:如果您为变量赋的值是文本,请用引号包围该值。

PHP 变量作用域

在 PHP 中,可以在脚本的任意位置对变量进行声明。

变量的作用域指的是变量能够被引用/使用的那部分脚本。

PHP 有三种不同的变量作用域:

函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。

函数内部声明的变量拥有 LOCAL 作用域,只能在函数内部进行访问。

global 关键词

global 关键词用于在函数内访问全局变量

要做到这一点,请在(函数内部)变量前面使用 global 关键词:

4. 输出语句

在 PHP 中,有两种基本的输出方法:echoprint

echoprint 之间的差异

提示:echo 比 print 稍快,因为它不返回任何值。

echo 语句

echo 是一个语言结构,有无括号均可使用:echoecho()

下面的例子展示如何用 echo 命令来显示不同的字符串(同时请注意字符串中能包含 HTML 标记):

输出结果为:

e5faff204dc94d95681e8ed4f6dcbd58.jpg

参杂变量的语法:

print 语句

print 也是语言结构,有无括号均可使用:printprint()

把上面的代码换成 print 就可以了。

5. PHP 数据类型

字符串、整数、浮点数、逻辑、数组、对象、NULL。

字符串

字符串可以是引号内的任何文本。您可以使用单引号双引号

整数

整数规则:

var_dump() 会返回变量的数据类型和值

浮点数

逻辑

逻辑是 true 或 false。

数组

对象

在 PHP 中,必须明确地声明对象。对此,我们使用 class 关键词。类是包含属性和方法的结构。

然后我们在对象类中定义数据类型,然后在该类的实例中使用此数据类型:

NULL 值

特殊的 NULL 值表示变量无值。NULL 是数据类型 NULL 唯一可能的值。

NULL 值标示变量是否为空。也用于区分空字符串与空值数据库。

可以通过把值设置为 NULL,将变量清空:

6. 字符串函数

strlen() 函数

strlen() 函数返回字符串的长度,以字符计。

单词计数 str_word_count() 函数对字符串中的单词进行计数:

反转字符串

strrev() 函数反转字符串:

strpos() 函数

strpos() 函数用于检索字符串内指定的字符或文本。

如果找到匹配,则会返回首个匹配的字符位置。如果未找到匹配,则将返回 FALSE

提示:上例中字符串 "world" 的位置是 6。是 6(而不是 7)的理由是,字符串中首字符的位置是 0 而不是 1。

替换字符串中的文本

str_replace() 函数用一些字符串替换字符串中的另一些字符。

7. 常量

常量类似变量,但是常量一旦被定义就无法更改或撤销定义。

常量是单个值的标识符(名称)。在脚本中无法改变该值。

有效的常量名以字符或下划线开头(常量名称前面没有 $ 符号)。

注释:与变量不同,常量贯穿整个脚本是自动全局的。

设置 PHP 常量

如需设置常量,请使用 define() 函数 - 它使用三个参数:

  1. 首个参数定义常量的名称
  2. 第二个参数定义常量的值
  3. 可选的第三个参数规定常量名是否对大小写不敏感。默认是 false

常量是自动全局的,而且可以贯穿整个脚本使用。

下面的例子在函数内使用了一个常量,即使它在函数外定义:

8. PHP 运算符

算数运算符

赋值运算符

PHP 中基础的赋值运算符是 "="。这意味着右侧赋值表达式会为左侧运算数设置值。

字符串运算符

相当于JS里的+

递增/递减运算符

比较运算符

运算符名称例子结果
==等于$x == $y如果 $x 等于 $y,则返回 true。
===全等(完全相同)$x === $y如果 $x 等于 $y,且它们类型相同,则返回 true。
!=不等于$x != $y如果 $x 不等于 $y,则返回 true。
<>不等于$x <> $y如果 $x 不等于 $y,则返回 true。
!==不全等(完全不同)$x !== $y如果 $x 不等于 $y,或它们类型不相同,则返回 true。
>大于$x > $y如果 $x 大于 $y,则返回 true。
<小于$x < $y如果 $x 小于 $y,则返回 true。
>=大于或等于$x >= $y如果 $x 大于或者等于 $y,则返回 true.
<=小于或等于$x <= $y如果 $x 小于或者等于 $y,则返回 true。

逻辑运算符

运算符名称例子结果
and$x and $y如果 $x 和 $y 都为 true,则返回 true。
or$x or $y如果 $x 和 $y 至少有一个为 true,则返回 true。
xor异或$x xor $y如果 $x 和 $y 有且仅有一个为 true,则返回 true。
&&$x && $y如果 $x 和 $y 都为 true,则返回 true。
||$x || $y如果 $x 和 $y 至少有一个为 true,则返回 true。
!!$x如果 $x 不为 true,则返回 true。

数组运算符

运算符名称例子结果
+联合$x + $y$x 和 $y 的联合(但不覆盖重复的键)
==相等$x == $y如果 $x 和 $y 拥有相同的键/值对,则返回 true。
===全等$x === $y如果 $x 和 $y 拥有相同的键/值对,且顺序相同类型相同,则返回 true。
!=不相等$x != $y如果 $x 不等于 $y,则返回 true。
<>不相等$x <> $y如果 $x 不等于 $y,则返回 true。
!==不全等$x !== $y如果 $x 与 $y 完全不同,则返回 true。

二、PHP逻辑语法

1. 条件语句

在 PHP 中,我们可以使用以下条件语句:

1.1 if 语句

下例将输出 "Have a good day!",如果当前时间 (HOUR) 小于 20:

如果当前时间 (HOUR) 小于 20,下例将输出 "Have a good day!",否则输出 "Have a good night!":

如果当前时间 (HOUR) 小于 10,下例将输出 "Have a good morning!",如果当前时间小于 20,则输出 "Have a good day!"。否则将输出 "Have a good night!":

1.2 Switch 语句

使用 Switch 语句可以避免冗长的 if..elseif..else 代码块。

工作原理

  1. 对表达式(通常是变量)进行一次计算
  2. 把表达式的值与结构中 case 的值进行比较
  3. 如果存在匹配,则执行与 case 关联的代码
  4. 代码执行后,break 语句阻止代码跳入下一个 case 中继续执行
  5. 如果没有 case 为真,则使用 default 语句

2. 循环语法

在 PHP 中,我们有以下循环语句:

2.1 while 循环
2.2 do...while 循环

do...while 循环首先会执行一次代码块,然后检查条件,如果指定条件为真,则重复循环。

请注意,do while 循环只在执行循环内的语句之后才对条件进行测试。这意味着 do while 循环至少会执行一次语句,即使条件测试在第一次就失败了。

2.3 for 循环

如果您已经提前确定脚本运行的次数,可以使用 for 循环。

参数:

2.4 foreach 循环

foreach 循环只适用于数组,并用于遍历数组中的每个键/值对。

每进行一次循环迭代,当前数组元素的值就会被赋值给 $value 变量,并且数组指针会逐一地移动,直到到达最后一个数组元素。

下面的例子演示的循环将输出给定数组($colors)的值:

三、PHP函数

PHP是世界上最好的语言。 ------匿名

它拥有超过 4000 个内建的函数。

1. 用户定义函数

页面加载时函数不会立即执行。函数只有在被调用时才会执行。

用户定义的函数声明以单词 "function" 开头:

注释:函数名能够以字母或下划线开头(而非数字)。

注释:函数名对大小写不敏感。

提示:函数名应该能够反映函数所执行的任务。最好用驼峰命名法。

2. 函数参数

可以通过参数向函数传递信息。参数类似变量。参数被定义在函数名之后,括号内部。您可以添加任意多参数,只要用逗号隔开即可。

3. 默认参数值

下面的例子展示了如何使用默认参数。如果我们调用没有参数的 setHeight() 函数,它的参数会取默认值:

4. 返回值

如需使函数返回值,请使用 return 语句:

四、数组

1. 创建数组

在 PHP 中, array() 函数用于创建数组:

在 PHP 中,有三种数组类型:

2. 索引数组

有两种创建索引数组的方法:(索引是自动分配的,索引从 0 开始)

或者也可以手动分配索引:

遍历索引数组

count() 函数用于返回数组的长度(元素数)。

3. 关联数组

关联数组是使用你分配给数组的指定键的数组。类似JS的对象。

有两种创建关联数组的方法:

或者:

具体应用

遍历关联数组

如需遍历并输出关联数组的所有值,可以使用 foreach 循环,就像这样:

4. 数组排序

主要有如下 PHP 数组排序函数:

sort()

下面的例子按照字母升序对数组 $cars 中的元素进行排序:

asort()

下面的例子根据关联数组进行升序排序:

ksort()

下面的例子根据键对关联数组进行升序排序:

五、超全局

超全局变量在 PHP 4.1.0 中引入,是在全部作用域中始终可用的内置变量。和JS中的window相似。

PHP 中的许多预定义变量都是“超全局的”,这意味着它们在一个脚本的全部作用域中都可用。在函数或方法中无需执行 global $variable; 就可以访问它们。

这些超全局变量是:

1. $GLOBALS

引用全局作用域中可用的全部变量。

$GLOBALS 这种全局变量用于在 PHP 脚本中的任意位置访问全局变量(从函数方法中均可)。

PHP 在名为 $GLOBALS[index] 的数组中存储了所有全局变量。变量的名字就是数组的键。

在上面的例子中,由于 z$GLOBALS 数组中的变量,因此在函数之外也可以访问它。

2. $_SERVER

$_SERVER 这种超全局变量保存关于报头、路径和脚本位置的信息

下面的例子展示了如何使用 $_SERVER 中的某些元素:

下表列出了您能够在 $_SERVER 中访问的最重要的元素:

元素/代码描述
$_SERVER['PHP_SELF']返回当前执行脚本的文件名。
$_SERVER['GATEWAY_INTERFACE']返回服务器使用的 CGI 规范的版本。
$_SERVER['SERVER_ADDR']返回当前运行脚本所在的服务器的 IP 地址。
$_SERVER['SERVER_NAME']返回当前运行脚本所在的服务器的主机名(比如 www.zjgsuzjx.top)。
$_SERVER['SERVER_SOFTWARE']返回服务器标识字符串(比如 Apache/2.2.24)。
$_SERVER['SERVER_PROTOCOL']返回请求页面时通信协议的名称和版本(例如,“HTTP/1.0”)。
$_SERVER['REQUEST_METHOD']返回访问页面使用的请求方法(例如 POST)。
$_SERVER['REQUEST_TIME']返回请求开始时的时间戳(例如 1577687494)。
$_SERVER['QUERY_STRING']返回查询字符串,如果是通过查询字符串访问此页面。
$_SERVER['HTTP_ACCEPT']返回来自当前请求的请求头。
$_SERVER['HTTP_ACCEPT_CHARSET']返回来自当前请求的 Accept_Charset 头( 例如 utf-8,ISO-8859-1)
$_SERVER['HTTP_HOST']返回来自当前请求的 Host 头。
$_SERVER['HTTP_REFERER']返回当前页面的完整 URL(不可靠,因为不是所有用户代理都支持)。
$_SERVER['HTTPS']是否通过安全 HTTP 协议查询脚本。
$_SERVER['REMOTE_ADDR']返回浏览当前页面的用户的 IP 地址。
$_SERVER['REMOTE_HOST']返回浏览当前页面的用户的主机名。
$_SERVER['REMOTE_PORT']返回用户机器上连接到 Web 服务器所使用的端口号。
$_SERVER['SCRIPT_FILENAME']返回当前执行脚本的绝对路径。
$_SERVER['SERVER_ADMIN']该值指明了 Apache 服务器配置文件中的 SERVER_ADMIN 参数。
$_SERVER['SERVER_PORT']Web 服务器使用的端口。默认值为 “80”。
$_SERVER['SERVER_SIGNATURE']返回服务器版本和虚拟主机名。
$_SERVER['PATH_TRANSLATED']当前脚本所在文件系统(非文档根目录)的基本路径。
$_SERVER['SCRIPT_NAME']返回当前脚本的路径。
$_SERVER['SCRIPT_URI']返回当前页面的 URI。

3. $_REQUEST

$_REQUEST 用于收集 HTML 表单提交的数据。

下面的例子展示了一个包含输入字段及提交按钮的表单。当用户通过点击提交按钮来提交表单数据时, 表单数据将发送到 <form> 标签的 action 属性中指定的脚本文件。在这个例子中,我们指定文件本身来处理表单数据。如果您需要使用其他的 PHP 文件来处理表单数据,请修改为您选择的文件名即可。然后,我们可以使用超级全局变量 $_REQUEST 来收集 input 字段的值:

4. $_POST

$_POST 广泛用于收集提交 method="post" 的 HTML 表单后的表单数据。$_POST 也常用于传递变量。

例子同上一个相同。

6. $_GET

$_GET 也可用于收集提交 HTML 表单 (method="get") 之后的表单数据。

$_GET 也可以收集 URL 中的发送的数据。

假设我们有一张页面含有带参数的超链接:

当用户点击链接 "测试 $GET",参数 "subject" 和 "web" 被发送到 "test_get.php",然后您就能够通过 $_GET 在 "test_get.php" 中访问这些值了。

下面的例子是 "test_get.php" 中的代码:

六、PHP 表单

这个章节很重要,已经涉及到AJAX基础。这里简单学习一下就好啦。

表单处理

PHP 超全局变量 $_GET$_POST 用于收集表单数据(form-data)。

简单的 HTML 表单

下面的例子显示了一个简单的 HTML 表单,它包含两个输入字段和一个提交按钮:

当用户填写此表单并点击提交按钮后,表单数据会发送到名为 "welcome.php" 的 PHP 文件供处理。表单数据是通过 HTTP POST 方法发送的。

如需显示出被提交的数据,您可以简单地输出(echo)所有变量。"welcome.php" 文件是这样的:

使用 HTTP GET 方法也能得到相同的结果

get和post的区别

注意:绝不能使用 GET 来发送密码或其他敏感信息!

七、PHP高级

1. Include 文件

include (或 require)语句会获取指定文件中存在的所有文本/代码/标记,并复制到使用 include 语句的文件中。

include文件很有用,如果您需要在网站的多张页面上引用相同的 PHP、HTML 或文本的话。

include 和 require 语句

通过 includerequire 语句,可以将 PHP 文件的内容插入另一个 PHP 文件(在服务器执行它之前)。

include 和 require 区别

比如:

用require就不会出现I have a ,而include会出现。

因此,如果希望继续执行,并向用户输出结果,即使包含文件已丢失,那么请使用 include。否则,在框架、CMS 或者复杂的 PHP 应用程序编程中,请始终使用 require 向执行流引用关键文件。这有助于提高应用程序的安全性和完整性,在某个关键文件意外丢失的情况下。

实例

假设我们有一个名为 "footer.php" 的标准的页脚文件,就像这样:

如需在一张页面中引用这个页脚文件,请使用 include 语句:

也可以在调用文件中使用这些变量:

2. 文件上传

创建一个文件上传表单

<form> 标签的 enctype 属性规定了在提交表单时要使用哪种内容类型。在表单需要二进制数据时,比如文件内容,请使用 "multipart/form-data"

<input> 标签的 type="file" 属性规定了应该把输入作为文件来处理。举例来说,当在浏览器中预览时,会看到输入框旁边有一个浏览按钮。

保存被上传的文件

在服务器的 PHP 临时文件夹创建了一个被上传文件的临时副本。

这个临时的复制文件会在脚本结束时消失。要保存被上传的文件,我们需要把它拷贝到另外的位置

上面的脚本检测了是否已存在此文件,如果不存在,则把文件拷贝到指定的文件夹。

注释:这个例子把文件保存到了名为 "upload" 的新文件夹。

二、网络传输协议

此章节为计算机网络部分概念基础,学过可以略过,也可以复习一下。

a680144bbfff3d12766519e9327fc828.jpg

一、常见协议

1、HTTP、HTTPS 超文本传输协议

2、FTP 文件传输协议

3、SMTP 简单邮件传输协议

二、HTTP协议

即超文本传输协议,网站是基于HTTP协议的,例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。

HTTP协议(hypertext transport protocol)是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。现在主流http2.0。

特点:无状态,现在cookie解决了无状态的问题(早期网页开发时,用cookie解决,现在是cookie和session配合使用)

HTTP协议主要由请求和响应构成。

常用请求方法 POSTGETPUTDELETE

1. 请求/请求报文

请求由客户端发起,其规范格式为:请求行请求头请求主体

fb60e6a70ffb0b59a4878594f2528310.png

请求行

由请求方式、请求URL和协议版本构成

请求头

Host:localhost请求的目标主机(主机名:端口号)

Cache-Control:max-age=0控制缓存

Accept*/* 接受的文档MIME类型

User-Agent:用户代理,判断用户浏览器版本很重要

Referer:从哪个URL跳转过来的(1.防盗链如微信 2.广告计费)

Origin:精简版的Referer

Accept-Encoding:可接受的压缩格式

Upgrade-Insecure-Requests:浏览器告诉服务器是否可以使用https

DNT:浏览器告诉服务器是否禁止跟踪。

Cookie:node里再将

Content-Type:浏览器告诉服务器,发送数据的类型

请求主体

即传递给服务端的数据。

注:当以post形式提交表单的时候,请求头里会设置Content-Type: application/x-www-form-urlencoded,而get形式当不需要

备注

form表单的 post请求和get请求,参数均已urlencoded形式进行编码

get请求将urlencoded编码的参数放入请求地址携带给服务器,所以称之为:查询字符事参数。

post请求将urlencoded编码的参数放入请求体,所以称之为:请求体参数。

2. 响应/响应报文

响应由服务器发出,其规范格式为:状态行响应头响应主体

d3f5d45ddd897141e6a3101c6751bbfc.png

状态行

由协议版本号、状态码和状态信息构成。

响应头

Date:响应时间

Server:服务器信息

Content-Length:返回数据的长度

Content-Type:响应资源的MIME类型

Connection:服务器告诉浏览器下次请求时或许会采用长连接

X-Powered-By:服务器所采用的框架(尽量不要让用户知道服务器采用的技术)

MIME是标识文件类型的,文件后缀并不能正确无误的标识文件的类型。

可以禁止服务器返回X-Powered-By

app.disable('x-powered-by')

客户端与服务器在进行数据传输的时候都是以字节形式进行的,我们可以理解成是以“文本形式”传输,这时浏览器就需要明确知道该怎么样来解析这些文本形式的数据,MIME就是明确告知浏览器该如何来处理。

响应主体

即服务端返回给客户端的内容。

状态码分类

5fcd45ac5efa959cbc5cd6ab9760d4cb.png

常见的有200代表成功、304文档未修改、403没有权限、404未找到、500服务器错误、502`连接服务器失败。

301:重定向,被请求的旧资源永久移除了(不可以访问了),将会跳转到一个新资源,搜索引擎在抓取新内容的同时也将旧的网址替换为重定向之后的网址。

302:重定向,被请求的旧资源还在(仍然可以访问),但会临时跳转到一个新资源,搜索引擎会抓取新的内容而保存旧的网址。

推荐谷歌插件:http status

3. 调试工具

利用HTTP抓包工具在开发中可以帮我们进行调试,常用抓包工具HttpWatch、FiddlerCharles、FireBug等

浏览器插件

Firebug、HttpWatch、chrome dev tools

代理软件

Charles、Fiddler

浏览器的network是个好东西

三、网站解析过程

将域名翻译成IP地址。

1. DNS解析步骤

1.找浏览器DNS缓存解析域名

2.找本机DNS缓存(备注:查看本机DNS缓存cmd命令:ipconfig/displaydns > C:/dns.txt

3.找路由器DNS缓存

4.找运营商DNS缓存(80%的DNS查找,到这一步结束)

5.递归查询(查询全球13台根DNS服务器)

2. 三次握手

进行TCP(协议)连接,三次握手(根据上一步请求回来的ip地址,去联系服务器)

第一次提手:由浏览器发给服务器,我想和你说话,你能“听见”嘛?

第二次握手:由服务器发给浏览器,我能听得见,你说吧!

第三次握手:由浏览器发给服务器,好,那我就开始说话。

3. 浏览器解析HTML

  1. 预解析:将所有外部的资源,发请求出去
  2. 解析html,生成DOM树
  3. 解析CSS,生成CSS树--合并成一个render树
  4. JS是否操作了DOM或样式 有:进行重绘或重排(不好,1.尽最避免;2.最小化重绘重排)没有:null
  5. 最终展示界面

4. 四次挥手

断开TCP连接,四次挥手(确保数拥的完整性)

第一次挥手:由浏览器发给服务器,我的东西接受完了,你断开心。

第二次挥手:由服务器发给到览器,我还有一些东西没接收完,你等一会,我接收好了我告诉你

第三次探手:由服务器发给浏览器,我接收完了,你断开吧

第四次挥手:由浏览器发给服务器,好的,那我断开了

备注:为什么握手要三次,挥手要四次? 握手之前,还没有进行数据的运输,确认握手就可以了。 挥手之前,正在进行数据的传输,为了确保数据的完整性,必须多经历一次验证。

三、AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

0324d1605e43e405358b601f4a18f99e.jpg

一、XHR

1. 基本用法

1、创建异步对象

2、向服务器发送请求

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET 或 POSTurl:文件在服务器上的位置asynctrue(异步,默认)或 false(同步)
send(string)将请求发送到服务器。string:仅用于 POST 请求

GETPOST比较

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

3、服务器响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。

GETPOST 请求方式的差异

1、GET没有请求主体,使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send('name=itcast&age=10')

4、GET效率更好(应用多)

5、GET大小限制约4K,POST则没有限制

服务器端

2. onreadystatechange 事件

是另一种回调函数注册方式。

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪
status200: "OK"404: 未找到页面

onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。

3. API

API(Application Programming Interface,应用程序接口)是一些预先定义的接口(如函数、HTTP接口),或指软件系统不同组成部分衔接的约定。

我的理解是相当于你编辑好了一个php文件,然后只要告诉别人你这个php文件的参数的格式及含义,就可以通过get或者post的方式来访问你的php文件,你的php文件得到发送过来的数据以后(可以是自定义链接的拼接,也可以是send的方式),就会返回给别人相应的数据。

简单的API天气预报请求例子

二、XML

如果需要得到数据量过大,就不便于解析;服务器返回的数据不会被切割(除非代码切割,但效率低下)。于是就有了XML。

1. XML含义

2. XML用途

3. XML用法

简单的例子

XML文件内容

php文件内容

html文件内容

4. 缺点

1、传输的数据量大(如今网速不是问题)

2、解析略微有点复杂(主要原因)

目前使用最频繁的是 JSONXML基本碰不到。

三、JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

1. 概念

2. 语法

用来表示对象

切记里面不能用单引号,因为外单内双原则。

用来表示数组

用来表示对象数组

3. 完整应用

json文件内容

php文件内容

html文件内容

4. 获取网络上的JSON文件

以bilibili为例子:

068d58ac40f46e975cbd41fc78d3ed0e.png

一个小技巧:按文件大小降序,文件最大的数据量肯定也大。

f8a52a68d8e418e2d760f257abf90796.png

5. 案例

四、AJAX函数封装

为了能够便于其它开发者调用,专注于使用异步回来的数据,需要一个封装函数将get和post放在同一个JS文件内。

1. get和post单独设置

其中success是一个回调函数,用来接受异步回来的数据,把这个数据作为回调函数的参数返回给html页面。

html页面的写法如下

其中回调函数就是第三个参数functiondata用来接受异步回来的数据,之后的操作全部写在回调函数中。

2. post和get合写

将post和get函数合在一起写,可以减少代码量,需要再增添一个参数用来判断是哪个数据请求。

3. 参数改为对象

get和post函数内的参数可能会越来越多,不便于传递处理。可以统一放在一个对象内,通过对象名.属性名来调用。

JS文件

注意,上面代码设置了在不同的返回数据类型下,用了判断语句返回需要的格式。getResponseHeader('Content-Type')可以得到请求头的类型。indexOf函数可以判断在数据或字符串中是否有对应的子串。

html文件

4. 注册页面点击案例

要求

html的JS部分

注意:其它部分就是上节的代码;另外,hasClass方法可以判断某个DOM元素是否有这个类名。

5. JQuery中的AJAX

官方手册:https://jquery.cuishifeng.cn/

get请求

post请求

综合写法

格式

注意:

发送验证码案例

实现要求

1、用户名 name 失去焦点 验证数据

2、手机号 mobile 失去焦点 验证数据

3、验证码倒计时功能以及禁用

五、模板引擎

如果需要修改的DOM对象太多,重复性的块元素又很多,那么可以定义一个模板引擎,只需要在大的布局下挖掉关键的信息,然后再往里面填信息就可以节省大量的代码。

项目地址:https://aui.github.io/art-template/

1. 基本用法

html中

注意:type='text/html'是必须的,若不写或者写text/javascript会被解析为 js代码。

要点:要写id,对应template方法的第一个参数名字;第二个参数是写传入的数据对象data,要按照API文档格式写。返回值是html结构的DOM元素。

2. 落网案例

要求

补充一个API网站,可用来练习:https://api.asilu.com/

补充内容1

如果在php里没有header来指定返回的数据格式,前端可以人为在JS里dataType加上。如:

补充内容2

如果要给多个DOM元素绑定一样的AJAX事件,可以通过ajaxStart来实现。同理ajaxComplete也可以实现。

3. 模板引擎原理

首先需要了解正则表达式的部分内容。

如果使用console.log(reg.test(str)),结果返回true。说明查找到可以替换的值。

console.log(reg.exec(str)),会返回一个数组:

78683c1ada80bf474e697f505cb59693.png

接下来就可以实现自己的模板引擎了。

要点是调用对象里的属性,可以通过对象名[属性名]的形式调用。

4. 模板引擎更多功能使用

1、{{if}}判断

格式为:

2、标签原文输出{{@value}}

格式为:

3、循环语句

格式:

5. 瀑布流布局插件

masonry使用文档:https://masonry.desandro.com/

六、同源与跨域

1. 同源

http://127.0.0.1/2017-8-17/09.waterFall_ajax/

http://127.0.0.1/2017-8-17/09.waterFall_ajax/api/waterFall.php

协议名:http一样、地址一样、端口号(默认是80端口)一样

上述三个条件一样称之为同源

2. 跨域

不同源:协议、地址、端口号,有一个不一样,称之为不同源

跨域:不同源的网站之前,互相发送请求称为跨域

解决方法datatype设置为jsonp

3. JSONP的原理

JSONP 就是利用了 src属性 支持跨域获取资源