106 lines
2.4 KiB
Plaintext
106 lines
2.4 KiB
Plaintext
|
||
|
||
ajax
|
||
|
||
是什么？：是一种无刷新的前后端数据交换通讯的技术
|
||
|
||
XMLHttpRequest 第一代发送ajax的方法
|
||
fetch 下一代全新的发送ajax的方法
|
||
|
||
发送的是：HTTP 请求
|
||
四种请求方式：
|
||
|
||
GET 表示的是找服务器 要 资源的意图
|
||
name '刘兵'
|
||
age 18
|
||
|
||
是把参数放在网址后面，传给后端
|
||
http://a.com/index.php?name=刘兵&age=18
|
||
|
||
POST 表示的是 给 服务器 数据的意图
|
||
是把参数放在请求体里面给后端
|
||
json（{ name: '刘兵', age: 18 }） 表单（name=刘兵&age=18）
|
||
|
||
PUT 表示的是 更新 服务器 数据的意图
|
||
DELETE 表示的是 删除 服务器 数据的意图
|
||
|
||
|
||
OPTIONS 预检查请求
|
||
|
||
ajax数据格式：
|
||
|
||
xml
|
||
json 对象，数组，对象和数组的组合
|
||
|
||
JSON.stringify 将数组或对象转换为字符串格式
|
||
JSON.parse 将字符串格式的数组或对象转换为真正的数组或对象
|
||
|
||
|
||
ajax（http） 请求
|
||
请求头
|
||
响应头
|
||
请求体
|
||
|
||
老旧：
|
||
|
||
服务端渲染
|
||
|
||
后端把网页的html直接做好后，交给浏览器来实现
|
||
|
||
（80%）后端：修改页面（20%），数据库，写功能和后端代码 10k
|
||
|
||
（20%）前端：写页面 3k
|
||
|
||
|
||
劣势：
|
||
|
||
项目里面混合了前后端多种语言，导致修改页面和增加功能的时候成本很高
|
||
|
||
|
||
现在：
|
||
|
||
前后端分离
|
||
|
||
（50%）后端：数据库，接口，后端代码 10k
|
||
|
|
||
|--- ajax（电话）
|
||
|
|
||
（50%）前端：写页面，写功能，做路由 10k
|
||
|
||
|
||
|
||
ajax 在使用的时候一般会遇到跨域错误
|
||
|
||
|
||
浏览器会对前后端的网址进行安全（同源策略CORS）检查
|
||
|
||
1：协议
|
||
2：域名
|
||
3：端口
|
||
|
||
|
||
http https ws wss file
|
||
|
||
前端：http://b.com:9090/index
|
||
|
||
后端：http://a.com:8080/api/json/index
|
||
|
||
什么叫 跨域 (绕过浏览器的同源策略)？
|
||
解决跨域：
|
||
|
||
1：后端设置cors允许跨域请求
|
||
|
||
主要实现：后端设置响应头字段 Access-Control-Allow-Origin 为 前端的访问地址
|
||
|
||
【不用了】 2：jsonp 把ajax请求的地址放到script src中，变成js资源文件请求，通过callback回调拿回数据
|
||
|
||
|
||
3: 服务端代理
|
||
|
||
A ---> B
|
||
|
||
|
||
A ----> C ---> B
|
||
|
||
|