文章目录

一、客户端与服务器
二、网页中如何请求数据
三、资源的请求方式
四、Ajax
五、jQuery 中的 Ajax
- 5.1 `$.get()` 函数介绍
- 5.2 `post()` 函数介绍
- 5.3 `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);}})})})

$.ajax() 发起 post 请求

同上

六、接口

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

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口（get请求）
http://www.liulongbin.top:3006/api/addbook 添加图书的接口（post请求）

接口测试工具
PostMan
好处：接口测试工具能让我们在 不写任何代码 的情况下，对接口进行调用和测试

七、接口文档

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

Ajax + $ajax相关推荐

ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
vue+axios方法封装(restful,ajax)
this.$get({url: '',data: {},success: (data) => {}}) import qs from 'qs'// axios网络请求 function ajax ...
简易ajax,简单的AJAX实现(HELLO AJAX)
客户端部分: var ajax; function createAjax() { if(window.ActiveXObject) { try { return new ActiveXObject(& ...
jquery 循环执行ajax
var num = $val_ids.length;var i = -1;function ajax(){i++;if(i >= num){return ;}console.log('开始:'+ ...
SpringMVC——通俗易懂讲讲Ajax~
聊聊Ajax 一.什么是Ajax 二.iframe标签简单伪造Ajax 三.Ajax的实现 1. 基本概念的了解 Ajax的核心是什么? XMLHttpRequest是什么? Ajax数据传输的数据格 ...
通过jQuery调用ASP.NET的AJAX
传统上,在ASP.NET页面中实现AJAX的方法是拖放一个ScriptManager控件,并进行一系列的设置和相关编程.但事实上,这并不是理想的解决方案.使用jQuery来调用ASP.NET后台的方法 ...
与后台交互方法一 ——Ajax
一.Ajax:为无刷新读取服务器端数据,常用在用户注册.在线聊天室等. 使用Ajax读取数据时有以下几点需要注意: 1.字符集编码前后台要一致,否则前台显示的数据为乱码. 2.使用随机数或时间清除缓存 ...
Java项目:嘟嘟网上商城系统(java+jdbc+jsp+mysql+ajax)
源码获取:博客首页 "资源" 里下载! 一.项目简述功能: 商品的分类展示,用户的注册登录,购物车,订单结算, 购物车加减,后台商品管理,分类管理,订单管理等等功能. 二.项目 ...
Java项目:网上商城系统(java+jsp+servlert+mysql+ajax)
源码获取:博客首页 "资源" 里下载! 一.项目简述(+需求文档+PPT) 功能: 主页显示热销商品:所有商品展示,可进行商品搜索:点击商品进入商品详情页,显示库存,具有立即购买 ...

Ajax + $ajax

文章目录

一、客户端与服务器

二、网页中如何请求数据

三、资源的请求方式

四、Ajax

五、jQuery 中的 Ajax

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

5.2 `post()` 函数介绍

5.3 `ajax()` 函数介绍

六、接口

七、接口文档

Ajax + $ajax相关推荐

最新文章

热门文章

Ajax + $ajax

文章目录

一、客户端与服务器

二、网页中如何请求数据

三、资源的请求方式

四、Ajax

五、jQuery 中的 Ajax

5.1 $.get() 函数介绍

5.2 post() 函数介绍

5.3 ajax() 函数介绍

六、接口

七、接口文档

Ajax + $ajax相关推荐

最新文章

热门文章

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

5.2 `post()` 函数介绍

5.3 `ajax()` 函数介绍