初识Ajax
了解Ajax
什么是Ajax#
Ajax全称是Asynchronous Javascript And XML(异步JavaScript 和 XML)。
通俗的理解:在网页中利用XMLHttpRequest 对象和服务器进行 数据交互的方式,就是Ajax。
为什么要学Ajax#
Ajax能让我们轻松实现网页与服务器之间的数据交互
jQuery中的Ajax
了解jQuery中的Ajax#
浏览器中提供的XMLHttpRequest用法比较复杂,所以jQuery对XMLHttpRequest进行了封装,提供了一系列Ajax相关的函数,极大地降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法:
- $.get()
- $.post()
- $.ajax()
$.get()函数的语法#
jQuery中$.get()
函数的功能单一,专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。
$.get()函数的语法如下:
$.get(url,[data],[callback])
其中,三个参数各自代表的含义如下:
参数名 | 参数类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 要请求的资源地址 |
data | object | 否 | 请求资源期间要携带的参数 |
callback | function | 否 | 请求成功时的回调函数 |
$.get()发起不带参数的请求#
使用$.get()
函数发起不带参数的请求时,直接提供请求的URL地址和请求成功之后的回调函数即可,示例代码如下:
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
console.log(res)//这里的res是服务器返回的数据
})
$.get()发起带参数的请求#
使用$.get()
函数发起带参数的请求时,示例代码如下:
$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
console.log(res)
})
$.post()函数的语法#
jQuery中$.post()
函数功能单一,专门用来发起post请求,从而向服务器提交数据。
$.post()函数的语法如下:
$.post(url,[data],[callback])
其中,三个参数各自代表的含义如下:
参数名 | 参数类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 提交数据的地址 |
data | object | 否 | 要提交的数据 |
callback | function | 否 | 数据提交成功时的回调函数 |
$.post()向服务器提交数据#
使用$.post()向服务器提交数据的示例代码如下:
$.post('http://www.liulongbin.top:3006/api/addbook', //请求的URL地址
{bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'}, //提交的数据
function(res){ //回调函数
console.log(res)
})
$.ajax()函数的语法#
相比于$.get()
和$.post()
函数,jQuery中提供的$.ajax()
函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。
$.ajax()函数配置基本语法如下:
$.ajax({
type:'', // 请求的方式,例如 GET 或 POST
url:'', // 请求 URL 地址
data:{ }, // 这次请求要携带的数据
success:function(res){ } // 请求成功之后的回调函数
})
使用$.ajax()发起GET请求#
使用$.ajax()
发起GET请求时,只需要将type属性的值设置为 ‘ GET ’ 即可:
$.ajax({
type:'GET', // 请求的方式
url:'http://www.liulongbin.top:3006/api/getbooks', // 请求 URL 地址
data:{id:1}, // 这次请求要携带的数据
success:function(res){ // 请求成功之后的回调函数
console.log(res)
}
})
使用$.ajax()发起POST请求#
使用$.ajax()
发起POST请求时,只需将type属性的值设置为 ‘ POST ’ 即可:
$.ajax({
type:'POST', // 请求的方式
url:'http://www.liulongbin.top:3006/api/addbook', // 请求 URL 地址
data:{ // 要提交给服务器的数据
bookname:'水浒传',
author:'施耐庵',
publisher:'上海图书出版社'
},
success:function(res){ // 请求成功之后的回调函数
console.log(res)
}
})
接口
接口的概念#
使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式。
例如:
http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)
http://www.liulongbin.top:3006/api/addbooks 添加图书的接口(POST请求)
分析接口的请求过程#
1.通过GET方式请求接口的过程#
2.通过POST方式请求接口的过程#
接口测试工具#
1.什么是接口测试工具#
为了验证接口能否被正常访问,我们常常需要使用接口测试工具,来对数据接口进行检测。
好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用与测试。
2.下载并安装PostMan#
访问PostMan的官方下载网址https://www.getpostman.com/downloads/,下载所需的安装程序后,直接安装即可。
3.了解PostMan界面的组成部分#
PostMan界面的组成部分,从上到下,从左到右,分别是:
4.使用PostMan测试GET接口#
步骤:
- 选择请求的方式
- 填写请求的URL地址
- 填写请求的参数
- 点击Send按钮发起GET请求
- 查看服务器响应的结果
5.使用PostMan测试POST接口#
步骤:
- 选择请求的方式
- 填写请求的URL地址
- 选择Body面板并勾选数据格式
- 填写要发送到服务器的数据
- 点击Send按钮发起POST请求
- 查看服务器响应的结果
接口文档#
1.什么是接口文档#
接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,如何进行调用。
2.接口文档的组成部分#
接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下6项内容,从而为接口的调用提供依据:
- 接口名称:用来标识各个接口的简单说明,如登录接口,获取图书列表接口等。
- 接口 URL:接口的调用地址。
- 调用方式:接口的调用方式,如 GET 或 POST。
- 参数格式:接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
- 响应格式:接口的返回值的详细描述,一般包括数据名称、数据类型、说明3项内容。
- 返回示例(可选):通过对象的形式,列举服务器返回数据的结构。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性