客户端与服务器
上网的本质目的:通过互联网的形式来获取和消费资源
服务器
上网过程中,负责存放和对外提供资源的电脑
客户端
上网过程中,负责获取和消费资源的电脑
URL地址
统一资源定位器,用于标识互联网上每个资源的唯一存放位置
组成部分:(http://www.liulongbin.top:3006/api/getbooks)
1.客户端与服务器之间的通信协议 http
2.存有该资源的服务器名称www.liulongbin.top:3006
3.资源在服务器上具体的存放位置api/getbooks
通信过程
请求--处理--响应
数据请求
网页中的数据也是服务器对外提供的一种资源
数据是网页的灵魂
网页请求服务器中数据资源,需用到XMlHttpRequest对象
XMlHttpRequest简称xhr是浏览器提供的js成员
最简单的用法:
var xhrObj=new XMlHttpRequest()
请求方式,常见的请求方式为get和post
get请求是获取服务端资源 例如:根据URL向服务器获取HTML文件、数据资源等
post请求是向服务器提交数据 例如:向服务器提交的登录信息、注册信息、用户信息等数据提交操作
Ajax
什么是Ajax:在网页中利用XMlHttpRequest对象和服务器进行数据交互的方式
全称Asynchronous JavaScript And XMl(异步JavaScript和XML)
Ajax能让我们轻松实现网页与服务器之间的数据交互
jQuery中的Ajax
因为浏览器中原生的XMlHttpRequest用法比较复杂,所以jQuery对XMlHttpRequest进行了封装,提供了一系列Ajax相关的函数,极大的降低了Ajax的使用难度
jQuery中发起Ajax请求的最常用的三个方法:
$.get()获取
$.get(url,[data],[callback])
url:要请求的资源地址
数据类型:string
data :请求资源期间要携带的参数
数据类型:object
callback :回调函数
数据类型:function
$.get()发起不带参数的请求,直接提供请求的URL地址和请求成功后的回调函数
$.get()发起带参数的请求,提供请求的URL地址和请求成功后的回调函数,通过参数筛选满足条件的属性
$.post)()发送
$.post(url,[data],[callback])
data是发送的数据
callback是响应回来的数据
$.ajax()既可以获取也可以发送
$.ajax({
type:'',//请求的方式,例如 GET或POST
url:'', //请求的 URL 地址
data:{ },//这次请求携带的数据
success:function(res){ }//请求成功之后的回调函数
})
接口
使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(接口)。
注:每个接口必须有请求方式
接口请求过程:请求--处理--响应
接口测试工具:
好处:不写任何代码,对接口进行调用和测试
下载并安装PostMan 官网:Download Postman | Get Started for Free 直接安装即可
接口文档:接口的说明文档,是我们调用接口的依据
接口文档可以包含很多信息,一个合格的接口文档应该包含:
接口名称:如--登录接口,获取图书列表接口等
接口URL:地址
调用方式:用GET还是POST
参数格式:需传递的参数--必须包含参数名称、参数类型、是否必选、参数说明
响应格式:返回值的详细描述--一般包含数据名称、数据类型、说明
返回示例(可选):通过对象的形式,列举服务器返回数据的结构
注:书写代码时,必须遵照接口文档内容书写(属性名、接口URL等)
form表单的基本使用
作用:主要负责数据采集功能
form标签的属性是用来规定如何把采集到的数据发送到服务器
action URL地址
规定当提交表单时,向何处发送表单数据
未指定action 属性值的情况下,action的默认值为当前页面的URL地址
注:当提交表单后,页面会立即跳转到action属性值指定的URL地址
<form action="/login">
<input type="text" name="email_or_mobile" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
method
规定以何种方式把表单数据提交到action URL
get 默认情况下
post 不会将提交的数据显示在URL中
注:get适合提交少量、简单的数据
post 适合提交大量、复杂、或包含文件上传的数据(常用)
<form action="/login" target="_self" method="GET">
<input type="text" name="email_or_mobile" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
enctype
规定在发送表单数据之前如何对其进行编码
application/X-www-form-urlencoded 默认情况,在发送前编码所有字符
multipart/form-data 不对字符编码 在使用包含文件上传控件的表单时必须使用该值
text/plain 空格转换为 ‘ +’ 加号,但不对特殊字符编码(很少用)
target
规定你在何处打开action URL
_self 默认情况下,表示在相同框架中打开action URL(常用)
_blank 在新窗口中打开(常用)
_parent 在父框架中打开
_top 在整个框架中打开
framename 在指定框架中打开
<form action="/login" target="_self">
<input type="text" name="email_or_mobile" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
表单的同步提交及缺点
点击submit按钮触发表单提交操作,页面跳转action URL的行为,叫做表单同步提交
缺点:
提交后,页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差,页面之前的状态和数据会丢失
解决方法:表单只负责采集数据,Ajax负责将数据提交到服务器
通过Ajax提交表单数据
<form id='form1'>
<input type='text' name='username'/>
<input type='password' name='password'/>
<button type='submit'>提交</button>
</form>
监听表单提交事件(submit)
$('#form1').on('submit', function(e) { //...其他代码 });
阻止表单的默认行为(跳转页面)
e.preventDefault();
当监听到的提交事件以后,调用对象的event.preventDefault()函数,阻止默认行为
快速获取表单中的数据 serialize()函数
$('#form1').serialize() //调用的结果: //username=用户的值&password=密码的值
注:在使用serialize()函数时,必须为每个表单元素添加name属