Ajax编程

上网的目的？

聊天
看新闻
看视频
听音乐
购物
注册账号
…

上网的目的就是从网络当中获取/交互 数据资源

数据: 图片, 音频, 视频, 文件, 字符串等

什么是网络

用网线/无线信号 - 链接起来的一种互联的通信通道

在这里插入图片描述

so, 光缆一断, 损失千万

资源在哪？

资源存在于网络当中的一台计算机中存储资源的计算机的功能

接受并存储资源
提供资源

这样的计算机，叫做服务器。

服务器，本质就是一台计算机。只不过硬件比普通的电脑要好, 而且要24小时开机

服务器

服务器是用来接受存储资源, 提供资源的一台24小时开机性能较高的计算机(也有硬盘, CPU, 内存, 网络带宽)

客户端

个人电脑 / 个人平板 / 大屏幕 / 手机 / 智能家居 / 各种能接入网络的设备… 都可以叫客户端 (可以浏览 / 下载 / 使用服务器上的资源和数据的)

必备概念

URL

那怎么去访问某个服务器电脑里的资源呢, 怎么找到这台服务器电脑呢?

URL（全称是Uniform Resource Locator）统一资源定位符，用于标识互联网上每个资源的唯一存放位置。只有通过URL地址，才能确定位资源的存放位置，从而成功访问到对应的资源。

URL的作用，就是用于找到网络当中的资源

淘宝首页URL: https://www.taobao.com/

传智教研团队: http://www.itcast.cn/subject/about/index.html?about#page15

中国首都博物馆: http://www.capitalmuseum.org.cn/zlxx/zlxx.htm

阿里云服务器: https://www.aliyun.com/product/ecs?spm=5176

域名

域名(英语：Domain Name) 是由一串用点分隔的名字组成的, 标识网络中某台服务器的名字, 它只是一个好记的代号.

真正运行的时候, 域名是要被解析成IP地址才能在全球的网络中, 找到你想访问的那台服务器计算机.

so: 因为ip不好记, 才设计了一套域名的东西来使用, 真正网络中使用的都是ip地址

DNS服务

我们在使用域名请求资源之前, 都会通过DNS服务, 来吧域名转换成相应的IP后, 才会发起这次请求, 去这个IP以及拼接的路径上去寻找想要使用的资源

例如: 浏览器输入 http://www.baidu.com -> DNS会根据它自己记录的一一对应的地址, 给我们返回 39.156.69.79, 然后在网络里寻找这个地址对应的那台服务器建立连接

请求响应过程

在这里插入图片描述

浏览器输入网址，回车
DNS解析域名网址, 找到域名对应的IP
根据IP地址，在网络中, 找到网站服务器
浏览器（客户端）发送请求
服务器收到请求，处理这次请求
服务器做出响应，响应的是文件的源代码(网线传输的都是电流(高低电平), 然后收到后转成0和1, 然后转成字符串接收)
浏览器收到源代码，解析出来，就是一个页面

请求的分类

非Ajax（利用的是浏览器的本能）
- 浏览器地址栏输入网站，回车
- 点击超链接(新的地址, 也相当于重新执行了上面那个过程)
- 表单的提交
数据返回到浏览器被解析到页面上
Ajax请求（通过执行JS代码完成的请求）
- 点击按钮（搜索、登录、注册、上传）- 数据返回到代码处
- …

Ajax请求

Ajax是一种通过客户端执行一段JS代码，从而实现请求响应过程的技术

特点: 用户无感知, 异步, 不用刷新网页, 就可以把数据弄回来显示到页面上

Ajax请求和非Ajax请求的区别

非Ajax请求发送之后，页面会刷新。用户体验没有Ajax请求好。

Ajax请求，页面不会刷新，只是局部刷新，用户体验更快，更节省流量。

Ajax使用场景

用户名服务端验证
搜索智能提示
数据分页显示

必备能力

Network

会使用浏览器 - 检查 - Network里筛选出想要查看的请求

过滤请求

在这里插入图片描述

All – 查看所有请求
XHR – 查看ajax请求
JS – 查看请求的js文件
CSS – 查看请求的css文件
Img – 查看请求了哪些图片
Doc – 查看请求的html文件

查看完整的请求url

在这里插入图片描述

另一个查看位置

在这里插入图片描述

查看响应结果及预览效果

在这里插入图片描述

