AJAX笔记

服务器:存放和对外提供资源 的电脑
客户端:负责 获取和消费资源 的电脑

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

URL地址一般由三部分组成:
客户端与服务器之间的--通信协议
存有该资源的 --服务器名称
资源在服务器---具体存放位置

客户端与服务器之间的通讯过程，
分为： 请求  -  处理   -   响应 三个步骤
网页中每一个资源，都是通过 请求-处理-响应 的方式从服务器获取回来的
网页中的数据，也是服务器对外提供的一种资源，例如股票数据，各行业排行榜等
如果要在网页中请求服务器上的数据资源，需要用到 XMLHttpRequest 对象

客户端请求服务器时，请求的方式 有很多种，最常见的两种请求方式分别是 get 和 post 请求
get 请求 ，通常用于 获取服务器资源（要资源）
例如：根据 URL 地址，从服务器获取 HTML 文件、 css 文件、 js 文件、图片文件、数据资源等
post 请求 ，通常用于 向服务器提交数据（送资源）
例如：登录时，向服务器 提交登录信息、注册时向服务器 提交注册信息、添加用户时向服务器 提
交用户信息等各种 数据提交操作

什么是Ajax
Ajax 的全称是 Asynchronous JavaScript And XML （异步 JavaScript 和 xml ）
通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax

为什么要学Ajax
之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但还是， Ajax 能让我们轻松实
现 网页 与 服务器之间的 数据交互

应该用场景:
用户名检测
搜索提示
数据分页显示
数据的增删改查

jQuery中的Ajax
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，
提供了一系列Ajax相关的函数，极大地 降低了Ajax的使用难度
jQuery 中发起 Ajax 请求最常用的三个方法如下：
$.get() get方式请求，用于获取数据
$.post() post方式请求，用于提交数据
$.ajax() 比较综合，既可以获取数据，又可以提交数据

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户
端来进行使用
$.get()发起不带参数的请求,使用 $.get() 函数 发起不带参数的请求时，直接提供给 请求的 URL 地址 和 请求成功之后的回调函数 即
可，示例代码如下

$.get(url,[data],[callback])
$.post(url,[data],[callback])
$.ajax({
type:''---请求方式:post或get
url:''-----URL地址
data:{}---这次请求要携带的数据
success:function(res){}----请求成功之后的回调函数
})

接口的概念:使用 Ajax 请求数据时，被请求的 URL 地址，就叫做 数据接口（简称接口）。同时，每个接口必须有
请求方式
如:http://www.liulongbin.top:3006/api/delbook

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

接口文档的组成部分:
接口名称
接口URL
调用方式
参数格式
响应格式
返回示例（可选）

接口测试工具:Postman  ,
为了验证接口是否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测

表单:表单在网页中主要负责 数据采集功能,就是用于采集用户输入的信息，并通过
<form> 标签的提交操作，把采集的信息提交到服务器端进行处理

表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传
框等等
表单按钮：通过设置 type 属性为 submit 来触发 form 表单的提交

<form> 标签的属性
1. action
action 属性用来规定当提交表单时，向何处发送表单数据。 action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。
当 <form> 表单在未制定 action 属性值的清空下， action 的默认值为当前页面的 URL 地址

2.target 属性用来规定 在何处打开 action URL
它的可选值有5个，默认情况下，target的值是 _self，表示在相同的框架中打开 action URL
_blank,在新窗口打开

3.method method 属性用来规定 以何种方式 把表单数据提交到 action URL
它的可选值有两个，分别是 get 和 post
默认情况下， method 的值为 get ， 表示通过 URL 地址的形式，把表单数据提交到 action URL
get 方式适合用来提交少量的，简单的数据
post 方式适合用来提交大量的，复杂的，或包含文件上传的数据

4,.enctype enctype 属性用来规定在 发送表单数据之前如何对数据进行编码
它的可选值有三个，默认情况下， enctype 的值为 application/x-www-form-urlencoded ，表示在发
送前编码的所有字符

什么是表单的同步提交
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同
步提交
表单同步提交的缺点
<form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很
差<form> 表单同步提交后，页面之前的状态和数据会丢失
如何解决呢？
表单只复杂采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据
1.监听表单提交事件:$('#form').on('submit',functiob(e){
2.//阻止表单的提交和页面的跳转
e.preventDefault()
}
3.如何快速获取表单数据(⭐⭐⭐) serialize() 函数
$(selector).serialize() ------好处：可以一次性获取表单的数据
注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性