HTTP协议：

一个完整的HTTP请求的过程：1、浏览器会向服务器端发送给一个包含命令和URL的HTTP请求报文；2、当服务器端接收到这个请求报文之后，会进行一系列的计算，向浏览器返回一个包含事务结果的HTTP响应报文；3、浏览器接收到响应报文之后，会将报文的主体显示在浏览器端上。

HTTP报文分为请求报文和响应报文。都是由三部分组成：头行、头部和主体。

头行由三部分构成：方法、主机地址、HTTP的版本

头部：许多的键值对构成

Accept：浏览器端可以接收的媒体类型

Accept-Encoding：浏览器端可以接收的媒体类型的编码的方式

Accept-Language：浏览器端可以接收的语言类型

Cache-Control：缓存策略

Connection：keep-alive

Cookie：浏览器端向服务器端发送的cookie值

Host：主机

Pragma：头域用来包含实现特定的指令,最常用的是no-cache

User-Agent：当前浏览器的版本

GET方法，请求体为空。

响应报文的格式：也是由三部分组成 头行 头部 和主体

头行：HTTP协议版本、HTTP状态码、HTTP状态码描述

expires：缓存的有效时间，如果缓存策略设置了缓存的话，可以设置下expires，赋一个时间戳。

server：服务器端的HTTP服务器使用的是Nginx服务器。

主体：因为访问的是一个页面，所以返回的是一个完整的xml文件。

常见的HTTP方法：

URL构成

protocol + host（hostname + port ）+ pathname + search + hash

port、pathname、search、hash都是不必须的。

HTTP版本

1991年，HTTP的原型，有很多设计缺陷 HTTP/0.9

HTTP/1.0版本很快取代了0.9，成为了第一个广泛应用的版本。

HTTP/1.0+ 添加持久的keep-alive连接、虚拟主机支持，以及代理连接支持，称为非官方的事实标准。

HTTP/1.1 校正了结构性缺陷，明确语义，引入重要的性能优化措施，删除不好特性。

常见HTTP状态码

HTTP协议在前端开发中的应用

Asynchronous Javascript and XML

完整的Ajax通信流程

1、创建一个Ajax对象 XHR（readyState：0，status： responseText：）当XHR初始化的时候，readyState=0，另外两个属性的值为空。

2、调用XHR对象的open方法，readyState=1，开启一个请求，以备发送。但是没有向服务器端发请求。xhr.open(method,url [ , async = true]) 默认是异步请求。

调用open方法之后调用xhr.setRequestHeader(header, value)，也不一定非要调用它。调用这个方法可以在请求体头部设置头部字段，比如把header的值设为content-type 。如果当前这个请求是表单编码的、文件上传

3、调用send方法，readyState=2，正式向服务器端发送请求。xhr.send([data = null])向服务器端发送请求的请求体里的数据。这个数据可以是string类型，也可以是formdata类型的。

4、当服务器端开始返回数据的时候，浏览器接收到这个数据，readyState=3。

5、浏览器端结束请求时，readyState=4，status=200，responseText=<!DOCTYPE html>

在HTTP2.0的标准里面，我们还可以监听它的xhr.onload事件，可以代替onreadystatechange事件，当readyState=4,&&status=200的时候才会触发。

请求参数序列化：

如果是get请求：需要把查询参数作为字符串，跟在URL后面，

如果这个查询参数是个对象，就需要把这个对象转换成这样一个字符串。

通过这个函数，我们传入一个对象，就会返回我们需要的那个字符串。

GET请求参数序列化

请求体里为null。

POST请求参数序列化

查询参数会作为send的参数。

同源策略：

两个页面拥有相同的协议（protocol）、端口（port）、主机（host），那么这两个页面就属于同一个源（origin）。

如果不满足同源策略的访问，称为：跨域资源访问，W3C定义了CORS，现代浏览器已经实现了对CORS的支持。

CORS标准的原理：

1、浏览器会捕获到A应用往S服务器发起的请求；

2、浏览器根据请求的情况，确定是否需要先作为一次预请求来验证S服务器是否允许发送当前请求过去、如果需要的话，浏览器会发起一个option的请求到S服务器来验证；

3、S服务器会根据浏览器发过来的header信息，验证S服务器对资源的配置信息，然后返回资源的实际控制配置权限，然后浏览器验证请求返回的信息，判断是否将请求发送到S服务器，4、如果可以的话就发送实际的请求到S服务器；如果不行，则异常退出。

4、如果不需要就跳过第三步；

5、S服务器返回请求数据及资源的配置信息至浏览器，然后浏览器验证资源的控制信息是否允许当前实际请求取到数据，

6、如果允许，则发送S服务器，返回数据给A应用。否则就异常退出。

其他跨域技术：

Frame代理

1、A应用要往S服务器取数据时，它会先用iframe请求S服务器上的代理文件，

2、S服务器返回了配置的代理文件，并载入iframe，

3、代理文件载入完成后，A应用将发送的请求通过消息、通信的方式传递给代理文件；

4、代理文件验证A应用是否在预先配置的白名单中，如果在则直接发送请求至S服务器，否则异常退出；

5、服务器返回数据至代理文件，

6、代理文件通过消息机制将请求的结果返回给A应用。

frame代理优点：1、参照cors标准，2、支持各种请求方法、