请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请。

get 用于获取服务端资源（向服务器要资源）

例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据字符串资源等
post 用于向服务器提交数据（往服务器发送资源）

例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

1. 使用Ajax

1.0 JQ - Ajax - 请求数据get - 无参

$.get方法，主要用于从服务器请求数据, 把数据请求回来

// get方式, 请求url地址, 得到返回的数据res
$.get('URL', function (res) {
    
    
    console.log(res)
})

1.1 JQ - Ajax - 请求数据get - 有参

给后端发送一个参数, 告诉后台要什么样的数据, 参数的名字后台定的, 值前端定
后台会根据前端传递的参数, 来决定返回什么数据

例如: 不想查询所有, 只想要id为多少的? 或者作者是谁相关的书籍? 那你得告诉后台id的值或作者的名字

// 例如: 请求id为1的书籍信息
// get方式, 在url后面拼接参数给后台, 格式?key=value
$.get('URL?id=1', function (res) {
    
    
    console.log("id为1的书籍");
    console.log(res);
})

// 例如: 请求author为曹雪芹的书籍信息 ?author=曹雪芹
$.get('URL?author=曹雪芹', function (res) {
    
    
    console.log("author为曹雪芹的书籍");
    console.log(res);
})

// 例如: 请求publisher出版商为北京图书出版社 ?publisher=北京图书出版社
$.get('URL?publisher=北京图书出版社', function (res) {
    
    
    console.log("publisher为北京图书出版社的书籍");
    console.log(res); // 2本书籍
})

// 例如: 请求publisher出版商为北京图书出版社并且id为1的书籍信息 ?publisher=北京图书出版社&id=1
$.get('URL?publisher=北京图书出版社&id=1', function (res) {
    
    
    console.log("id为1并且是北京图书出版社出版的书籍");
    console.log(res); // 1本书籍
})

// 总结:
// get传参, 需要在url网址后面用?标识一下, 从?往后的都是参数, 多对用&隔开
// 参数格式key=value&key=value

1.2 JQ - Ajax - 请求数据get - 写法优化

// $.get 通过对象方式传递get请求参数
// 参数一表示请求地址
// 参数二表示请求参数对象(jQ内部会自动把对象转成?key=value&key=value拼接在url后面)
// 参数三表示成功回调函数
// 先确定url地址(包括路径), 以及传递的参数名和值
$.get('URL', {
    
    
    id: 1,
    author: '吴承恩'
}, function (res) {
    
    
    console.log(res);
})

1.3 案例 - 输入书名 - 搜索相关信息

// 1. 按钮 - 点击事件
$("#btn").on("click", function () {
    
    
    // 2. 收集输入框的值 - 通过$.get()发给url并把值一起发给后台
    $.get('URL', {
    
    
        bookname: $("#bookName").val()
    }, function (res) {
    
     // 后台返回结果res
        if (res.data.length == 0) {
    
    
            $("#result").html("查无此书");
        } else {
    
    
            var arr = res.data;
            var str = ``;
            arr.forEach(function (obj) {
    
    
                let {
    
     author, publisher, bookname } = obj;
                str += `<p><span>作者: ${
      
      author}</span>  <span>出版社: ${
      
      publisher}</span> <span>书籍名: ${
      
      bookname}</span></p>`
            })
            $("#result").html(str);
        }
    })
})

get传参的位置(是在url的后面)

1.4 JQ - Ajax - 发送数据post - 有参

$.post方法，主要用于向服务器提交数据

post 提交的参数不会添加到url地址中，而是以【请求体】方式提交

在这里插入图片描述

$("#btn").on("click", function () {
    
    
    // 点击后, 发送一次POST请求, 把参数发给后台 - 后台会接收到值保存在数据库
    $.post('URL', {
    
    
        author: '施耐庵',
        bookname: '水浒传',
        publisher: '出版社',
        appkey: '7250d3eb-18e1-41bc-8bb2-11483665535a'
    }, function (res) {
    
    
        console.log(res);
    })
})

// 总结:
// Ajax请求方式:
// get - 拿数据
// post - 发数据

总结

get方式 - 为了从后台获取数据
post方法 - 为了发送数据给后台

1.5 JQ - $.ajax方法用法

$. a j a x 方法 - 相当于把$ .get和$.post的方法融合到一个方法里写了

