相关概念基础
客户端-服务器交互模型
客户端（浏览器）发送请求到服务器
服务器返回资源给浏览器展示
URL地址格式
URL Uniform Resource Locator 统一资源定位符
-
URL地址的标准格式 schema://host:port/path?query#fragment
schema 协议 http/https/ftp...
host IP地址或者域名，用于区分互联网中的某一台电脑
port 端口 ，用于确定电脑中的某一个网络应用程序（http的默认端口是80）
path 路径，用于区分文件在服务器的位置
query 查询参数，?uname=lisi&age=12，用于向服务器传递查询条件
fragment hash或者锚点，用于定位网页的某个具体位置
服务端资源类型
服务器中所有的可以通过URL地址访问的内容都称之为【资源】
-
网页内部资源的组成
html标签
css样式
js代码
图片
字体图标
音频
视频
数据（重中之重）
......
浏览器调试工具基本用法
-
通过浏览器调试工具查看请求响应过程
网页中右键-->检查
快捷键 F12
-
页面中的相关资源查看方式
All 表示全部类型资源
XHR Ajax请求的资源（重中之重）
img 图片资源
js js文件链接资源
css css文件链接资源
Doc 表示网页本身的文件资源
如果客户端发送一个请求到服务器，服务器长时间没有返回内容
那么浏览器会处于等待状态（长时间空白），用户体验不好
为了改善用户体验，出现了Ajax（2005）
Ajax概述
Ajax：Asynchronous Javascript And Xml （异步 JavaScript 和 XML）
Ajax可以解决什么问题？
Ajax可以解决浏览器的等待问题（不出现空白效果）
Ajax是通过异步的方式请求服务器资源（传统的请求是同步方式）
同步和异步
同步和异步指的是交互的双方
-
张三叫李四去吃饭
方式一（同步阻塞）：李四说，稍等会儿，马上游戏就结束了，张三等李四把游戏玩完，然后一块去吃饭
方式二（异步不阻塞）：李四说，饿得顶不住了，我先去了，等你玩完游戏后去食堂的6号桌找我，一块吃饭。
-
浏览器向服务器发送请求
方式一（同步阻塞）：浏览器向服务器发送一个请求，如果服务器尚未返回资源，浏览器就等待，直到收到资源后才能展示
方式二（异步不阻塞）：浏览器向服务器发送一个请求，如果服务器尚未返回资源，浏览器不需要等待，而是接着做其他事情，等服务器返回资源后，通知浏览器一声，然后浏览器再显示页面。
Ajax应用场景
- 用户名服务端验证
$.ajax方法基本用法
原生js提供了XMLHttpRequest用于实现Ajax，用法比较繁琐，后续再做分析，先基于jQuery方法实现Ajax
-
$.ajax方法
-
type 请求方式 （GET 和 POST），不区分大小写
-
get主要目的获取服务器的资源，可以传递参数（作为条件）
- get请求参数自动添加到URL地址中
-
post主要目的向服务器提交数据
- post请求参数以请求体方式进行传递，不会添加到URL地址
-
url 请求地址
data 请求参数
-
dataType 相应数据类型
json 对象形式
text 普通字符串
success 服务器返回数据成功的回调函数
-
$.ajax({
type: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
success: function (data) {
// data表示服务器返回的结果
console.log(data)
}
})
其他Ajax相关方法
- $.get方法，主要用于向服务器查询资源
// 函数的参数严格保证顺序
// 参数一：表示请求地址
// 参数二：表示请求参数，参数可选
// 参数三：表示回调函数，服务器有返回时触发
$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 1}, function (res) {
$('#result').html(res.msg)
})
- $.post方法，主要用于向服务器提交数据
// 函数的参数严格保证顺序
// 参数一：表示请求地址
// 参数二：表示请求参数，参数可选
// 参数三：表示回调函数，服务器有返回时触发
$.post('http://www.liulongbin.top:3006/api/addbook', {bookname: '明朝那些事', author: '当年明月', publisher: '出版社'}, function (res) {
$('#result').html(res.msg)
})
接口的概念
接口：之前我们提到的接口指的是API（本质上就是方法）；对于Ajax来说，我们提到的接口指的是URL地址
-
接口核心信息
请求地址：URL地址
请求方式：GET 和 POST
请求参数：get方式通过URL传参；post方式通过请求体传参
响应结果数据：服务端返回的数据
接口调试工具
界面基本功能介绍
测试get请求
- 测试post请求