缺点：需要在目标服务器放置代理文件，它由于首次发起请求需要载入代理文件，在载入代理文件之前的所有请求都会存在一定的延迟，对于低版本浏览器受限于消息通信机制的限制，并发量大的请求返回时可能存在较大的延迟。

JSONP

JSON with padding（填充式JSON）

利用的是script可以跨域，利用script标签，向服务器请求一段JS代码，然后执行这段JS代码，实现跨域。

服务器就会返回一个叫json.js的一个文件，这个js文件里就是一段JS代码。执行handleResponse这个函数。response就是要从服务器端拿取得数据。

Comet

Web Sockets等

浏览器接收响应数据过大_DOM总结：数据通信（HTTP协议和Ajax）相关推荐

  1. 浏览器接收响应数据过大_交互响应性能之优化FID

    由于 FID 需要一个真实用户的交互,所以无法用实验数据测试. 为了在实验数据下预测 FID,通常会用 TBT(Total Blocking Time),具体这个指标后面文章会介绍.他们测量的内容不同 ...

  2. 浏览器接收响应消息并显示内容

    通过响应的数据类型判断其中的内容 Web服务器发送的响应消息会被分成多个包发送给客户端,然后客户端需要接收数据.首先,网卡将信号还原成数字信息,协议栈将拆分的网络包组装起来并取出响应消息,然后将消息转 ...

  3. 从输入 URL 到浏览器接收的过程中发生了什么事情

    从输入 URL 到浏览器接收的过程中发生了什么事情? 原文:http://www.codeceo.com/article/url-cpu-broswer.html 从触屏到 CPU  首先是「输入 U ...

  4. 【前端问题分析】从输入 URL 到浏览器接收的过程中发生了什么事情？

    从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互. 触摸屏一种传感器,目前大多是基于电容(Capacitive)来实现的,以前都是直接 ...

  5. 从输入 URL 到浏览器接收的过程中发生了什么事情？

    写得很全面,有待进一步展开.. 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互. 触摸屏一种传感器,目前大多是基于电容(Capaci ...

  6. c#实现ajax通信：向后台发送JSON字符串，接收响应字符串，并转换为对象

    全栈工程师开发手册 (作者:栾鹏) c#教程全解 c#实现ajax通信,通过向服务器后台发送json数据,接收响应数据提交给前台. 其中包含两个主要函数,发送数据,接收响应数据的Http请求响应函数. ...

  7. 存储在Redis中的数据多大比较合适

    存储在Redis中的数据多大比较合适 背景 过大的数据对 Redis 的影响 『过大』的定义是什么 结论 背景 本文是工作中应对一个实际业务场景的调研总结过程.在使用 redis 作为数据缓存的时候, ...

  8. 服务器向所有浏览器响应数据,浏览器工作原理与实践总结一

    一.常用Chrome架构 Chrome 打开一个页面需要启动多少进程?你可以点击 Chrome 浏览器右上角的"选项"菜单,选择"更多工具"子菜单,点击&quo ...

  9. 406（浏览器接收的响应类型和服务器返回的响应类型不匹配）

    也就是说,浏览器所接收的数据格式与服务器响应的数据格式是不匹配的. 浏览器接收的数据格式一般可以是任意格式,但是我们在发起Ajax请求时就已经确定了要接收的是Jsonp格式 响应的数据类型定义在的co ...

最新文章

  1. java junit 运行_appium+java+junit demo运行
  2. Oracle存储过程中异常Exception的捕捉和处理
  3. 上班族漫画（转收藏）
  4. mysql设置catalog_catalog恢复目录介绍和配置
  5. rabbitmq常用的五种模型
  6. 1/2 pymysql：Python连接MySQL数据库
  7. 对于 Netty ByteBuf 的零拷贝(Zero Copy) 的理解
  8. Ionic如何实现单选二级菜单切换
  9. SP2-0750: You may need to set ORACLE_HOME to your Oracle software directory
  10. Android RadioButton（单选按钮）点击事件的两种方法
  11. Excel拼接数据库语句
  12. SpringBoot集成SpringSecurity步骤
  13. 高启（1336－1373）
  14. Centos7 下nexus的安装和使用
  15. 安卓 每日一题 2019年9-12月问题及答案
  16. 安装目录里无法找到计算机,Win7系统下programdata文件夹找不到怎么办？
  17. 用python自己动手做一个小游戏01
  18. windows系统 kettle 下载、安装
  19. 绝缘监测及故障定位在码头岸电配电系统的应用
  20. 【商品分类数据集】——RP2K

热门文章

  1. d3.js中点可以用图片吗_结论第16课——抛物线的中点弦斜率
  2. python中home定义是什么_第48p，什么是函数？，Python中函数的定义
  3. python使用作为转义字符_当需要在字符串中使用特殊字符时， Python使用（）作为转义字符。...
  4. 政企边缘安全，如何助您提升企业免疫力？
  5. 阿里云邀您参加2020年数据湖高峰会议
  6. 《轩辕传奇手游》主程序带你拆解MMORPG游戏客户端
  7. 使用Unity引擎打造赛博朋克之城！CIGA Game Jam 2019 48小时独立游戏开发挑战
  8. Cocos Creator 3D 材质系统：曲面效果如何实现？
  9. 神超重回两只手操作时代？霸哥最强上单要被抢，战场在LOL手游
  10. 常见java面试题 普通类和抽象类的区别？