配置对象里参数含义
- type - 请求方式 (get / post) - 不区分大小写
- url - 请求的后台地址
- data - 传递的参数(无论get/post) 都可以写在这里 - 值又是一个对象格式
- success - 接受成功的返回结果 - 是一个函数体

$("#btn").on("click", function () {
    
    
    // 1. get方式请求数据
    $.ajax({
    
    
        // 请求方式
        type: 'get',
        // 请求url地址
        url: 'url地址',
        // 传递参数
        data: {
    
    
            id: 1,
            autor: '吴承恩'
        },
        // 请求成功的回调函数 - res是后台返回数据
        success: function (res) {
    
    
            console.log(res);
        }
    })
})

$("#createBtn").on("click", function () {
    
    
    // 2. 提交数据给后台 - post方式
    $.ajax({
    
    
        // 请求方式
        type: 'post',
        // 请求url地址
        url: 'url地址',
        // 传递参数
        data: {
    
    
            author: '小传',
            bookname: 'web的自我修养',
            publisher: '出版社',
        },
        // 请求成功触发回调函数
        success: function (res) {
    
    
            console.log(res);
        }
    })
})

总结

其实get也能传递值给后台, 但是浏览器对长度进行限制, 有些8KB

post是后台限制的传输文件大小

后端接口

接口的概念

接口：之前我们提到的接口指的是API（本质上就是方法）

例如document身上的API

document.getElementById()

document.querySelectorAll()

例如console身上的API

console.log()

console.dir()

后面的方法就是API, 也叫接口, 也叫对象上的key, 或者叫对象身上的方法都行, 就是一个称呼而已

对于Ajax来说，我们提到的接口指的是URL地址

以前学JQ上的API有一个文档, 告诉你参数, 返回值, 以及这个API的作用

那么我们Ajax调用的API网址接口, 也得有一个说明文档 - 就叫接口文档 (一般由后台提供)

接口文档: 主要描述接口的相关信息，供前端使用

接口文档包括

接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
接口URL：接口的调用地址。
调用方式：接口的调用方式，如 GET 或 POST。
参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。以及每个key的解释

接口调试工具 - postman

通过工具测试后端的接口是否正常，不需要写代码

Postman
界面基本功能介绍
测试get请求

在这里插入图片描述

测试post请求

在这里插入图片描述

Vscode插件 - REST Client

下载插件然后新建.http结尾文件

使用规则

// 1. GET (不带参)
// 获取公共的所有图书信息
GET url/api/getbooks

// 每个请求之间必须用三个井号隔开
// 2. GET (带参数)
// 获取自己的所有图书信息
GET url?appkey=119_001_397


// 3. GET (带参数)
// 获取自己的, 书名叫小可爱的书籍
GET url?appkey=119_001_397&bookname=西游记

###
// 4. POST- application/json
// 必须要设置内容的类型, 下面才能写对象, 必须是JSON格式key必须是双引号
POST url
Content-Type: application/json; charset=UTF-8

{
    
    
    "author": "飞",
    "bookname": "来世",
    "publisher": "程序员出版社",
    "appkey": "119_001_397"
}

点击链接上的Send Request按钮, 即可发送一次Ajax请求

在这里插入图片描述

接口文档整理

查询图书, 新增图书, 根据ID删除图书 - 参考所有接口 - 学会整理接口文档

2. 案例 - 图书管理

前端通过Ajax发送请求（调用接口）给服务器
服务器处理请求，根据请求的路径再操作数据库（读取数据，添加、删除或者修改数据）
数据库的操作结果再通过后端返回给前端

在这里插入图片描述

增删改查 CRUD
- create 创建
- read 读取
- update 更新
- delete 删除
Bootstrap 界面布局采用 - 布局直接使用, 重点练习JS操作页面 - Ajax和后台交互
图书管理案例效果图
- 查询
- 添加
- 删除

在这里插入图片描述

2.1 案例 - 图书管理 - 初始化页面

这里把自己的appkey带上, 可以获取专属自己的数据

