# 客户端与服务器

# 服务器

# 概念

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

# 图解

# 客户端

# 概念

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

# 图解

# URL 地址

# URL 地址概念

URL（全称是 UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置

浏览器只有通过 URL 地址，才能准确定位资源的存放位置，从而成功访问到对应的资源

# URL 地址的组成部分

• 客户端与服务器之间的通信协议
• 存在该资源的服务器名称
• 资源再服务器上具体的位置

# 分析网页打开过程

# 图解客户端与服务器的通信过程

注意：

• 客户端与服务器之间的通信过程，分为请求 - 处理 - 响应 三个步骤
• 网页中的每一个资源，都是通过 请求 - 处理 - 响应方式从服务器获取回来的

# 基于浏览器的开发者工具分析

# 服务器对外提供了哪些资源

# 网页中如何请求数据

数据也是服务器对外提供的一种资源，只要是资源，必须通过请求 - 处理 - 响应 的方式进行获取

如果在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象

XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源

# 资源的请求方式

• get 请求通常用于获取服务端资源（向服务器要资源）
• post 请求通常用于向服务器提交数据（往服务器发送资源）

# 了解 Ajax

# Ajax 概述

Ajax 全程是 Asynchronous JavaScript And XML（异步 JavaScript 和 XML）

通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax

# Ajax 作用

Ajax 可以实现网页与服务器之间的数据交互

# jQuery 中的 Ajax

# 了解 jQuery 中的 Ajax

浏览器中提供的 XMLHttpRequest 用法复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关函数，极大降低了 Ajax 的使用难度

常用发起 Ajax 请求的三个方法

• $.get()
• $.post()
• $.ajax()

# $.get () 函数语法

# 用法及参数说明

jQuery 中 $.get () 函数的功能单一，专门发起 get 请求，从而将服务器上的资源请求到客户端进行使用

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

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

使用 $.get () 函数发起不带参数的请求时，直接提供请求的 URL 路径和请求成功后的回调函数

$.get('https://www.baozi:5201/api/getbooks',function(res){

    console.log(res);  // 这里的 res 是服务器返回的数据

})

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

使用 $.get () 函数发起带参数的请求时

$.get('https://www.baozi:5201/api/getbooks',{id: 1},function(){

    console.log(res);

})

# $.post () 函数的语法

# 用法以及参数说明

jQuery 中 $.post () 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据

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

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

$.post('https://www.baozi:5201/api/addbook',{bookname: 'baozi正传',author: 'baozi',publisher: '包子出版社'},function(res){

    console.log(res);

})

# $.ajax () 函数的语法

相比于前两种 get 和 post 方法，jQuery 提供了 $.ajax () 函数，是一个功能比较综合的函数

$.ajax({

    type: '',  // 请求的方式

    url: '',  // 请求的 URL 地址

    data: {}, // 这次请求携带的参数

    success: function(res){}  // 请求成功之后的回调函数

})

# 接口

# 接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口，同时，每个接口必须有请求方式

http://www.baozi:5201/api/getbooks 获取图书列表的接口（GET 请求）

http://www.baozi:5201/api/addbook 添加图书的接口（POST 请求）

# 分析接口的请求过程

# 通过 GET 请求接口的过程

# 通过 POST 方式请求接口的过程

# 接口文档

# 接口文档概念

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

# 接口文档的组成部分

• 接口名称：用来标识接口的简单说明，如登录接口，获取图书列表接口等
• 接口 URL：接口的调用地址
• 调用方式：接口的调用方式，如 GET 或 POST
• 参数格式：接口需要传递的参数，每个参数都必须包含参数名称，参数类型，是否必选，参数说明四项内容
• 响应格式：接口的返回值的详细描述，一般包含数据名称，数据类型，说明三项内容
• 返回示例：通过对象的返回形式，列举服务器返回数据的结构

# 接口文档示例