我的前端学习之路＜初识前后端交互＞

前后端交互

前后端数据通讯
从数据库中获取或提交内容
使用到的技术栈：ajax
ajax
async JavaScript and xml（严格意义上的html，闭合标签）
发送ajax
是有严格步骤

1，创建一个Ajax对象

语法：const 变量名(xhr) = new XMLHttpRequest

2，配置请求信息

语法：xhr.open(请求方式，请求地址，是否异步)
请求方式：严格按照接口文档书写
请求地址：严格按照接口文档书写
是否异步：默认true：表示异步
选填false：表示同步

3，发送请求

语法：xhr.send()
发送请求：同步发送
接收响应结果：这个过程是异步代码

4，注册一个响应函数

语法：xhr . onload = fuunction( ){ }
这个函数的执行时机：就是拿到响应结果后触发
如何拿到响应结果
语法：xhr . responseText
注意：一个ajax对象只能发送一个请求，如果还要继续发送就要继续创建ajax对象

ajax的异步问题

ajax默认是异步发送，但并不是每一步都是异步
总结：之前发送异步代码需要

ajax请求的状态码

用一个数字来表示当前ajax进行到哪一步
0：表示创建ajax请求成功
1：表示配置请求信息成功
2：表示请求已经成功（在浏览器中）
3：表示正在解析响应结果，但是未完全解析完毕
4：表示已经完全解析完毕，这个时候可以使用xhr . responseText

查看状态码

语法：ajax对象 . readyState
需要一个事件：
readyStatechange

ajax请求协议

http
https 加密请求
规定这个请求只能由前端发起，传递参数只能是字符串
协议内容
1，建立连接
浏览器和服务端建立链接
基于tcp/ip协议的三次握手
2，发送请求
必须以请求报文的形式发送
3，接收响应
由服务器返回
4，断开链接

请求方式

常见的请求方式
get：这是一种偏向于获取的语义
post：这是一种偏向于提交的语义
put：这是一种偏向于提交的语义（提交并保存）
patch：偏向于提交的语义(提交修改)
options：这是一种偏向于获取的语义
head：这是一种偏向于获取的语义
delete：偏向于删除的语义
content：偏向于保留的语义
经常使用的：
get
post

这两种方式的区别：

1，语义不同
	get：获取
	post：提交
2，传递参数的位置不同
	get传递参数在地址后面拼接
	post在请求体中书写
3，携带参数格式不同
	get  只能传递查询字符串
	post  可以是任意数据类型，但是要做出说明
		设置一个请求头，在请求头中做出说明
		语法：xhr . setRequestHeader(key , value)
			key的值：content-type
			value
				查询字符串：application / x-www-form-urlencoded
				json格式字符串：application/json
				二进制流：multipart/form-data

4，携带参数的大小不同
	get  最多只能2kb
	post  理论上没有限制，但是服务器会做限制
5，安全性：
	get  相对来说不安全（明文传输）
	post  相对来说比较安全（密文传输）