[JavaScript知识库]关于Ajax

服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器

客户端

上网过程中，负责获取和消费资源的电脑，叫做客户端

URL地址

URL全称叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源

URL地址组成部分

1. 客户端与服务器之间的通信协议
2. 存有该资源的服务器名称
3. 资源在服务器上具体的存放位置

客户端与服务器的通信过程

1. 客户端请求服务器
2. 服务器处理此次请求，找到相关资源
3. 服务器把找到的资源，响应（发送）给客户端

注意：

客户端与服务器之间的通信工程，分为 请求 --?处理 -- 响应三个步骤

网页中的每一个资源，都是通过 请求 --?处理 -- 响应的方式从服务器获取回来的

请求数据

数据，也是服务器提供的一种资源

1. 客户端向服务器请求数据资源
2. 服务器处理此次数据请求
3. 把数据响应给客户端

要在网页上请求服务器上的数据资源，需要用到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接口：

1. 选择请求的方式
2. 填写请求的URL地址
3. 填写请求的参数
4. 点击Send按钮发起GET请求
5. 查看服务器响应的结果

使用PostMan测试POST接口

1. 选择请求的方式

2. 填写请求的URL地址

3. 选择Body面板并勾选数据格式

4. 填写要发送到服务器的数据

5. 点击Send按钮发起POST请求

6. 查看服务器响应的结果

接口文档

就是接口的说明文档，它是我们调用接口的依据，好的接口文档包含对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用

接口文档组成部分

1. 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口
2. 接口URL：接口的调用地址
3. 调用方式：接口的调用方式，如GET和POST
4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称，参数类型，是否必选，参数说明
5. 响应格式：接口的返回值的详细描述，一般包含数据名称，数据类型，说明三项内容
6. 返回示例：通过对象的形式，例举服务器返回数据的结构

form表单的基本使用

表单由三个基本部分组成：

1. 表单标签
2. 表单域
3. 表单按钮

<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模板引擎的基本使用

使用步骤：

1. 导入 art-template
2. 定义数据
3. 定义模板? ? HTML结构，必须定义到script中
4. 调用template函数
5. 渲染HTML结构

art-template标准语法

提供了 {{}} 这种语法格式，在{{}}内可以进行变量输出，或循环数组等操作，这种{{}}语法在art-template中被称为标准语法

标准语法-输出

在{{}}语法中，可以进行变量的输出，对象属性的输出，三元表达式的输出，逻辑或输出，加减乘除等表达式输出?

标准语法-原文输出

{{@ value}}

如果要输出的value的值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染

标准语法-条件输出

在{{}}中使用if...else if.../if的方式，进行按需输出

?标准语法-循环输出

在{{}}内，通过each语法循环数组，当前循环使用的索引使用$index进行访问，当前的循环项使用$value进行访问

标准语法-过滤器?

过滤器的本质，就是一个function处理函数?

{{value|filterName}}

过滤器语法类似管道操作符，它的上一个输出作为下一个输入

定义过滤器的语法：

?注意：过滤器一定要return一个值

模板引擎实现原理

正则与字符串操作

exec（）函数用于检索字符串中的正则表达式的匹配

如果有匹配值，返回该匹配值，如果没有返回null

分组

正则表达式中，（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

字符串中的replace（）函数

replace（）函数用于在字符串中用一些字符替换另一些字符