Ajax01笔记

目标:服务器相关的基本概念;客户端和服务器的通信过程;Ajax应用场景;Jquery中Ajax函数请求数据;接口和接口文档的概念;

1. 客户端与服务器

刷微博
浏览新闻
在线听音乐
在线看电影
etc…
上网的本质目的:通过互联网的形式来获取和消费资源

1.2 服务器

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

在这里插入图片描述

1.3 客户端

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

2. URL地址

2.1 URL地址的概念

URL(全称是UniformResourceLocator)中文叫统一资源定位符,用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。
常见的URL举例:
http://www.baidu.com
http://www.taobao.com
http://www.cnblogs.com/liulongbinblogs/p/11649393.html

2.2 URL地址的组成部分

URL地址一般由三部组成:
① 客户端与服务器之间的通信协议
② 存有该资源的服务器名称
③ 资源在服务器上具体的存放位置
在这里插入图片描述

3. 客户端与服务器的通信过程

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

3.2 基于浏览器的开发者工具分析通信过程

在这里插入图片描述
在这里插入图片描述

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

4.1 例举网页中常见的资源

在这里插入图片描述

4.2 数据也是资源

  • 网页中的数据,也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。

4.3 数据是网页的灵魂

在这里插入图片描述

4.4 网页中如何请求数据

在这里插入图片描述
如果要在网页中请求服务器上的数据资源,则需要用到 XMLHttpRequest 对象。
XMLHttpRequest(简称 xhr)是浏览器提供的 js 成员,通过它,可以请求服务器上的数据资源。
最简单的用法 var xhrObj = new XMLHttpRequest()

4.5 资源的请求方式

客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 getpost 请求。

5.2 为什么要学Ajax

之前所学的技术,只能把网页做的更美观漂亮,或添加一些动画效果,但是,Ajax能让我们轻松实现网页与服务器之间数据交互
在这里插入图片描述

5.3 Ajax的典型应用场景

用户名检测:注册用户时,通过 ajax 的形式,动态检测用户名是否被占用
在这里插入图片描述

5.3 Ajax的典型应用场景

搜索提示:当输入搜索关键字时,通过 ajax 的形式,动态加载搜索提示列表
在这里插入图片描述
数据分页显示:当点击页码值的时候,通过 ajax 的形式,根据页码值动态刷新表格的数据
在这里插入图片描述
数据的增删改查:数据的添加、删除、修改、查询操作,都需要通过 ajax 的形式,来实现数据的交互
在这里插入图片描述

6. jQuery中的Ajax

6.1 了解jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂,所以 jQuery 对 XMLHttpRequest 进行了封装,提供了一系列 Ajax 相关的函数,极大地降低了 Ajax 的使用难度
jQuery 中发起 Ajax 请求最常用的三个方法如下:

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

6.2 $.get()函数的语法

  • jQuery 中 $.get() 函数的功能单一,专门用来发起 get 请求,从而将服务器上的资源请求到客户端来进行使用。 $.get()
    函数的语法如下:
$.get(url, [data], [callback])

其中,三个参数各自代表的含义如下:
在这里插入图片描述

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

使用 $.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)
})

6.3 $.post()函数的语法

Query 中 $.post() 函数的功能单一,专门用来发起 post 请求,从而向服务器提交数据。
$.post() 函数的语法如下:

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

其中,三个参数各自代表的含义如下:
在这里插入图片描述

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

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
   { bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据
   function(res) { // 回调函数
      console.log(res)
   }
)

6.4 $.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({
   type: 'POST', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
   data: { // 要提交给服务器的数据
      bookname: '水浒传',
      author: '施耐庵',
      publisher: '上海图书出版社'
    },
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

7.接口

7.1 接口的概念

使用 Ajax 请求数据时,被请求的 URL 地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式
例如:
http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)
http://www.liulongbin.top:3006/api/addbook 添加图书的接口(POST请求)

7.2 分析接口的请求过程

  • 通过GET方式请求接口的过程
    在这里插入图片描述
  • 通过POST方式请求接口的过程
    在这里插入图片描述

7.3 接口测试工具

  • 什么是接口测试工具
    为了验证接口能否被正常被访问,我们常常需要使用接口测试工具,来对数据接口进行检测。
    好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用测试
    在这里插入图片描述
    访问 PostMan 的官方下载网址 https://www.getpostman.com/downloads/,下载所需的安装程序后,直接安装即可。
  • 了解PostMan界面的组成部分
    -

7.4 使用PostMan测试GET接口

在这里插入图片描述

7.5 使用PostMan测试POST接口

在这里插入图片描述

7.6 接口文档

1. 什么是接口文档
接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。
2. 接口文档的组成部分
接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下6项内容,从而为接口的调用提供依据:

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

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

  3. 调用方式:接口的调用方式,如 GET 或 POST。

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

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

  6. 返回示例(可选):通过对象的形式,例举服务器返回数据的结构。

3. 接口文档示例

请求的根路径

http://www.liulongbin.top:3006

请求的根路径

http://www.liulongbin.top:3006

图书列表

  • 接口URL: /api/getbooks
  • 调用方式: GET
  • 参数格式:
参数名称参数类型是否必选参数说明
idNumber图书Id
booknameString图书名称
authorString作者
publisherString出版社
  • 响应格式:
数据名称数据类型说明
statusNumber200 成功;500 失败;
msgString对 status 字段的详细说明
dataArray图书列表
+idNumber图书Id
+booknameString图书名称
+authorString作者
+publisherString出版社
  • 返回示例:
{
  "status": 200,
  "msg": "获取图书列表成功",
  "data": [
    { "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },
    { "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },
    { "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }
  ]
}

添加图书

  • 接口URL: /api/addbook
  • 调用方式: POST
  • 参数格式:
参数名称参数类型是否必选参数说明
booknameString图书名称
authorString作者
publisherString出版社
  • 响应格式:
数据名称数据类型说明
statusNumber201 添加成功;500 添加失败;
msgString对 status 字段的详细说明
  • 返回示例:
{
    "status": 201,
    "msg": "添加图书成功"
}

删除图书

  • 接口URL: /api/delbook
  • 调用方式: GET
  • 参数格式:
参数名称参数类型是否必选参数说明
idNumber图书Id
  • 响应格式:
数据名称数据类型说明
statusNumber200 删除成功;500 未指定要删除的图书Id;501 执行Sql报错;502 要删除的图书不存在;
msgString对 status 字段的详细说明
  • 返回示例:
{
    "status": 200,
    "msg": "删除图书成功!"
}

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数: gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点: 完后运行,r gdb 中的有用命令 下面是一个有用的 gdb 命令子集,按可能需要的顺序大致列出。 第一列给出了命令,可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布: 一元高斯分布:(将多元高斯分布中的D取值1) 其中代表的是平均值,是方差的平方,也可以用来表示,是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要,需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容,经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch ,简称ES 。是一个全文搜索服务器,也可以作为NoSQL 数据库,存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项: (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候,访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议:以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么? 在java规范中是这样描述的:Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联,线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口,远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统: 微信小程序——辩论管理前台涉及技术:WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能,出了大概一年了。 程序员们在编程时遇到不会的问题,又没有老师可以提问,就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法,但是不一定得到回复,…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎,题目很狗,第一次踩这个坑,单拉出来写个题解记录一下 题意:给一个数字矩阵,一次操作:对于每一行,可以去掉左端或者右端的数,得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1)全特化2)偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类: 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…