URL地址
URL地址的概念
URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置,浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。
URL地址的组成部分
URL地址一般由三部组成:
①客户端与服务器之间的通信协议
②存有该资源的服务器名称
③资源在服务器上具体的存放位置
客户端与服务器的通信过程
客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤。
如果要在网页中请求服务器上的数据资源,则需要用到XMLHttpRequest对象。
XMLHttpRequest (简称xhr)是浏览器提供的js成员,通过它可以请求服务器上的数据资源。
最简单的用法
var xhrObj = new XMLHttpRequest()
资源的请求方式
客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为get和post请求。
get 请求通常用于获取服务端资源(向服务器要资源)
例如:根据URL地址,从服务器获取HTML文件、Css 文件、js文件、 图片文件、数据资源等
post请求通常用于向服务器提交数据(往服务器发送资源)
例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作
Ajax
什么是Ajax
Ajax的全称是Asynchronous Javascript And XML (异步JavaScript 和XML)。
通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。
Ajax能让我们轻松实现网页与服务器之间的数据交互。
Ajax的典型应用场景
用户名检测:注册用户时,通过ajax的形式,动态检测用户名是否被占用。
搜索提示:当输入搜索关键字时,通过ajax的形式,动态加载搜索提示列表。
数据分页显示:当点击页码值的时候,通过ajax的形式,根据页码值动态刷新表格的数据。
数据的增删改查:数据的添加、删除、修改、查询操作,都需要通过ajax的形式,来实现数据的交互
jQuery中的Ajax
jQuery中发起Ajax请求最常用的三个方法如下:
$.get()函数的语法
jQuery中$.get()函数的功能单一, 专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。
$.get(ur1,[data],[callback])
$.get()发起不带参数的请求
使用$.get()函数发起不带参数的请求时,直接提供请求的URL地址和请求成功之后的回调函数即可。示例代码:
$.get('http://www.liulongbin.top:3006/api/synthesize', function (res) {
console.log(res) //这里的res是服务器返回的数据
})
$.get()发起带参数的请求
$.get('http://www.liulongbin.top:3006/api/synthesize',{id:1},function (res) {
console.log(res) //这里的res是服务器返回的数据
})
$.post()函数
jQuery中$.post()函数的功能单一, 专门用来发起post请求,从而向服务器提交数据。
$.post(url,[data],[callback])
$.ajax()函数的语法
$.ajax({
type:'', //请求的方式,例如GET或POST
url: '', // 请求的URL地址
data: { }, // 这次请求要携带的数据
success:function(res) { } //请求成功之后的回调函数
})
使用$.ajax()发起GET请求时,只需要将type属性的值设置为'GET'即可。
使用$.ajax(发起POST请求时,只需要将type属性的值设置为'POST’ 即可。
接口
使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式。
接口测试工具
什么是接口测试工具
为了验证接口能否被正常被访问,我们常常需要使用接口测试工具,来对数据接口进行检测。
接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试。
postman:可用apipost代替
使用PostMan测试GET接口
步骤:
1.选择请求的方式
2.填写请求的URL 地址
3.填写请求的参数
4.点击Send按钮发起GET请求
5.查看服务器响应的结果
使用PostMan测试GET接口
步骤:
1.选择请求的方式
2.填写请求的URL 地址
3.选择Body面板并勾选数据格式
4.填写要发送到服务器的数据
5.点击Send按钮发起POST请求
6.查看服务器响应的结果
接口文档
接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。
接口文档的组成部分
接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下6项内容,从而为接口的调用提供依据
1. 接口名称:用来标识各个接口的简单说明,如登录接口,获取图书列表接口等。
2.接口URL: 接口的调用地址。
3.调用方式:接口的调用方式,如GET或POST。
4.参数格式: 接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
5.响应格式: 接口的返回值的详细描述,-般包含数据名称、数据类型、说明3项内容。
(可选) :通过对象的形式,例举服务器返回数据的结构。
form表单的基本使用
表单在网页中主要负责数据采集功能。HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理。
表单由三个基本部分组成: 表单标签 表单域 表单按钮
<form>标签用来采集数据,<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
属性 |
值 |
描述 |
action |
URL地址 |
规定当提交表单时,向何处发送表单数据 |
method |
get或post |
规定以何种方式把表单数据提交到 action URL |
enctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
规定在发送表单数据之前如何对其进行编码 |
target |
_blank _self _parent _top framename |
规定在何处打开 action URL |
action
action 属性用来规定当提交表单时,向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址,这个 URL 地址专门负责接收表单提交过来的数据。
当 <form> 表单在未指定 action 属性值的情况下,action 的默认值为当前页面的 URL 地址。
注意:当提交表单后,页面会立即跳转到 action 属性指定的 URL 地址
target
target 属性用来规定在何处打开 action URL。
它的可选值有5个,默认情况下,target 的值是 _self,表示在相同的框架中打开 action URL。
值 |
描述 |
_blank |
在新窗口中打开。 |
_self |
默认。在相同的框架中打开。 |
_parent |
在父框架集中打开。(很少用) |
_top |
在整个窗口中打开。(很少用) |
framename |