Ajax + $ajax

Posted 2021-07-19 鲸渔要加油

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax + $ajax相关的知识，希望对你有一定的参考价值。

文章目录

一、客户端与服务器
二、网页中如何请求数据
三、资源的请求方式
四、Ajax
五、jQuery 中的 Ajax
六、接口
七、接口文档

一、客户端与服务器

1. URL地址的概念&组成

URL的概念
URL（全称是 UniformResourceLocator）中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源

URL的组成

三部分

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

2. 客户端与服务器通讯过程

请求-处理-响应

二、网页中如何请求数据

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

最简单的用法 var xhrObj = new XMLHttpRequest()

三、资源的请求方式

客户端请求服务器时，请求的方式 有很多种，最常见的两种请求方式分别是 get 和 post 请求

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

四、Ajax

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

五、jQuery 中的 Ajax

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

$.get() get方式请求，用于获取数据
$.post() post方式请求，用于提交数据
$.ajax() 比较综合，既可以获取数据，又可以提交数据

5.1 `$.get()` 函数介绍

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

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

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

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

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

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

5.2 `post()` 函数介绍

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

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

5.3 `ajax()` 函数介绍

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

$.ajax() 发起 get 请求

 $(function () {
     $('.btn').on('click', function () {
         $.ajax({
             type: 'GET',
             url: 'http://www.liulongbin.top:3006/api/getbooks',
             data: {id: 1},
             success: function(a){
                 console.log(a);
             }
         })
     })
 })