初识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接口#

步骤:

  1. 选择请求的方式
  2. 填写请求的URL地址
  3. 填写请求的参数
  4. 点击Send按钮发起GET请求
  5. 查看服务器响应的结果

5.使用PostMan测试POST接口#

步骤:

  1. 选择请求的方式
  2. 填写请求的URL地址
  3. 选择Body面板并勾选数据格式
  4. 填写要发送到服务器的数据
  5. 点击Send按钮发起POST请求
  6. 查看服务器响应的结果

接口文档#

1.什么是接口文档#

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

2.接口文档的组成部分#

接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下6项内容,从而为接口的调用提供依据:

  1. 接口名称:用来标识各个接口的简单说明,如登录接口获取图书列表接口等。
  2. 接口 URL:接口的调用地址。
  3. 调用方式:接口的调用方式,如 GETPOST
  4. 参数格式:接口需要传递的参数,每个参数必须包含参数名称参数类型是否必选参数说明这4项内容。
  5. 响应格式:接口的返回值的详细描述,一般包括数据名称数据类型说明3项内容。
  6. 返回示例(可选):通过对象的形式,列举服务器返回数据的结构。

3.接口文档示例#

posted @   shumild  阅读(24)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示
主题色彩