B-S模式:

browser------>server

BS模式工作过程:

用户在 browser 输入一个URL 确定要访问的server

browser发送 post/get请求 给server端

server端 响应html网页代码 给browser

browser渲染网页代码效果呈现给用户

一、http协议是什么?

超文本传输协议:HTTP(hypertext transport protocol),即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相传输数据的规则。

HTTP就是一个通信规则,通信规则规定了客户端发送给服务器的内容格式,也规定了服务器发送给客户端的内容格式。其实我们要学习的就是这个两个格式!

超文本传输协议的分类:

客户端发送给服务器的格式叫“请求协议”;

服务器发送给客户端的格式叫“响应协议”。

特点:

  • HTTP叫超文本传输协议,基于请求/响应模式的!
  • HTTP是无状态协议。()

请求协议:浏览器访问服务器时遵循的规则

1、GET请求

HTTP默认的请求方法就是GET
     * 没有请求体
     * 数据必须在1K之内!
     * GET请求数据会暴露在浏览器的地址栏中

GET请求常用的操作:
       1. 在浏览器的地址栏中直接给出URL,那么就一定是GET请求
       2. 点击页面上的超链接也一定是GET请求
       3. 提交表单时,表单默认使用GET请求,但可以设置为POST

html:是通信时数据传输格式

由于http的特性时无状态的,所以每次请求时客户端携带cokie去访问服务端

cokie 把会话信息全部保存在客户端

session:是把会话信息放在服务端,客户端保存会话ID,通过会话ID去服务器打开自己的会话信息;

2、post

(1). 数据不会出现在地址栏中
(2). 数据的大小没有上限
(3). 有请求体
(4). 请求体中如果存在中文,会使用URL编码!

响应协议:服务器响应客户端时遵循的标准

响应首行;
响应头信息;
空行;
响应体。

响应状态码

  • 200:请求成功,浏览器会把响应体内容(通常是html)显示在浏览器中;
  • 404:请求的资源没有找到,说明客户端错误的请求了不存在的资源;
  • 500:请求资源找到了,但服务器内部出现了错误;
  • 302:重定向,当响应码为302时,表示服务器要求浏览器重新再发一个请求,服务器会发送一个响应头Location,它指定了新请求的URL地址;
  • 304:缓存未过期,继续去获取缓存资源。
  • 当用户第一次请求index.html时,服务器会添加一个名为Last-Modified响应头,这个头说明了
    index.html的最后修改时间,浏览器会把index.html内容,以及最后响应时间缓存下来。当用户第
    二次请求index.html时,在请求中包含一个名为If-Modified-Since请求头,它的值就是第一次请
    求时服务器通过Last-Modified响应头发送给浏览器的值,即index.html最后的修改时间,
    If-Modified-Since请求头就是在告诉服务器,我这里浏览器缓存的index.html最后修改时间是这个,
    您看看现在的index.html最后修改时间是不是这个,如果还是,那么您就不用再响应这个index.html
    内容了,我会把缓存的内容直接显示出来。而服务器端会获取If-Modified-Since值,与index.html
    的当前最后修改时间比对,如果相同,服务器会发响应码304,表示index.html与浏览器上次缓存的相
    同,无需再次发送,浏览器可以显示自己的缓存页面,如果比对不同,那么说明index.html已经做了修
    改,服务器会响应200。

前端基础之http协议的更多相关文章

  1. 前端基础(http协议相关篇)

    网络协议篇: 1.http请求过程 DNS解析——tcp三次握手——建立tcp连接后发起http请求——服务器响应http请求 ——浏览器得到资源——浏览器渲染 2.http报文 通用首部:可以出现在 ...

  2. 前端基础:HTTP 协议详解

    参考:https://kb.cnblogs.com/page/130970/#httpmeessagestructe HTTP协议是无状态的 http协议是无状态的,同一个客户端的这次请求和上次请求是 ...

  3. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  4. 前端基础:HTML标签(下)

    前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含t ...

  5. day--42 前端基础小结

    前端基础总结 一:前端实现的原理: 小实例: 01:第一步:创建一个socket服务端: import socket server=socket.socket() ip_port=("127 ...

  6. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  7. 前端第一篇---前端基础之HTML内容

    前端基础之HTML内容 阅读目录(Content) 一.HTML初识 1.web服务本质 2.HTML是什么 3.HTML不是什么 二.HTML文档结构 三.HTML标签格式 四.HTML注释 五.H ...

  8. 前端第三篇---前端基础之JavaScript

    前端第三篇---前端基础之JavaScript 一.JavaScript概述 二.JavaScript的基础 三.词法分析 四.JavaScript的内置对象和方法 五.BOM对象 六.DOM对象 七 ...

  9. 前端基础面试题(js部分)

      前端基础面试题(JS部分)   1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...

随机推荐

  1. tomcat中实现特定路径下的图片的url访问Tomcat配置图片保存路径,图片不保存在项目路径下

    使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项目路径下,那么再次打war包发布项目可能会造成图片的丢失,每次重启前将图片先保存再copy到服务器明显不方便,这时可以配置图片保 ...

  2. 使用redux简单的实现加法运算(简单的状态改变)

    描述该做啥?(action)!具体怎么做(reducer)!统一规划(store:包含reducer+所有的state) 上代码:index.ios.js import React, { Compon ...

  3. js code

    //在页面增加一个放置图标的区块 if(!document.getElementById('_span_jiucuo')) document.write("<span id='_spa ...

  4. Excel 常用设置

    首行固定 视图->冻结窗口

  5. es6 Set 结合 Array.from 用法

    var arr=[1,2,3,2,3,4,5]; var set=new Set(arr) var arr1=Array.from(set) 重复数组  -  Set 化 (去重) - 转回数组 上述 ...

  6. 学习笔记7—python 列表,数组,矩阵两两转换tolist()

    from numpy import *   a1 =[[1,2,3],[4,5,6]] #列表 print('a1 :',a1) #('a1 :', [[1, 2, 3], [4, 5, 6]])   ...

  7. js常见知识点2.面向对象相关

    一.对象的概念 建议回复: 对象是一个整体,对外提供一些功能. 一切具有属性和方法的事物. 一切具有本质特征和行为的物质. 数据类型:       所有的基本数据类型都没有属性和方法.       所 ...

  8. openstack 重启服务命令

    重启openstack的整个服务openstack-service restart 1. 重启dashboardservice httpd restart service memcached rest ...

  9. h5内容超出可以滑动展示的处理,iscroll的使用

    第一步: 引入js 第二步:页面结构 第三步:使用 dome效果:http://cubiq.org/dropbox/iscroll4/examples/simple/ 文档地址:http://iscr ...

  10. VIM编辑器和VI编辑器的区别

    vi 和vim 的区别 写在前面:这个两个"东西"着实让我烦恼一阵子,但是自己一直没当回事,但是遇到了好几次再决定彻底把他们搞的明白,一下是我通过查找资料了解到的关于这两个编辑器的 ...