服务器
上网过程中,负责存放和对外提供资源的电脑,叫做服务器
客户端
上网过程中,负责获取和消费资源的电脑,叫做客户端
URL地址
URL全称叫统一资源定位符,用于标识互联网上每个资源的唯一存放位置,浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源
URL地址组成部分
- 客户端与服务器之间的通信协议
- 存有该资源的服务器名称
- 资源在服务器上具体的存放位置
客户端与服务器的通信过程
- 客户端请求服务器
- 服务器处理此次请求,找到相关资源
- 服务器把找到的资源,响应(发送)给客户端
注意:
客户端与服务器之间的通信工程,分为 请求 -- 处理 -- 响应三个步骤
网页中的每一个资源,都是通过 请求 -- 处理 -- 响应的方式从服务器获取回来的
请求数据
数据,也是服务器提供的一种资源
- 客户端向服务器请求数据资源
- 服务器处理此次数据请求
- 把数据响应给客户端
要在网页上请求服务器上的数据资源,需要用到XMLHttpRequest对象
xhr是浏览器提供的js成员,通过它,可以请求服务器上的数据资源
用法:var xhrObj = new XMLHttpRequest()
资源的请求方式
最常见的是 get 和 post 请求
- get请求通常用于获取服务器资源(向服务器要资源)
例如:根据URL地址,从服务器获取HTML文件,css文件,js文件
- post请求通常用于向服务器提交数据(往服务器发送资源)
例如:登录时向服务器提交的登录信息
Ajax
在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式
jQuery中发起请求的常用方法
- $.get()
$.get(url,[data],[callback])
- $.post()
$.post(url,[data],[callback])
- $.ajax()
接口
使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口),每个接口必须有请求方式
使用PostMan测试GET接口:
- 选择请求的方式
- 填写请求的URL地址
- 填写请求的参数
- 点击Send按钮发起GET请求
- 查看服务器响应的结果
使用PostMan测试POST接口
-
选择请求的方式
-
填写请求的URL地址
-
选择Body面板并勾选数据格式
-
填写要发送到服务器的数据
-
点击Send按钮发起POST请求
-
查看服务器响应的结果
接口文档
就是接口的说明文档,它是我们调用接口的依据,好的接口文档包含对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用
接口文档组成部分
- 接口名称:用来标识各个接口的简单说明,如登录接口,获取图书列表接口
- 接口URL:接口的调用地址
- 调用方式:接口的调用方式,如GET和POST
- 参数格式:接口需要传递的参数,每个参数必须包含参数名称,参数类型,是否必选,参数说明
- 响应格式:接口的返回值的详细描述,一般包含数据名称,数据类型,说明三项内容
- 返回示例:通过对象的形式,例举服务器返回数据的结构
form表单的基本使用
表单由三个基本部分组成:
- 表单标签
- 表单域
- 表单按钮
<form>标签属性
1、action
用来规定当提交表单时,向何处发送表单数据
action属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据
当<form>表单在未指定 action 属性值的情况下,action默认值是当前页面的URL地址
注意:
当提交表单后,页面会立即跳转到action属性指定的URL地址
2、target
用来规定在何处打开 actionURL
3、method
用来规定以何种方式把表单数据提交到 action URL 可选值有两个,get和post
注意:
get方式适合用来提交少量的,简单的数据
post用来提交大量的,复杂的,包括文件上传的数据
4、enctype
用来规定在发送表单数据之前如何对数据进行编码
注意:
在涉及到文件上传时,必须将enctype的值设置成 multipart/form-data
表单同步提交
缺点:
页面会发生跳转
页面之前状态和数据会丢失
解决方案:表单只负责采集数据,用Ajax提交数据到服务器
监听表单提交事件
阻止表单默认提交行为
当监听到表单提交事件后,调用事件对象的event.preventDefault()函数,阻止表单的提交和页面的跳转
快速获取表单中的数据
serialize()函数
可以一次性获取到表单中所有数据的值,必须为每个表单元素添加name属性
模板引擎
根据程序员指定的模板结构和数据,自动生成完整HTML页面
好处:
- 减少字符串的拼接操作
- 使代码结构更清晰
- 使代码更易阅读和维护
art-template模板引擎的基本使用
使用步骤:
- 导入 art-template
- 定义数据
- 定义模板 HTML结构,必须定义到script中
- 调用template函数
- 渲染HTML结构
art-template标准语法
提供了 {{}} 这种语法格式,在{{}}内可以进行变量输出,或循环数组等操作,这种{{}}语法在art-template中被称为标准语法
标准语法-输出
在{{}}语法中,可以进行变量的输出,对象属性的输出,三元表达式的输出,逻辑或输出,加减乘除等表达式输出
标准语法-原文输出
{{@ value}}
如果要输出的value的值中,包含了HTML标签结构,则需要使用原文输出语法,才能保证HTML标签被正常渲染
标准语法-条件输出
在{{}}中使用if...else if.../if的方式,进行按需输出
标准语法-循环输出
在{{}}内,通过each语法循环数组,当前循环使用的索引使用$index进行访问,当前的循环项使用$value进行访问
标准语法-过滤器
过滤器的本质,就是一个function处理函数
{{value|filterName}}
过滤器语法类似管道操作符,它的上一个输出作为下一个输入
定义过滤器的语法:
注意:过滤器一定要return一个值
模板引擎实现原理
正则与字符串操作
exec()函数用于检索字符串中的正则表达式的匹配
如果有匹配值,返回该匹配值,如果没有返回null
分组
正则表达式中,()包起来的内容表示一个分组,可以通过分组来提取自己想要的内容
字符串中的replace()函数
replace()函数用于在字符串中用一些字符替换另一些字符