HTTP XMLHttp Ajax WebSocket

计算机网络

  • 一篇就够:[https://juejin.im/post/5ad7e6c35188252ebd06acfa](https://juejin.im/post/5ad7e6c35188252ebd06acfa)
  • 从请求到响应过程详解:
  • TCP/IP超级详解
  • 简单总结:
    • 计算机网络体系解构:
    • tcp udp区别:
    • tcp 三次握手:
      • 为什么TCP建立连接需三次握手?
    • 四次挥手![在这里插入图片描述](https://img-blog.csdnimg.cn/2019082511130659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F5dW4wNDIw,size_16,color_FFFFFF,t_70)
      • 为什么TCP释放连接需四次挥手?
  • 网络模型数据处理过程
  • 域名的空间结构:
  • 跨域
    • 含义
    • 会造成跨域的行为
    • 同源策略
      • 什么是同源策略?
      • 同源策略限制以下几种行为:
      • 但是有三个标签是允许跨域加载资源:
  • 跨域的解决方案
    • jsonp(服务器与客户端跨源)
      • 为什么需要jsonp
      • 什么是jsonp
      • JSONP 的原理是什么?
      • 实现流程:
      • 代码实现
        • 简单实现:
        • promise封装
    • document.domain(跨网页)
    • location.hash 解决 iframe跨域(跨窗口)
    • window.postMessage()(跨窗口)
      • 简介
      • 用法
      • example
    • WebSocket
    • 跨域资源共享(CORS)
      • example
        • 前端设置
        • 服务端设置
    • 其他跨域
  • 代理和网关
    • 反向代理
    • 负载均衡和动静分离
  • Cookie 与 Session
  • Session与Token
  • cookie与token
  • cookie、localstroage、sessionstroage的区别
  • HTTP的几种请求方法用途
    • get与post
        • 同:
        • 异:
  • HTTP状态码及其含义
  • 常见的HTTP状态码
  • http 和 https 有何区别?如何灵活使用?
  • 重定向
  • WebSocket
  • XMLHTTP
    • 定义
    • XMLHTTP 实现
      • ActiveXObject
        • 什么是 ActiveX 控件
        • ActiveXObject 对象
        • ActiveXObject 语法
        • ActiveXObject 使用
      • XMLHttpRequest
  • XMLhttprequest详解。
    • XMLHttpRequest对象的常用方法和属性。
      • 方法:
      • 属性:
  • AJAX
    • 什么是AJAX
    • Ajax所包含的技术
    • Ajax的原理
    • Ajax的实现流程是怎样的?
    • AJAX都有哪些优点和缺点?
      • Ajax的优点
      • Ajax的缺点
    • Ajax请求与HTTP请求的区别
    • Ajax与websocket、http
  • Axios
    • 定义
    • 特征
    • Axios简单封装
      • 附注
        • process.env.NODE_ENV
      • Token
  • Web安全
    • XSS 与 CSRF 有什么区别吗?
    • XSS(Cross Site Scripting):跨域脚本攻击。
      • 原理
      • 分类
        • 反射型XSS(非持久化)
        • 存储型XSS(持久化)
        • DOM型XSS
      • 如何防御
    • CSRF(Cross Site Request Frogy)跨站请求伪造
      • 如何防御
        • cookies设置sameSite
        • 验证referer
        • 验证csrf token
        • 在 HTTP 头中自定义属性并验证

一篇就够:https://juejin.im/post/5ad7e6c35188252ebd06acfa

从请求到响应过程详解:

https://juejin.im/post/5b1265edf265da6e155d45a9
HTTP XMLHttp Ajax WebSocket_第1张图片

1、首先,在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。

3、在发送http请求前,需要域名解析(DNS解析)(DNS(域名系统,Domain Name System)是互联网的一项核心服务,
它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住IP地址。),解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。(TCP即传输控制协议。TCP连接是互联网连接协议集的一种。)

5、握手成功后,浏览器向服务器发送http请求,请求数据包。

6、服务器处理收到的请求,将数据返回至浏览器

TCP/IP超级详解

https://juejin.im/post/5a069b6d51882509e5432656#heading-24

简单总结:

计算机网络体系解构:

HTTP XMLHttp Ajax WebSocket_第2张图片

tcp udp区别:

HTTP XMLHttp Ajax WebSocket_第3张图片

tcp 三次握手:

HTTP XMLHttp Ajax WebSocket_第4张图片

为什么TCP建立连接需三次握手?

防止服务器端因接收了早已失效的连接请求报文,从而一直等待客户端请求,最终导致形成死锁、浪费资源

四次挥手HTTP XMLHttp Ajax WebSocket_第5张图片

为什么TCP释放连接需四次挥手?

为了保证通信双方都能通知对方 需释放 & 断开连接

网络模型数据处理过程

HTTP XMLHttp Ajax WebSocket_第6张图片

域名的空间结构:

HTTP XMLHttp Ajax WebSocket_第7张图片

跨域

含义

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源

会造成跨域的行为

1.) 资源跳转: A链接、重定向、表单提交
2.) 资源嵌入: <link><script><img><frame>等dom标签,还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等

同源策略

什么是同源策略?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制以下几种行为:

    1.) Cookie、LocalStorage 和 IndexDB 无法读取
    2.) DOM 节点
    3.) AJAX 请求可以被发送,但是会被浏览器拦截

但是有三个标签是允许跨域加载资源:

  <img src=XXX>

  <link href=XXX>

  <script src=XXX>

跨域的解决方案

https://segmentfault.com/a/1190000011145364
https://juejin.im/post/5c23993de51d457b8c1f4ee1

  • jsonp:只支持GET,不支持POST请求,不安全XSS
  • postMessage:配合使用iframe,需要兼容IE6、7、8、9
  • document.domain:仅限于同一域名下的子域
  • cors:需要后台配合进行相关的设置
  • websocket:需要后台配合修改协议,不兼容,需要使用socket.io
  • proxy:使用代理去避开跨域请求,需要修改nginx、apache等的配置
  • window.name + iframe跨域

jsonp(服务器与客户端跨源)

详解:https://segmentfault.com/a/1190000007935557

为什么需要jsonp

  • 首先,因为ajax无法跨域,然后开发者就有所思考

  • 其次,开发者发现,

你可能感兴趣的:(js)