// 请求接口，获取所有的图书
function getBooks() {
    
    
    // 1.1 使用Ajax - 把数据请求回来
    $.ajax({
    
    
        url: 'http://123.57.109.30:3006/api/getbooks',
        data: {
    
    
            appkey: 'b7fc2560-5632-4da5-b625-58cff58c6b31'
        },
        type: 'get',
        success(res) {
    
    
            // 1.2 判断状态码 - 统一状态是200代表成功
            if (res.status == 200) {
    
    
                // 1.3 提取数据 - 铺设页面
                $(res.data).each(function (index, obj) {
    
    
                    $("#tb").append($(`<tr>
										<td>${
      
      obj.id}</td>
										<td>${
      
      obj.bookname}</td>
										<td>${
      
      obj.author}</td>
										<td>${
      
      obj.publisher}</td>
										<td>
										<a href="javascript:;" class="del" data-id="${
      
      obj.id}">删除</a>
										</td>
										</tr>`))
                })
            } else {
    
     // 1.4 如果不是200状态, 直接打印后台返回的错误提示
                alert(res.msg);
            }
        }
    });
}

// 1.5 网页打开 - 到这里直接调用
getBooks();

2.2 案例 - 图书管理 - 新增图书

// 2.1 写一段代码，请求接口，添加图书
$('#btnAdd').click(function () {
    
    
    // 2.2 获取输入框的值（三个）
    var bookname = $('#iptBookname').val().trim();
    var author = $('#iptAuthor').val().trim();
    var publisher = $('#iptPublisher').val().trim();
    // 2.3 判断不能为空，如果有一个为空，提示并终止代码继续执行
    if (bookname == '' || author == '' || publisher == '') {
    
    
        return alert('内容不能为空');
    }
    // 2.4 按照接口文档，调用添加书籍的接口，完成添加
    $.ajax({
    
    
        type: 'POST',
        url: 'http://123.57.109.30:3006/api/addbook',
        data: {
    
    
            bookname: bookname,
            author: author,
            publisher: publisher,
            appkey: 'b7fc2560-5632-4da5-b625-58cff58c6b31'
        },
        success: function (res) {
    
    
            if (res.status === 201) {
    
    
                // 2.5 添加成功
                // 添加成功的话，以前todolist案例-重新加载一遍是为了保证索引值能重新对上分配, 而现在每个商品有自己的唯一性的id, 所以就不用在重新铺设了(保证性能-所以以后基本能用id用id)
                var obj = res.data; // 接受后台返回插入成功的这个对象(带后台生成的id的)
                $("#tb").append($(`<tr>
<td>${
      
      obj.id}</td>
<td>${
      
      obj.bookname}</td>
<td>${
      
      obj.author}</td>
<td>${
      
      obj.publisher}</td>
<td>
<a href="javascript:;" class="del" data-id="${
      
      obj.id}">删除</a>
</td>
</tr>`))
            } else {
    
    
                // 添加失败
                alert('添加失败');
            }
        }
    });

});

2.3 案例 - 图书管理 - 删除图书

// 3.1 因为a是动态创建的, 所以在这里要执行 - 只能用事件委托, 不然得写在getBoods里面的下面 再绑定, 代码写在一起不好
$('#tb').on('click', '.del', function () {
    
    
    // 3.2 对于敏感操作，最好给一个提示（询问是否要删除）
    if (!confirm('你确定要删除吗，你好狠！')) {
    
    
        return;
    }
    // 3.3 如果确定是删除，按照接口，完成接口的要求
    var id = $(this).attr('data-id');
    $.delete('http://123.57.109.30:3006/api/delbook', {
    
     id: id, appkey: 'b7fc2560-5632-4da5-b625-58cff58c6b31' }, res => {
    
    
        // 不用判断，先给出提示(因为，无论成功还是失败，都要给出提示)
        alert(res.msg);
        // 判断，如果成功了，移除掉当前的这一行
        if (res.status === 200) {
    
    
            // 移除当前这一行
            $(this).parents('tr').remove();;
        }
    });
});

3. 案例 - 聊天机器人

3.1 案例 - 机器人 - 发送消息和获取消息

