第一节：Ajax 入门及环境

Ajax 介绍

全称：Asynchronous Javascript And XML

作用：获取服务器的数据

应用场景

1. 页面上拉加载更多数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
4. 搜索框提示文字下拉列表

运行环境

Ajax技术需要运行在网站环境中才能生效，当前课程会使用 Node 创建的服务器作为网站服务器。

总结：局部、异步刷新 （异步不阻塞、页面无刷新通信）

Ajax 运行原理及实现

运行原理：Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

服务器客户端与网络 通信协议

服务器与客户端

服务器：能够提供某种服务的电脑

客户端：想使用服务器所提供服务的电脑

网络：IP 域名

IP 地址： 在网络中是唯一的标识，通过IP 地址，能找到特定的服务器。

比如：百度服务器的 IP 地址为：180.101.49.12

域名： 相对于 IP 地址来讲，更方便记忆。

比如：百度域名：www.baidu.com

查看本机IP地址：
C:\Users\Admin> ipconfig

查找域名对应的 IP 地址（外网地址）

域名解析服务器：DNS

域名 通过 DNS，找到对应的 IP 地址

DNS 提供了 域名 与 IP 地址之间的映射关系。

访问服务器的流程：本机 hosts 文件 ==> DNS 服务器 ==> 服务器

端口

IP 是用来查找某一台服务器的，但是一台服务器可能提供很多种服务，我们找到这台服务器时，可以使用端口来访问对应的服务。

网站默认端口：80
180.101.49.12:80
数据库默认端口：3306
180.101.49.12:3306

通信协议

通信协议就是计算机交流时，事先规定好的规则。

常见的协议：

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

   • HTTP 协议 常用：请求头、请求体、响应头、响应体

2. FTP 文本传输协议

3. SMTP 简单邮件传输协议

   每个协议都是约定的一些规范，没必要深究。

^{@邮件协议示例}

Wamp 的安装和配置

Wamp 是 windows、apache、mysql、php 几个服务器软件的缩写。

作用：相当于一台本地服务器，可以在局域网内通过 IP 地址进行访问

服务安装

通过 官网地址 进行下载

配置文件

打开安装目录，把要展示的网页放到 wamp\www 文件夹下，通过 127.0.0.1 或者 localhost 进行访问本机服务器。

局域网内其他设备想要访问 本机服务器，则需要通过访问本机的 IP地址，才可以进行访问网页。

例如：192.168.1.102/index.html

调整局域网权限

在安装目录下找到 wamp\bin\apache\Apache2.4.4\conf\httpd.conf 配置文件

^{以上两种方法都可以打开该文件}

注意：修改配置文件之前一定要做文件备份，以免改毁文件无法撤回。

1. 配置文件显示 Deny from all，所以局域网内其他设备无法访问，所以要改为 Allow from all，保存文件。

2. 点击小图标，重启服务器，一定要重启服务。

到此，局域网内就可以对本地服务器进行访问。

更改网站根路径

如何不使用文件路径进行访问，可以进入 wamp\bin\apache\Apache2.4.4\conf\httpd.conf 配置文件 进行修改，将 DocumentRoot 的路径改为想要的路径即可。（两个路径都需要更改）

修改完配置文件后，保存并重启服务。更改后的路径就是网站要存放的地方。

虚拟主机配置

根据域名请求流程，访问域名时先访问本地 hosts 文件，再去访问 DNS 解析。

1. 打开 C盘，找 Windows\System32\Drives\etc\hosts 文件（打开时用 Notepad++ 管理员运行文件）
2. 在文件最后加上 本机IP地址 和 自定义的域名

此时，就可以通过自定义域名进行访问了。

一台服务器提供多个站点

打开安装目录，进入 wamp\bin\apache\Apache2.4.4\conf\httpd.conf 配置文件 进行修改，搜索关键字 Virtual hosts

1. 去掉 # ，并打开这个配置文件（ wamp\bin\apache\Apache2.4.4\conf\extra\httpd-vohsts.conf ）

2. 想要几个站点，就复制几份配置文件

复制出来的配置文件，只需要使用两个，多余的可以删掉。

3. 通过 自定义域名+网页名 就可以进行访问

   www.zhangsan.com/test.html
   

测试过程中想要在自己的电脑上访问（域名），则需要在 hosts 文件中进行配置。

在最后加上自定义域名

网址会进行域名重定向

请求类型

GET 请求

