Ajax学习（1）引入+基础知识学习

引入

服务器

网络中负责存放和对外提供资源的电脑&＃xff0c;叫做服务器。可以简单把服务器理解为一台电脑&＃xff0c;但比个人电脑性能高。

客户端

网路中负责获取和消费资源的电脑&＃xff0c;叫做客户端。用户可以通过使用浏览器访问各种资源

URL地址

• 全称&＃xff1a;UniformResourceLocator&＃xff0c;中文&＃xff1a;统一资源定位符&＃xff0c;标识互联网上每个资源的唯一存放位置。浏览器通过URL地址&＃xff0c;确定位资源的存放位置&＃xff0c;从而访问到对应的资源。

• URL地址由三部分组成&＃xff1a;客户端与服务器之间的通信协议、存有该资源的服务器名称、资源在服务器上具体的存放位置。例如下图&＃xff08;来自网络&＃xff09;&＃xff1a;

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Z24oMFf-1649385616084)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20220406233145264.png)]

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

&＃xff08;图片来自网络&＃xff09;

简单来说就是请求–>处理–>响应

网页中请求数据的方式

网页中的数据是服务器提供的一种资源&＃xff0c;需要通过请求–>处理–>响应的方式进行获取。

网页请求服务器上的数据资源&＃xff0c;要用到 XMLHttpRequest 对象。**XMLHttpRequest&＃xff08;简称 xhr&＃xff09;**是浏览器提供的 js 成员&＃xff0c;通过它可以请求服务器上的数据资源。简单用法&＃xff1a; var xhrObj &＃61; new XMLHttpRequest()

资源的请求方式

客户端请求服务器最常见的两种请求方式为 get 和 post 请求。

&＃xff08;1&＃xff09;get 请求通常用于获取服务端资源
例如&＃xff1a;根据 URL 地址&＃xff0c;从服务器获取图片、文档等

&＃xff08;2&＃xff09;post 请求通常用于向服务器提交数据
例如&＃xff1a;登录和注册时向服务器提交的信息等

Ajax

简介

Ajax 的全称是 Asynchronous Javascript And XML&＃xff08;异步 Javascript 和 XML&＃xff09;。可以简单理解为在网页中使用 XMLHttpRequest 对象和服务器进行数据交互的方式&＃xff0c;就是Ajax。

Ajax的作用是实现网页与服务器之间的数据交互&＃xff1b;实际应用有

检测用户名是否被占用、输入搜索关键字会出现提示列表等等

了解jQuery中的Ajax

jQuery 对 XMLHttpRequest 进行了封装&＃xff0c;提供了一系列 Ajax 相关的函数&＃xff0c;我们能够较轻松地使用Ajax 。其中最常用的三个方法有&＃xff1a;$.get()、$.post()、 $.ajax()

$.get()函数的语法

发起 get 请求&＃xff0c;请求使用服务器上的资源。

语法&＃xff1a;

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

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

直接提供请求的 URL 地址和请求成功之后的回调函数即可&＃xff1a;

$.get(&＃39;url地址&＃39;, function(res) {console.log(res) // 这里的 res 是服务器返回的数据
})


&＃xff08;3&＃xff09;$.get()发起带参数的请求

$.get(&＃39;url地址&＃39;, { id: 1 }, function(res) {console.log(res)
})


$.post()函数的语法

发起 post 请求向服务器提交数据。

语法&＃xff1a;

&＃xff08;1&＃xff09;$.post(url, [data], [callback])

&＃xff08;2&＃xff09;$.post()向服务器提交数据

$.post(&＃39;url地址&＃39;, // 请求的URL地址{ xxx: &＃39;xxx&＃39;, xxx: &＃39;xxx&＃39;},function(res) { // 回调函数console.log(res)}
)


$.ajax()函数的语法

jQuery 中提供的 $.ajax()函数\&＃xff0c;功能比较综合\&＃xff0c;可以对Ajax请求进行更详细的配置。$.ajax() 函数的基本语法如下&＃xff1a;

$.ajax({type: &＃39;&＃39;, // 请求的方式&＃xff0c;例如 GET 或 POSTurl: &＃39;&＃39;, // 请求的 URL 地址data: { },// 这次请求要携带的数据success: function(res) { } // 请求成功之后的回调函数
})


&＃xff08;1&＃xff09;使用$.ajax()发起GET请求

$.ajax({type: &＃39;GET&＃39;, ...
})


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

$.ajax({type: &＃39;POST&＃39;, url: &＃39;&＃39;, data: { // 要提交给服务器的数据xxxx: &＃39;xxx&＃39;,xxxx: &＃39;xxx&＃39;,xxxx: &＃39;xxx&＃39;},success: function(res) { console.log(res)}
})


接口的概念

使用 Ajax 请求数据时&＃xff0c;被请求的 URL 地址&＃xff0c;就叫做数据接口&＃xff08;简称接口&＃xff09;&＃xff0c;每个接口必须有请求方式&＃xff08;get、post&＃xff09;。

接口测试工具:

postman, 安装地址&＃xff1a; https://www.getpostman.com/downloads/postman

汉化地址&＃xff1a;https://gitee.com/hlmd/PostmanCn

接口文档

接口文档包括&＃xff1a;

• 接口名称&＃xff1a;描述各个接口&＃xff0c;如登录接口。

• 接口URL&＃xff1a;接口的调用地址。

• 调用方式&＃xff1a;接口的调用方式&＃xff08;get、post&＃xff09;。

• 参数格式&＃xff1a;接口需要传递的参数&＃xff0c;每个参数必须包含参数名称、参数类型、是否必选、参数说明。

• 响应格式&＃xff1a;接口的返回值的详细描述&＃xff0c;一般包含数据名称、数据类型、以及说明。

• 返回示例&＃xff08;可选&＃xff09;&＃xff1a;例举服务器返回数据的结构和形式。

• 简单示例&＃xff08;来自网络&＃xff09;&＃xff1a;

  请求的根路径

  http://www.liulongbin.top:3006

  图书列表

  • 接口URL&＃xff1a; /api/getbooks
  • 调用方式&＃xff1a; GET
  • 参数格式&＃xff1a;

  参数名称	参数类型	是否必选	参数说明
  id	Number	否	图书Id
  bookname	String	否	图书名称
  author	String	否	作者
  publisher	String	否	出版社

  • 响应格式&＃xff1a;

  数据名称	数据类型	说明
  status	Number	200 成功&＃xff1b;500 失败&＃xff1b;
  msg	String	对 status 字段的详细说明
  data	Array	图书列表
  &＃43;id	Number	图书Id
  &＃43;bookname	String	图书名称
  &＃43;author	String	作者
  &＃43;publisher	String	出版社

  • 返回示例&＃xff1a;

  {"status": 200,"msg": "获取图书列表成功","data": [{ "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },{ "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },{ "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }]
}