$(function () {
    
    
    // 1.1 发送按钮 - 点击事件
    $('#btnSend').on('click', function () {
    
    
        // 1.2 输入内容 - 为空阻止往下执行
        var text = $('#ipt').val().trim()
        if (text.length <= 0) {
    
    
            return; // 空内容阻止发送
        }
        // 1.3 如果用户输入了聊天内容，则将聊天内容追加到页面上显示
        $('#talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>' + text + '</span></li>')
        $('#ipt').val('') // 清空输入框
        // 重置滚动条的位置
        resetui()
        // 1.4 发起请求，获取聊天内容
        getMsg(text)
    })

    // 1.5 获取聊天机器人发送回来的消息
    function getMsg(text) {
    
    
        // 1.6 调用自己后台的接口
        $.ajax({
    
    
            type: 'GET',
            url: 'http://123.57.109.30:3006/api/robot',
            data: {
    
    
                spoken: text // 把我说的内容发给后台
            },
            success: function (res) {
    
    
                // 1.7 判断获取正确 - 把内容显示在左侧
                if (res.message === 'success') {
    
    
                    // 接收聊天消息
                    var msg = res.data.info.text
                    $('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>')
                    // 重置滚动条的位置
                    resetui()
                }
            }
        })
    }

    // 1.8 为文本框绑定 keyup 事件
    // 当用户按下键盘回车, 也是要发送消息
    $('#ipt').on('keyup', function (e) {
    
    
        if (e.keyCode === 13) {
    
    
            $('#btnSend').click()
        }
    })
})

3.2 案例 - 机器人 - 消息转为语音

<!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 -->
<audio src="" id="voice" autoplay style="display: none;"></audio>

// 2.0 把文字转化为语音进行播放
function getVoice(text) {
    
    
    // 2.1 语音文件,  还是要Ajax调用接口请求 (注意这次拿回来的是语音的url, 不是字符串数据了)
    $.ajax({
    
    
        type: 'GET',
        url: 'http://123.57.109.30:3006/api/synthesize',
        data: {
    
    
            text: text
        },
        success: function (res) {
    
    
            if (res.status === 200) {
    
    
                // 2.2 把语音消息的url, 设置给audio标签 - 播放语音
                $('#voice').attr('src', res.voiceUrl)
            }
        }
    })
}

面试题

ajax应用和传统web应用有什么不同（必会）

1.在传统的JavaScript编程中，需要重新加载整个页面来获取新的数据
2.使用ajax技术，展示给用户的还是同一个页面，局部刷新来接收新的数据

什么是AJAX，AJAX都有哪些优点和缺点？（必会）

AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术
ajax的优点：
　　1、最大的一点是页面无刷新，用户的体验非常好。
　　2、使用异步方式与服务器通信，具有更加迅速的响应能力。
　　3、减少服务器的负担
ajax的缺点：
　　1、ajax不支持浏览器back按钮。
　　2、安全问题 AJAX暴露了与服务器交互的细节。

Get和Post的区别？什么情况下用到（必会）

1）GET使用URL传参。而POST将数据放在BODY中。
2）GET的URL会有长度上的限制，则POST的数据则可以非常大(但是也得看后台设置)。
3）POST比GET安全，因为数据在地址栏上不可见。
最本质的区别
Get是用来从服务器上获得数据，而post是用来向服务器上传递数据。
本质上都是HTTP请求, 只是参数放置的位置不同。

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

前端与移动开发----Ajax编程----请求响应过程，请求的分类，Ajax，后端接口

Ajax编程

上网的目的？

什么是网络

资源在哪？

服务器

客户端

必备概念

URL

域名

DNS服务

请求响应过程

请求的分类

Ajax请求

Ajax请求和非Ajax请求的区别

Ajax使用场景

必备能力

Network

过滤请求

查看完整的请求url

查看响应结果及预览效果

请求方式

1. 使用Ajax

1.0 JQ - Ajax - 请求数据get - 无参

1.1 JQ - Ajax - 请求数据get - 有参

1.2 JQ - Ajax - 请求数据get - 写法优化

1.3 案例 - 输入书名 - 搜索相关信息

1.4 JQ - Ajax - 发送数据post - 有参

总结

1.5 JQ - $.ajax方法用法

总结

后端接口

接口的概念

接口调试工具 - postman

Vscode插件 - REST Client

接口文档整理

2. 案例 - 图书管理

2.1 案例 - 图书管理 - 初始化页面

2.2 案例 - 图书管理 - 新增图书

2.3 案例 - 图书管理 - 删除图书

3. 案例 - 聊天机器人

3.1 案例 - 机器人 - 发送消息和获取消息

3.2 案例 - 机器人 - 消息转为语音

面试题

ajax应用和传统web应用有什么不同（必会）

什么是AJAX，AJAX都有哪些优点和缺点？（必会）

Get和Post的区别？什么情况下用到（必会）

猜你喜欢