javascript-前后端交互模式-简介

javascript-前后端交互模式-简介

---

目录

---

---

内容

---

• 图示0-1：

随着前后端分离，前后端交互技术不断更新，下面我们看下前后端交互相关知识。

1、相关知识

前端通过相关接口发送请求，后端接收请求，处理返回响应结果，前端接收响应结果，完成交互。

这里以ajax为例：

$.ajax({// 接口调用方式
            url: 'http://www.gaogzhen.com/books, // URL
            type: 'get', // 请求方式
			data: {uname: 'zhangsan', age: 32}, // 请求参数
			dataType: 'json', // 返回数据类型
            success(data) { // 请求成功执行的回调函数
                console.log(data);
                
            },
			error(err) { // 请求失败执行的回调函数
				console.log(err) 
			}
  })

这里我们主要介绍前后端交互中前端部分，相关知识：

• 异步调用：与同步先比，极大提高资源利用率
• 接口调用方式：见#2
• URL:全球统一资源定位，见#3
• 请求方式（HTTP协议）：自行查询相关文档
• JSON：传输数据的格式，自行查询相关文档
• Restful风格：详细自行查询相关文档

同步与异步，http协议，Restful风格编程，JSON这里不做详述，感兴趣的可以自行查阅相关文档。

2、异步接口调用方式

• 原生ajax：原生js
• 基于jQuery的ajax
• fetch：基于promise
• axios：基于promise与nodejs的第三方的前后端交互模块

现在使用较多的就是fetch和axios，所有，下面我们重点讲解。

3、URL地址

2.1、传统形式的URL

• 格式

    protocol://ip(域名):port/path?query#fragment
  

• 解析

	描述	示例
protocol	协议	http、https、ftp
ip/域名	域名或者IP地址	10.10.10.10 /www.gaogzhen.com
port	端口号，取值范围1~65535	http默认端口80，可以省略
path	路径（虚拟）	/java/web
query	查询参数	uname=zhangsan&age=20
fragment	锚点（哈希Hash)，用于定位页面的某个位置	#home

2.2、Restful 风格的URL

2.2.1、http请求方式

• GET: 查询
• POST:添加
• PUT:修改
• DELETE:删除
• OPTIONS:预检

2.2.3、示例：

• GET http://www.gaogzhen.com/books 查询图书
• POST http://www.gaogzhen.com/books/ 添加图书
• PUT http://www.gaogzhen.com/books/123 修改图书
• DELETE http://www.gaogzhen.com/books/123 删除图书

下一篇我们开始学习传统ajax的问题与Promise的优势。

后记 ：

本项目为参考某马视频全栈开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA