跨域&请求报文,响应报文&服务端渲染&前后端分离
jsonp 跨域
浏览器端通过 <script> 标签的 src 属性,请求服务器上的数据,同时,服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP特点:JSONP 仅支持 GET 请求,不支持 POST、PUT、DELETE 等请求
cors跨域资源请求
简单请求:
1. 同时满足以下两大条件的请求,就属于简单请求:
请求方式:GET、POST、HEAD 三者之一
HTTP 头部信息不超过以下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、
Downlink、Save-Data、Viewport-Width、Width 、Content-Type(只有三个值application/x-www-form-
urlencoded、multipart/form-data、text/plain)
2. 简单请求的特点:客户端与服务器之间只会发生一次请求
预检请求:
只要符合以下任何一个条件的请求,都需要进行预检请求:
1. 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
2. 请求头中包含自定义头部字段
3. 向服务器发送了 application/json 格式的数据
在浏览器与服务器正式通信之前,浏览器会先发送 OPTION 请求进行预检,以获知服务器是否允许该实际请求,所以这一
次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据
预检请求的特点:OPTION 预检请求成功之后,才会发起真正的请求。
服务端渲染的优缺点
优点:
前端耗时少。因为服务器端负责动态生成 HTML 内容,浏览器只需要直接渲染页面即可。尤其是移动端,更省电。
有利于SEO。因为服务器端响应的是完整的 HTML 页面内容,所以爬虫更容易爬取获得信息,更有利于
缺点:
占用服务器端资源。即服务器端完成 HTML 页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力。
不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,尤其对于前端复杂度高的项目,不利于项目高效开发。
前后端分离的 Web 开发模式
前后端分离的概念:前后端分离的开发模式,依赖于 Ajax 技术的广泛应用。即后端不提供完整的 HTML 页面内容,而
是提供一些 API 接口,使得前端可以获取到 json 数据;然后前端通过 Ajax 调用后端提供的 API 接口,拿到 json 数据
之后再在前端进行 HTML 页面的拼接,最终展示在浏览器上
简而言之,前后端分离的 Web 开发模式,就是后端只负责提供 API 接口,前端使用 Ajax 调用接口的开发模式。
前后端分离的优缺点
优点
开发体验好。前端专注于 UI 页面的开发,后端专注于api 的开发,且前端有更多的选择性。
用户体验好。Ajax 技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新。
减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的
缺点
不利于 SEO。因为完整的 HTML 页面需要在客户端动态拼接完成,所以爬虫对无法爬取页面的有效信息。(解决方
案:利用 Vue、React 等前端框架的 SSR (server side render)技术能够很好的解决 SEO 问题
http协议
- 二台电脑 一台是客户端 一台是服务器 客户端和服务器在通信
- 本质就是二台电脑在交互
- 提前规定好了什么东西代表,有一套规范在里面,必须严格按这个规范来传递消息,要不然双方不知道对方在说什么
1. 提前规定好
2. 严格按这个格式去发消息
- http协议
传的是超文本的东西 只有文本、还有图片、视频、音频
超文本 html
- http协议
客户端向服务器传递东西 请求相关的东西 请求报文
服务器向客户端传递的东西 响应相关的东西 响应报文
- 报文不能随便写 格式严格提前约定好
- 所谓掌握http协议指的就是了解请求报文格式、响应报文格式长什么样子
- 想办法看原始报文
请求报文
请求行
请求方式(getpost) url 协议版本(http1.1)
请求头
组成格式是:键:值
Content-Type:
告诉服务器请求体的格式长什么样子
application/x-www-form-urlencoded 打包成一个整体
multipart/form-data 一个一个发送
请求体
只有post才会请求体
就是查询参数
xhr.send('username=zs&age=20')
响应报文
状态行
状态码
电脑出问题了 黑屏 按电源键 主板坏了 响一声 二声
有 200 没有 404
200 成功
404 找不到
500 服务器出问题
304 走缓存
响应头
告诉客户端这个数据是什么类型的数据
响应体
html代码、css代码 图片、ajax返回的数据
请求头可以用来告诉服务器请求体的数据长什么样子的
响应头是用来告诉客户端响应体数据长什么样子的