一、服务器的基本概念与初识Ajax

目录

客户端与服务器

URL地址

jQuery中的Ajax

$.get()函数的语法

$.get()发起不带参数的请求

$.get()发起带参数的请求

$.post()函数的语法

$.post()向服务器提交数据

$.ajax()函数的语法

使用$.ajax()函数发起GET请求

使用$.ajax()函数发起POST请求

接口

接口测试工具PostMan

测试GET请求

测试POST请求

接口文档

---

客户端与服务器

服务器：上网过程中，负责存放和对外提供资源的电脑，叫做服务器

客户端：上网过程中，负责获取和消费资源的电脑，叫做客户端

URL地址

URL又叫统一资源定位符

URL地址一般由三部分组成

        1、客户端与服务器之间的通信协议

        2、存有该资源的服务器名称

        3、资源在服务器上的具体存放位置

jQuery中的Ajax

jQuery中发起Ajax请求最常用的三个办法：

        1、$.get()

        2、$.post()

        3、$.ajax()

$.get()函数的语法

  $.get(url, [data], [callback])

其中三个参数含义如下：

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

$.get()发起不带参数的请求

直接提供请求的URL地址和请求成功之后的回调函数

语法：

  //$.get('请求的URL地址'，回调函数)
  $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
        console.log(res)//这里的res是服务器返回的数据
  })

$.get()发起带参数的请求

语法：

  $.get('http://www.liulongbin.top:3006/api/getbooks', {id:1}, function(res){
      console.log(res)
  })

$.post()函数的语法

  $.post(url，[data], [callback])

三个参数代表的含义如下：（其中，[ ]只是表示非必选/可选）

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

$.post()向服务器提交数据

语法：

   //$.post('提交数据的地址',{提交的数据},回调函数)
  $.post('http://www.liulongbin.top:3006/api/addbook',//提交数据的地址
                      { bookname: '活着', author: '余华', publisher: '上海图书出版社', },//提交的数据
                      function (res) {
                          console.log(res)
                      }//回调函数

$.ajax()函数的语法

$.ajax()既可以发起get请求也可以发起post请求

语法：

  $.ajax({
      type: '',   //请求的方式，get或post
      url: '',    //请求的URL地址
      data: {},   //这次请求要携带的数据
      success: function(){}   //请求成功之后的回调函数
  })

使用$.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请求

只需要将type属性的值设置为'POST'

语法：

  $.ajax({
      type: 'POST',   //请求的方式
      url: 'http://www.liulongbin.top:3006/api/addbook',  //请求的URL地址
      data: {
          bookname: 'C语言程序设计',
           author: '谭浩强',
           publisher: '清华大学出版社',
      },  //要提交给服务器的数据
      success: function (res) {
          console.log(res)
      }   //请求成功之后的回调函数
  })

接口

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。同时每个接口都必须有请求方式（GET/POST）

接口测试工具PostMan

测试GET请求

选择请求方式 -> 填写请求的URL地址 -> 填写请求参数(非必填) -> Send发起GET请求 -> 查看服务器响应结果

测试POST请求

选择请求方式 -> 填写请求的URL地址 -> 选择body面板勾选数据格式(第3个) -> 填写要发送到服务器的数据 -> Send发起POST请求 -> 查看响应结果

接口文档

接口文档就是接口的说明文档，是我们调用接口的依据

接口文档组成部分

1. 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。

2. 接口URL：接口的调用地址。

3. 调用方式：接口的调用方式，如GET或POST。

4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。

5. 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。

6. 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。

接口文档示例：