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 属性

上一篇:[linux] 查看所有的系统用户


下一篇:ajax笔记