http知识点

最新推荐文章于 2024-07-07 11:26:20 发布

原创最新推荐文章于 2024-07-07 11:26:20 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

面试专栏收录该内容

20 篇文章

订阅专栏

本文深入讲解前端开发中的网络请求技术，包括Ajax的工作原理、状态码、同源策略及跨域解决方案，同时对比了Cookie、localStorage与sessionStorage的区别，并探讨了HTTP缓存机制。

参考链接： https://segmentfault.com/a/11900000159693

实际项目中aj

Ajax:

ax的常用插件
jQuery 
fetch
  fetch的问题：fetch返回的promise不会被标记为reject，即使该http响应的状态码是404 或 500。只有网络故障或请求被阻止时才会标记为reject

axios:
axios 是对 XMLHTTPRequest  的封装

手写ajax

xhr.readuState
0：未初始化，还未调用send方法
1：载入，已调用send方法，正发送请求
2：载入完成，send方法执行完毕，已接收到全部响应内容
3：交互，正在解析响应内容
4：完成，响应内容解析完成，可以再客户端调用

手写一个ajax

上面代码缺少： xhr.send(null), 代码加在on 函数之后

同源策略：
1.ajax 请求时，浏览器要求当前网页和 server 必须同源（安全）
2.同源：协议、域名、端口。三者必须一致

加载 图片 css js 可无视同源策略
如 CDN 的使用一般都是外域。

所有的跨域，都必须经过 server 端的允许和配合。
未经 server daunt的允许和配合就实现跨域，说明浏览器有漏洞，危险信号

jsonp解决跨域的原理:
1. 前端利用script标签加载文件时不需要遵守同源策略，在script中可以引入跨域的js文件，然后在引入全局的callback函数（window.callback = function(){...}）用来接收数据。
2. 服务端返回的js文件是一段 js代码：是执行一个全局函数，在函数中传入想要返回的数据。

cors

描述localStory 和sessionStory区别

cookie：

1.可以用来当做本地存储
2.浏览器和服务器端的通信
cookie计算方式 同key覆盖，不同key 追加
缺点：
1.存储大小，最大4kb
2.http 请求时需要发送到服务端，增加请求数据量
3.只能用 document.cookie = '...' 来修改，太过简陋

localStorage 和 sessionStorage:
1.HTML5 专门为存储设计，大小为5M
2.Api简单易用，setItem, getItem
3.不会随着http请求被发送出去

localStorage 永久存储，除非代码或手动删除
sessionStorage 数据只存在于当前会话，浏览器关闭则清空
一般用 localStorage 会更多一点

三者的区别：
1.容量
2.API
3.是否跟随http请求发送出去

http面试题：

http常用状态码：

①　状态码分类: 
1xx  服务器收到请求
2xx  请求 成功,如200 ok
3xx  重定向,如302 Found
4xx  客户端错误,如404
5xx  服务端错误,如500 internal server error

常见状态码：
200 成功
301 永久重定向(配合location,浏览器自动处理)
302 临时重定向(配合location,浏览器自动处理) !!!重要
304 资源已被请求过且未被修改  not modified
401 Unauthorized当前请求需要用户验证
403 Forbidden 服务器已经收到请求，但拒绝执行  //没有权限
404 Not Found 服务器无法根据用户的请求找到资源//文件不存在或者请求路径有问题
500 服务器错误
504 网关超时

http常用的method:

传统： get 获取，post 提交数据

现在的： get 获取，post新建数据， patch/put更新数据， delete 删除数据

3)Restful API

①　一种新的API设计方法
②　与传统API设计的区别 (背)
传统API设计:把每个url当做一个功能
Restful API 设计: 把每个url当做一个唯一的资源
③　如何设计成一个资源?
尽量不用url参数;  
用/api/list/2  代替  /api/list?pageIndex=2
对应的后端: get(‘/api/list/:pageIndex’)
用method表示操作类型 ;
post只新建,get只获取,其它methods类推

常见的HttpHeaders:

Response Headers
Content-type: 返回数据的格式，如application/json
Content-length: 返回数据的大小，多少字节
Content-Encoding: 返回数据的压缩算法，如gzip
Set-Cookie: 服务端需要通过该字段来修改浏览器中的cookie

request Headers
Accept 浏览器可接受的数据格式
Accept-encoding 浏览器可接受的压缩算法，如gzip(服务器压缩，客户端解压，让传输的资源变小，速度更快)
Accept-Language 浏览器可接收的语言，如zh-CN
Connect：keep-alive 一次TCP连接重复使用
Cookie：同域每次请求资源都会把cookie带上
Host：请求的域名
User-agent：简称UA，浏览器信息，标识是什么浏览器，是什么系统，供给服务器分析
Content-type：发送数据的格式，如application/json（一般get请求是没有的）

缓存相关的headers
Cache-Control Expires
Last-Modified If-Modified-Since
Etag If-None-Match

缓存：

强制缓存：

Cache-Control（强制请求）：存在于Response Headers中；是由服务器端决定哪些资源需要缓存，控制强制缓存的逻辑，客户端控制不了；

控制强制缓存的逻辑,再次请求发现有本地缓存,不使用网络,直接返回资源
max-age  : 资源在多少秒内有效
no-cache : 不使用强制缓存,由服务端决定do what
no-store : 不使用强制缓存,服务端也不缓存,直接由服务端返回新资源
private : 只允许最终用户缓存
pubilc : 用户和中间的代理都能缓存资源 

expires
Response Headers ;表示资源的过期时间;已经被Cache-Control代替

协商缓存：

协商缓存（对比缓存）：
是服务器端缓存策略，不是将资源缓存在服务器端。
服务器判断客户端资源，是否和服务端资源一样。如果服务器端告知目标资源未改变，则可以使用本地的资源，不需要由服务器端重新下载返回资源。
一致则返回304，否则返回200和最新资源。

资源标识: 
体积很小; 在Response Headers中, 有两种: 
	(1) Last-Modified : 资源的最后修改时间,
			if-Modified-Since : 请求头中,==Last-Modified
(2) Etag : 资源的唯一标识(一个字符串,类似人类的指纹)
if-None-Match : 请求头中, ==Etag
前者比较时间;后者比较字符串;可以共存,但优先Etag,因为即使内容没有变,只要编辑了Last-modified就会更新,这样并不精准.

"缓存是否过期" 中是通过cache-control max-age来判断的

缓存的整体流程：

刷新操作对缓存的影响：

4)刷新操作方式,对缓存的影响
不同的刷新方式,不同的缓存策略:

正常操作 : 地址栏输入url ,跳转链接,前进后退等; 两种缓存都有效 
手动刷新 : F5 ,点击刷新按钮,右击菜单刷新; 仅协商缓存有效， 强制缓存都
强制刷新 : ctrl +f5  cmd + r ;  都无效