93 lines
1.8 KiB
Plaintext
93 lines
1.8 KiB
Plaintext
ajax
|
||
|
||
作用：是一种无刷新的网页数据交互技术
|
||
|
||
|
||
为什么需要它？
|
||
|
||
web网站如何开发
|
||
|
||
传统后端（服务端）渲染
|
||
|
||
不好：导致代码变得臃肿难以维护
|
||
|
||
后端：80% 工作量 实现功能，设计数据库，做完全维护，部署网站 1万
|
||
前端：20% 写页面 3千
|
||
适合seo优化
|
||
|
||
前后端分离
|
||
|
||
后端：50% 设计数据库，做完全维护，部署网站 1.2万
|
||
前端：50% 写页面，功能 1万
|
||
|
||
不利于做seo优化
|
||
|
||
|
||
|
||
ajax：后端响应前端数据
|
||
|
||
数据是什么格式：
|
||
|
||
1: xml
|
||
|
||
<data>
|
||
<title>哈哈哈</title>
|
||
</data>
|
||
|
||
2: json
|
||
|
||
js 里面数组和对象的各种嵌套组合
|
||
|
||
var data = [
|
||
{ title: 1 },
|
||
{ title: 1 }
|
||
]
|
||
|
||
ajax (http)请求的方式：
|
||
|
||
4种：
|
||
|
||
GET 表示 获取 一个东西
|
||
|
||
query 地址栏传参数
|
||
http://127.0.0.1/index.php?id=1&name=liubing
|
||
|
||
POST 表示 提交 一个东西
|
||
表单传参数 对象传参 { name: 1 }
|
||
|
||
|
||
PUT 表示 更新 一个东西
|
||
DELETE 表示 删除 一个东西
|
||
|
||
ajax（http）状态码：
|
||
|
||
200 成功
|
||
404 地址不存在
|
||
...
|
||
|
||
http://tools.jb51.net/table/http_status_code
|
||
|
||
|
||
浏览器 安全策略 同源协议 （跨域）
|
||
|
||
1：请求协议 http 80 https 443
|
||
2：请求端口
|
||
3：请求的域名
|
||
|
||
前端：http://127.0.0.1:3000/test.php file:///C:/Users/bmy/Desktop/2021-07-15/index.html
|
||
后端：http://127.0.0.1:8080/index.php
|
||
|
||
解决跨域：
|
||
|
||
1：cors 后端设置一下 请求头：Access-Control-Allow-Origin 即可
|
||
|
||
【淘汰】2：jsonp 不是ajax请求, 主要把接口地址伪装成 js 文件请求，绕过浏览器的安全策略，然后通过
|
||
callback回调拿到数据。
|
||
|
||
3：服务端代理
|
||
|
||
A（自己公司前端） ---> B（别人后端）
|
||
A（自己公司前端） ---> C（自己公司的后端）
|
||
C（自己公司的后端） ---> B（别人后端）
|
||
|