获取；如果向服务器发送请求，获取服务器的资源，使用GET方式。

• 获取页面中需要的数据（获取一个用户的信息）

POST 请求

邮寄（提交）。如果提交数据给服务器，那么使用POST方式。

POST 方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用。

添加、修改都可以使用 POST 请求，因为此类操作都会改变服务器上的资源。

• 登录、注册（提交账号和密码给服务器）

PUT 请求

PUT方法用请求有效载荷替换目标资源的所有当前表示。

修改操作可以选择使用 PUT 方式。

DELETE 请求

DELETE方法删除指定的资源。

删除操作可以使用 DELETE 方式。

jQuery 中封装的 Ajax 相关方法

引入脚本网络地址：https://www.bootcdn.cn/

$.get() 方法

$.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

参数一：请求资源地址。

/ 语法格式：
$.get(url, [data], [success], [datatype]);

参数	类型	含义
url	string	**必需。**请求的资源的地址，一般由后端同学提供 。
data	string|array|object	不必需。 请求参数，由后端同学设计。
success	function	不必需。请求成功后触发的回调函数，函数的形参为响应结果。
dataType	string	不必需。预期服务器响应数据的类型，一般不用设置。

获取数据

// 发送 get请求，获取数据
let btn = document.querySelector('button');

btn.addEventListener('click', (e = window.event) => {
    $.get('http://www.liulongbin.top:3006/api/getbooks', data => {
        // 打印响应结果
        console.log(data);
    })
})

获取某一条数据

链接后加查询条件
例如：'http://www.liulongbin.top:3006/api/getbooks?id=1'

删除某一条数据

链接后加删除条件
例如：'http://www.liulongbin.top:3006/api/delbooks?id=1'

btns[2].addEventListener('click', (e = window.event) => {
    $.get("http://www.liulongbin.top:3006/api/delbook?id=2", data => {
        console.log('当前删除数据：', data);
    })
})

删除当前所有数据

思路：

1. 获取当前所有元素的，存储到新数组中。
2. 循环当前数组，并删除当前元素下标为当前数组元素 id 值。

btns[3].addEventListener('click', (e = window.event) => {
    $.get("http://www.liulongbin.top:3006/api/getbooks", data => {
        let list = data.data;

        for(let i=0; i<list.length; i++) {
            $.get(`http://www.liulongbin.top:3006/api/delbook?id=${list[i].id}`, data => {
                console.log('当前删除数据：', data);
                console.log('删除成功');
            })
        }

    })
})

$.post 方法

用来添加数据。

参数一：请求资源地址。 参数二：请求参数。参数三：回调函数。

// 语法格式：
$.post(url, [data], [success], [datatype]);

// 发送 get请求，获取数据
let btns = document.querySelector('button');

btn[0].addEventListener('click', (e = window.event) => {
    $.get('http://www.liulongbin.top:3006/api/getbooks', data => {
        // 打印响应结果
        console.log(data);
    })
})

// 发送 post 请求，添加数据
btns[1].addEventListener('click', (e=window.event) => {
    // 定义要添加的数据
    let data = { bookname: "一个人就一个人", author: "刘同", publisher: "图书出版社" };
    $.post("http://www.liulongbin.top:3006/api/addbook", data, data => {
        console.log(data);
    })
})

$.ajax 方法

相当与 get 方法和 post 方法的封装。

type：不写默认是 get

执行不一样的操作时，要改链接后的 api 接口地址。

• url: 'http://www.liulongbin.top:3006/api/delbook?id=2',
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  

btns.addEventListener('click', (e = window.event) => {
    $.ajax({
        type: 'post',
        url: 'http://www.liulongbin.top:3006/api/addbook',
        data: { bookname: "一个人就一个人", author: "刘同", publisher: "图书出版社" },
        success: function (res) {
            console.log(res);
        }
    })
})

// res 表示返回的数据

接口及接口文档

接口

后端设计的接口。

接口是服务器提供的一个url地址，通过这个url地址，我们可以操作服务器上的资源。

通过Ajax技术向一个接口发送请求，也叫做调用接口。

接口文档

后端提供的接口使用手册。

包含内容	解释
接口说明	通过接口说明，大致了解到接口是干什么用的
接口的url	发送ajax请求，必要的条件
接口请求方式	发送ajax请求，必要的条件
请求参数	参数名称、数据类型、是否必填、参数说明等
响应格式
响应示例